diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..168552e
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,18 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(bun run build)",
+      "mcp__ide__getDiagnostics",
+      "Bash(bun install:*)",
+      "Bash(bun preview:*)",
+      "Bash(curl:*)",
+      "Bash(python -:*)",
+      "Bash(bun run:*)",
+      "Bash(bunx:*)",
+      "Bash(bun:*)",
+      "Bash(git diff:*)",
+      "Bash(git add:*)",
+      "Bash(git status:*)"
+    ]
+  }
+}
diff --git a/.deploy/stream.ui-production.yaml b/.deploy/stream.ui-production.yaml
new file mode 100644
index 0000000..cc00184
--- /dev/null
+++ b/.deploy/stream.ui-production.yaml
@@ -0,0 +1,79 @@
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: stream.ui-config
+  namespace: stream-production
+  labels:
+    app: stream.ui
+data:
+  STREAM_API_GRPC_ADDR: "stream.api-svc:9000"
+  GOOGLE_AUTH_FINALIZE_PATH: "/auth/google/finalize"
+---
+kind: Service
+apiVersion: v1
+metadata:
+  name: stream.ui-svc
+  namespace: stream-production
+  labels:
+    app: stream.ui
+spec:
+  selector:
+    app: stream.ui
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 3000
+  type: NodePort
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: stream.ui-dep
+  namespace: stream-production
+  labels:
+    app: stream.ui
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: stream.ui
+  template:
+    metadata:
+      labels:
+        app: stream.ui
+    spec:
+      imagePullSecrets:
+        - name: registry-production-secret
+      containers:
+        - name: stream.ui
+          image: registry.awing.vn/stream-production/stream.ui:$BUILD_NUMBER
+          ports:
+            - containerPort: 3000
+          env:
+            - name: STREAM_API_GRPC_ADDR
+              valueFrom:
+                configMapKeyRef:
+                  name: stream.ui-config
+                  key: STREAM_API_GRPC_ADDR
+            - name: GOOGLE_AUTH_FINALIZE_PATH
+              valueFrom:
+                configMapKeyRef:
+                  name: stream.ui-config
+                  key: GOOGLE_AUTH_FINALIZE_PATH
+            - name: STREAM_INTERNAL_AUTH_MARKER
+              valueFrom:
+                secretKeyRef:
+                  name: stream.ui-secret
+                  key: STREAM_INTERNAL_AUTH_MARKER
+            - name: STREAM_UI_JWT_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: stream.ui-secret
+                  key: STREAM_UI_JWT_SECRET
+            - name: STREAM_UI_REDIS_URL
+              valueFrom:
+                secretKeyRef:
+                  name: stream.ui-secret
+                  key: STREAM_UI_REDIS_URL
+
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..5f81cec
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,68 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Build outputs
+dist
+build
+.rsbuild
+node_modules
+/node_modules
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE and editor files
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile
+.dockerignore
+docker-compose.yml
+
+# Documentation
+README.md
+*.md
+
+# Test files
+coverage
+.coverage
+.nyc_output
+test
+tests
+__tests__
+*.test.js
+*.test.ts
+*.spec.js
+*.spec.ts
+
+# Linting
+.eslintrc*
+.prettierrc*
+.stylelintrc*
+
+# Other
+.husky
\ No newline at end of file
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..fc9f4d9
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,374 @@
+# AGENTS.md
+
+This file provides guidance for AI coding agents working with the Holistream codebase.
+hallo
+## Project Overview
+
+**Holistream** is a Vue 3 streaming application with Server-Side Rendering (SSR) deployed on Cloudflare Workers. It provides video upload, management, and streaming capabilities for content creators.
+
+### Key Characteristics
+
+- **Type**: Full-stack web application with SSR
+- **Primary Language**: TypeScript
+- **Package Manager**: Bun (evident from `bun.lock`)
+- **Deployment Target**: Cloudflare Workers
+
+## Technology Stack
+
+| Category | Technology | Version |
+|----------|------------|---------|
+| Framework | Vue | 3.5.27 |
+| Router | Vue Router | 5.0.2 |
+| Server Framework | Hono | 4.11.7 |
+| Build Tool | Vite | 7.3.1 |
+| CSS Framework | UnoCSS | 66.6.0 |
+| UI Components | PrimeVue | 4.5.4 |
+| State Management | Pinia | 3.0.4 |
+| Server State | Pinia Colada | 0.21.2 |
+| Meta/SEO | @unhead/vue | 2.1.2 |
+| Utilities | VueUse | 14.2.0 |
+| Validation | Zod | 4.3.6 |
+| Deployment | Wrangler | 4.62.0 |
+
+## Project Structure
+
+```
+.
+├── src/
+│   ├── api/                    # API client and HTTP adapters
+│   │   ├── client.ts           # Auto-generated API client from OpenAPI spec
+│   │   ├── httpClientAdapter.client.ts   # Client-side fetch adapter
+│   │   └── httpClientAdapter.server.ts   # Server-side fetch adapter
+│   ├── client.ts               # Client entry point (hydration)
+│   ├── components/             # Vue components
+│   │   ├── dashboard/          # Dashboard-specific components
+│   │   ├── icons/              # Custom icon components
+│   │   ├── ui/                 # UI primitive components
+│   │   ├── ClientOnly.tsx      # SSR-safe client-only wrapper
+│   │   ├── DashboardLayout.vue # Main dashboard layout
+│   │   ├── GlobalUploadIndicator.vue
+│   │   ├── NotificationDrawer.vue
+│   │   └── RootLayout.vue      # Root application layout
+│   ├── composables/            # Vue composables
+│   │   └── useUploadQueue.ts   # Upload queue management
+│   ├── index.tsx               # Server entry point (Hono app)
+│   ├── lib/                    # Utility libraries
+│   │   ├── constants.ts        # Application constants
+│   │   ├── directives/         # Custom Vue directives
+│   │   ├── hoc/                # Higher-order components
+│   │   ├── interface.ts        # TypeScript interfaces
+│   │   ├── liteMqtt.ts         # MQTT client (browser)
+│   │   ├── manifest.ts         # Vite manifest utilities
+│   │   ├── PiniaSharedState.ts # Pinia state hydration plugin
+│   │   ├── primePassthrough.ts # PrimeVue theme configuration
+│   │   ├── replateStreamText.ts
+│   │   └── utils.ts            # Utility functions (cn, formatters, etc.)
+│   ├── main.ts                 # App factory function
+│   ├── mocks/                  # Mock data for development
+│   ├── routes/                 # Route components (page components)
+│   │   ├── auth/               # Authentication pages
+│   │   ├── home/               # Public pages (landing, terms, privacy)
+│   │   ├── notification/       # Notification page
+│   │   ├── overview/           # Dashboard overview
+│   │   ├── plans/              # Payments & plans
+│   │   ├── profile/            # User profile
+│   │   ├── upload/             # Video upload
+│   │   ├── video/              # Video management
+│   │   ├── index.ts            # Router configuration
+│   │   └── NotFound.vue        # 404 page
+│   ├── server/                 # Server-side utilities
+│   │   └── modules/
+│   │       └── merge.ts        # Video chunk merge logic
+│   ├── stores/                 # Pinia stores
+│   │   └── auth.ts             # Authentication store
+│   ├── type.d.ts               # TypeScript declarations
+│   └── worker/                 # Worker utilities
+│       ├── html.ts
+│       └── ssrLayout.ts
+├── bootstrap_btn.ts            # Bootstrap button preset for UnoCSS
+├── ssrPlugin.ts                # Custom Vite SSR plugin
+├── uno.config.ts               # UnoCSS configuration
+├── vite.config.ts              # Vite configuration
+├── wrangler.jsonc              # Cloudflare Workers configuration
+├── tsconfig.json               # TypeScript configuration
+├── package.json                # Package dependencies
+├── bun.lock                    # Bun lock file
+├── docs.json                   # OpenAPI/Swagger spec for API
+├── auto-imports.d.ts           # Auto-generated type declarations
+└── components.d.ts             # Auto-generated component declarations
+```
+
+## Build and Development Commands
+
+```bash
+# Install dependencies
+bun install
+
+# Start development server with hot reload
+bun dev
+
+# Build for production (client + worker)
+bun run build
+
+# Preview production build locally
+bun preview
+
+# Deploy to Cloudflare Workers
+bun run deploy
+
+# Generate TypeScript types from Wrangler config
+bun run cf-typegen
+
+# View Cloudflare Worker logs
+bun run tail
+```
+
+> **Note**: While npm commands work (`npm run dev`, etc.), the project uses Bun as its primary package manager.
+
+## Architecture Details
+
+### SSR Architecture
+
+The application uses a custom SSR setup defined in `ssrPlugin.ts`:
+
+1. **Build Order**: Client bundle is built FIRST, then the Worker bundle
+2. **Manifest Injection**: Vite manifest is injected into the server build for asset rendering
+3. **Environment-based Resolution**: `httpClientAdapter` and `liteMqtt` resolve to different implementations based on SSR context
+
+**Entry Points:**
+- **Server**: `src/index.tsx` - Hono app that renders Vue SSR stream
+- **Client**: `src/client.ts` - Hydrates the SSR-rendered application
+- **App Factory**: `src/main.ts` - Creates the Vue app instance (used by both)
+
+### State Management with SSR
+
+Uses **Pinia Colada** for server state with SSR hydration:
+
+- Server-side queries are fetched and serialized to `window.__APP_DATA__`
+- Client hydrates the query cache via `hydrateQueryCache()`
+- Pinia state is serialized and restored via `PiniaSharedState` plugin
+
+### Module Aliases
+
+Configured in `tsconfig.json` and `vite.config.ts`:
+
+| Alias | Resolution |
+|-------|------------|
+| `@/` | `src/` |
+| `@httpClientAdapter` | `src/api/httpClientAdapter.server.ts` (SSR) or `.client.ts` (browser) |
+| `@liteMqtt` | `src/lib/liteMqtt.server.ts` (SSR) or `.ts` (browser) |
+
+### API Client Architecture
+
+The API client (`src/api/client.ts`) is **auto-generated** from the OpenAPI spec (`docs.json`):
+
+- Uses `customFetch` adapter that differs between client/server
+- **Server adapter** (`httpClientAdapter.server.ts`): Forwards cookies, merges headers, proxies to `api.pipic.fun`
+- **Client adapter** (`httpClientAdapter.client.ts`): Standard fetch with credentials
+- API proxy route: `/r/*` paths proxy to `https://api.pipic.fun`
+
+### Routing Structure
+
+Routes are defined in `src/routes/index.ts` with three main layout groups:
+
+1. **Public** (`/`): Landing page, terms, privacy
+2. **Auth** (`/login`, `/sign-up`, `/forgot`): Authentication pages (redirects if logged in)
+3. **Dashboard**: Protected routes requiring authentication
+   - `/overview` - Main dashboard
+   - `/upload` - Video upload with queue management
+   - `/video` - Video list
+   - `/video/:id` - Video detail/edit
+   - `/payments-and-plans` - Billing management
+   - `/notification`, `/profile` - User settings
+
+Route meta supports `@unhead/vue` for SEO:
+```ts
+meta: { 
+  head: { 
+    title: "Page Title", 
+    meta: [{ name: "description", content: "..." }] 
+  } 
+}
+```
+
+### Styling System (UnoCSS)
+
+Configuration in `uno.config.ts`:
+
+- **Presets**: Wind4 (Tailwind-like), Typography, Attributify, Bootstrap buttons
+- **Custom Colors**: 
+  - `primary` (#14a74b)
+  - `secondary` (#fd7906)
+  - `accent`, `success`, `info`, `warning`, `danger`
+- **Shortcuts**: `press-animated` for button press effects
+- **Transformers**: 
+  - `transformerCompileClass` (prefix: `_` for compiled classes)
+  - `transformerVariantGroup`
+
+Use `cn()` from `src/lib/utils.ts` for conditional class merging (combines `clsx` + `tailwind-merge`).
+
+### Component Auto-Import
+
+Components are auto-imported via `unplugin-vue-components`:
+
+- PrimeVue components resolved via `PrimeVueResolver`
+- Vue/Pinia/Vue Router APIs auto-imported via `unplugin-auto-import`
+- Type declarations auto-generated to `components.d.ts` and `auto-imports.d.ts`
+
+## Development Guidelines
+
+### Code Style
+
+- **TypeScript**: Strict mode enabled
+- **JSX/TSX**: Supported for components (import source: `vue`)
+- **CSS**: Use UnoCSS utility classes; custom CSS in component `<style>` blocks when needed
+
+### File Organization
+
+- Page components go in `src/routes/` following the route structure
+- Reusable components go in `src/components/`
+- Composables go in `src/composables/`
+- Stores go in `src/stores/`
+- Server utilities go in `src/server/`
+
+### HTTP Requests
+
+**Always use the generated API client** instead of raw fetch:
+
+```ts
+import { client } from '@/api/client';
+
+// Example
+const response = await client.auth.loginCreate({ email, password });
+```
+
+The client handles:
+- Base URL resolution
+- Cookie forwarding (server-side)
+- Type safety
+
+### Authentication Flow
+
+- `useAuthStore` manages auth state with cookie-based sessions
+- `init()` is called on every request to fetch current user via `/me` endpoint
+- `beforeEach` router guard redirects unauthenticated users from protected routes
+- MQTT client connects on user login for real-time notifications
+
+### File Upload Architecture
+
+Upload queue (`src/composables/useUploadQueue.ts`):
+
+- Supports both local files and remote URLs
+- Presigned POST URLs fetched from API
+- Parallel chunk upload (90MB chunks, max 3 parallel)
+- Progress tracking with speed calculation
+
+### Type Safety
+
+- TypeScript strict mode enabled
+- `CloudflareBindings` interface for environment variables (generated via `cf-typegen`)
+- API types auto-generated from backend OpenAPI spec (`docs.json`)
+
+## Environment Configuration
+
+### Cloudflare Worker Bindings
+
+Configured in `wrangler.jsonc`:
+
+```json
+{
+  "name": "holistream",
+  "compatibility_date": "2025-08-03",
+  "compatibility_flags": ["nodejs_compat"],
+  "observability": { ... }
+}
+```
+
+- No explicit secrets in code - use Wrangler secrets management
+- Access environment variables via Hono context: `c.env.VAR_NAME`
+
+### Local Environment
+
+Create `.dev.vars` for local development secrets (do not commit):
+
+```
+SECRET_KEY=...
+```
+
+## Testing and Quality
+
+**Current Status**: There are currently no automated test suites (like Vitest) or linting tools (like ESLint/Prettier) configured.
+
+When adding tests or linting:
+- Add appropriate dev dependencies
+- Update this section with commands and conventions
+- Consider the SSR environment when writing tests
+
+## Security Considerations
+
+1. **Cookie Security**: Cookies are httpOnly, secure, and sameSite
+2. **CORS**: Configured via Hono's CORS middleware
+3. **API Proxy**: Backend API is never exposed directly to the browser; all requests go through `/r/*` proxy
+4. **Input Validation**: Use Zod for runtime validation
+5. **XSS Protection**: HTML escaping is applied to SSR data via `htmlEscape()` function
+
+## Common Patterns
+
+### Creating a New Page
+
+1. Create component in `src/routes/<section>/PageName.vue`
+2. Add route to `src/routes/index.ts` with appropriate meta
+3. Use `head` in route meta for SEO if needed
+
+### Using the Upload Queue
+
+```ts
+import { useUploadQueue } from '@/composables/useUploadQueue';
+
+const { items, addFiles, addRemoteUrls, startQueue } = useUploadQueue();
+```
+
+### Accessing Hono Context in Components
+
+```ts
+import { inject } from 'vue';
+
+const honoContext = inject('honoContext');
+```
+
+### Conditional Classes
+
+```ts
+import { cn } from '@/lib/utils';
+
+const className = cn(
+  'base-class',
+  isActive && 'active-class',
+  variant === 'primary' ? 'text-primary' : 'text-secondary'
+);
+```
+
+## External Dependencies
+
+- **Backend API**: `https://api.pipic.fun`
+- **MQTT Broker**: `wss://mqtt-dashboard.com:8884/mqtt`
+- **Fonts**: Google Fonts (Google Sans loaded from fonts.googleapis.com)
+
+## Important Files Reference
+
+| Purpose | Path |
+|---------|------|
+| Server entry | `src/index.tsx` |
+| Client entry | `src/client.ts` |
+| App factory | `src/main.ts` |
+| Router config | `src/routes/index.ts` |
+| API client | `src/api/client.ts` |
+| Auth store | `src/stores/auth.ts` |
+| SSR plugin | `ssrPlugin.ts` |
+| UnoCSS config | `uno.config.ts` |
+| Wrangler config | `wrangler.jsonc` |
+| Vite config | `vite.config.ts` |
+
+---
+
+*This document was generated for AI coding agents. For human contributors, see README.md.*
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..acd2e0d
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,83 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project overview
+
+`stream-ui` is a Vue 3 SSR frontend deployed on Cloudflare Workers. It uses Hono as the Worker server layer and a custom Vite SSR setup rather than Nuxt.
+
+## Common commands
+
+Run all commands from `stream-ui/`.
+
+```bash
+# Install dependencies
+bun install
+
+# Start local dev server
+bun run dev
+
+# Build client + worker bundles
+bun run build
+
+# Preview production build locally
+bun run preview
+
+# Deploy to Cloudflare Workers
+bun run deploy
+
+# Regenerate Cloudflare binding types from Wrangler config
+bun run cf-typegen
+
+# Tail Cloudflare Worker logs
+bun run tail
+```
+
+Notes:
+- This project uses Bun (`bun.lock` is present).
+- There is currently no configured `test` script.
+- There is currently no configured `lint` script.
+
+## Architecture
+
+### SSR entrypoints
+- `src/index.tsx`: Hono Worker entry; registers middleware, proxy routes, merge/display/manifest routes, then SSR routes
+- `src/main.ts`: shared app factory for SSR and client hydration
+- `src/client.ts`: client-side hydration entry
+- `ssrPlugin.ts`: custom Vite SSR plugin that builds the client first, injects the Vite manifest, and swaps environment-specific modules
+
+### Routing and app structure
+- Routes live in `src/routes/index.ts`.
+- Routing is SSR-aware: `createMemoryHistory()` on the server and `createWebHistory()` in the browser.
+- The app is split into:
+  - public pages
+  - auth pages
+  - protected dashboard/settings pages
+- Current protected areas include `videos`, `notification`, and `settings/*` routes.
+
+### State and hydration
+- Pinia is used for app state.
+- `@pinia/colada` is used for server-state/query hydration.
+- SSR serializes Pinia state into `$p` and query cache into `$colada`; `src/client.ts` restores both during hydration.
+- `src/stores/auth.ts` owns session state and route guards depend on `auth.user`.
+
+### API integration
+- `src/api/client.ts` is generated by `swagger-typescript-api`; do not hand-edit generated sections.
+- API access should go through the generated client and `@httpClientAdapter`, not raw `fetch`.
+- `src/api/httpClientAdapter.server.ts` handles SSR-side API calls by forwarding request headers/cookies and proxying frontend `/r/*` requests to `https://api.pipic.fun`.
+- `src/api/httpClientAdapter.client.ts` is the browser-side adapter.
+
+### Notable flows
+- `src/stores/auth.ts` initializes the logged-in user from `/me` and opens an MQTT connection after login.
+- `src/composables/useUploadQueue.ts` implements the custom upload queue:
+  - 90MB chunks
+  - max 3 parallel uploads
+  - max 3 retries
+  - max 5 queued items
+- Styling uses UnoCSS (`uno.config.ts`).
+
+## Important notes
+
+- Prefer the actual current code over older documentation when they conflict.
+- The previous version of this file contained stale route and dependency details; verify against `src/routes/index.ts` and `package.json` before assuming old pages or libraries still exist.
+- Any frontend change that affects API contracts should be checked against the backend repo (`../stream.api`) as well.
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..71ceaa0
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,39 @@
+# ---------- Builder stage ----------
+FROM oven/bun:1.3.10-alpine AS builder
+
+WORKDIR /app
+
+# Copy lockfiles & package.json
+COPY package*.json ./
+COPY bun.lockb* ./
+COPY yarn.lock* ./
+COPY pnpm-lock.yaml* ./
+
+# Install dependencies (cached)
+RUN --mount=type=cache,target=/root/.bun bun install
+
+# Copy source
+COPY . .
+
+# Build app (RSBuild output -> dist)
+RUN bun run build
+
+
+# ---------- Production stage ----------
+FROM oven/bun:1.3.10-alpine AS production
+
+WORKDIR /app
+
+# Copy built files
+COPY --from=builder /app/dist ./dist
+
+ENV NODE_ENV=production
+# Expose port
+EXPOSE 3000
+
+# Optional health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget -qO- http://localhost:3000/ || exit 1
+
+# Run Bun with fallback install (auto resolves missing deps)
+CMD [ "bun", "--bun", "dist" ]
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index b629b68..377cc20 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,140 +5,56 @@
     "": {
       "name": "holistream",
       "dependencies": {
-        "@aws-sdk/client-s3": "^3.946.0",
-        "@aws-sdk/s3-presigned-post": "^3.946.0",
-        "@aws-sdk/s3-request-presigner": "^3.946.0",
+        "@bufbuild/protobuf": "^2.11.0",
+        "@grpc/grpc-js": "^1.14.3",
+        "@hattip/adapter-node": "^0.0.49",
         "@hiogawa/tiny-rpc": "^0.2.3-pre.18",
         "@hiogawa/utils": "^1.7.0",
-        "@primeuix/themes": "^2.0.2",
-        "@primevue/forms": "^4.5.4",
-        "@unhead/vue": "^2.1.1",
-        "@vueuse/core": "^14.1.0",
+        "@hono/node-server": "^1.19.12",
+        "@hono/zod-validator": "^0.7.6",
+        "@pinia/colada": "^1.1.0",
+        "@tanstack/vue-table": "^8.21.3",
+        "@unhead/vue": "^2.1.12",
+        "@vueuse/core": "^14.2.1",
+        "aws4fetch": "^1.0.20",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "firebase": "^12.8.0",
-        "firebase-admin": "^13.6.0",
-        "hono": "^4.11.3",
+        "hono": "^4.12.9",
+        "i18next": "^26.0.3",
+        "i18next-http-backend": "^3.0.4",
+        "i18next-vue": "^5.4.0",
         "is-mobile": "^5.0.0",
         "pinia": "^3.0.4",
-        "primevue": "^4.5.4",
-        "tailwind-merge": "^3.4.0",
-        "vue": "^3.5.26",
-        "vue-router": "^4.6.4",
-        "zod": "^4.3.2",
+        "superjson": "^2.2.6",
+        "tailwind-merge": "^3.5.0",
+        "tweetnacl": "^1.0.3",
+        "vue": "^3.5.31",
+        "vue-router": "^5.0.4",
+        "zod": "^4.3.6",
       },
       "devDependencies": {
-        "@cloudflare/vite-plugin": "^1.17.1",
-        "@primevue/auto-import-resolver": "^4.5.4",
-        "@types/node": "^25.0.3",
-        "@vitejs/plugin-vue": "^6.0.3",
-        "@vitejs/plugin-vue-jsx": "^5.1.3",
-        "unocss": "^66.5.12",
-        "unplugin-auto-import": "^20.3.0",
-        "unplugin-vue-components": "^30.0.0",
-        "vite": "^7.3.0",
+        "@types/bun": "^1.3.11",
+        "@vitejs/plugin-vue": "^6.0.5",
+        "@vitejs/plugin-vue-jsx": "^5.1.5",
+        "estree-walker": "3.0.3",
+        "unocss": "^66.6.7",
+        "unplugin-auto-import": "^21.0.0",
+        "unplugin-vue-components": "^32.0.0",
+        "vite": "^8.0.3",
         "vite-ssr-components": "^0.5.2",
-        "wrangler": "^4.54.0",
       },
     },
   },
   "packages": {
     "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="],
 
-    "@aws-crypto/crc32": ["@aws-crypto/crc32@5.2.0", "", { "dependencies": { "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "tslib": "^2.6.2" } }, "sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg=="],
+    "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
 
-    "@aws-crypto/crc32c": ["@aws-crypto/crc32c@5.2.0", "", { "dependencies": { "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "tslib": "^2.6.2" } }, "sha512-+iWb8qaHLYKrNvGRbiYRHSdKRWhto5XlZUEBwDjYNf+ly5SVYG6zEoYIdxvf5R3zyeP16w4PLBn3rH1xc74Rag=="],
+    "@babel/compat-data": ["@babel/compat-data@7.29.0", "", {}, "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg=="],
 
-    "@aws-crypto/sha1-browser": ["@aws-crypto/sha1-browser@5.2.0", "", { "dependencies": { "@aws-crypto/supports-web-crypto": "^5.2.0", "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "@aws-sdk/util-locate-window": "^3.0.0", "@smithy/util-utf8": "^2.0.0", "tslib": "^2.6.2" } }, "sha512-OH6lveCFfcDjX4dbAvCFSYUjJZjDr/3XJ3xHtjn3Oj5b9RjojQo8npoLeA/bNwkOkrSQ0wgrHzXk4tDRxGKJeg=="],
+    "@babel/core": ["@babel/core@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA=="],
 
-    "@aws-crypto/sha256-browser": ["@aws-crypto/sha256-browser@5.2.0", "", { "dependencies": { "@aws-crypto/sha256-js": "^5.2.0", "@aws-crypto/supports-web-crypto": "^5.2.0", "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "@aws-sdk/util-locate-window": "^3.0.0", "@smithy/util-utf8": "^2.0.0", "tslib": "^2.6.2" } }, "sha512-AXfN/lGotSQwu6HNcEsIASo7kWXZ5HYWvfOmSNKDsEqC4OashTp8alTmaz+F7TC2L083SFv5RdB+qU3Vs1kZqw=="],
-
-    "@aws-crypto/sha256-js": ["@aws-crypto/sha256-js@5.2.0", "", { "dependencies": { "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "tslib": "^2.6.2" } }, "sha512-FFQQyu7edu4ufvIZ+OadFpHHOt+eSTBaYaki44c+akjg7qZg9oOQeLlk77F6tSYqjDAFClrHJk9tMf0HdVyOvA=="],
-
-    "@aws-crypto/supports-web-crypto": ["@aws-crypto/supports-web-crypto@5.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-iAvUotm021kM33eCdNfwIN//F77/IADDSs58i+MDaOqFrVjZo9bAal0NK7HurRuWLLpF1iLX7gbWrjHjeo+YFg=="],
-
-    "@aws-crypto/util": ["@aws-crypto/util@5.2.0", "", { "dependencies": { "@aws-sdk/types": "^3.222.0", "@smithy/util-utf8": "^2.0.0", "tslib": "^2.6.2" } }, "sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ=="],
-
-    "@aws-sdk/client-s3": ["@aws-sdk/client-s3@3.969.0", "", { "dependencies": { "@aws-crypto/sha1-browser": "5.2.0", "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.969.0", "@aws-sdk/credential-provider-node": "3.969.0", "@aws-sdk/middleware-bucket-endpoint": "3.969.0", "@aws-sdk/middleware-expect-continue": "3.969.0", "@aws-sdk/middleware-flexible-checksums": "3.969.0", "@aws-sdk/middleware-host-header": "3.969.0", "@aws-sdk/middleware-location-constraint": "3.969.0", "@aws-sdk/middleware-logger": "3.969.0", "@aws-sdk/middleware-recursion-detection": "3.969.0", "@aws-sdk/middleware-sdk-s3": "3.969.0", "@aws-sdk/middleware-ssec": "3.969.0", "@aws-sdk/middleware-user-agent": "3.969.0", "@aws-sdk/region-config-resolver": "3.969.0", "@aws-sdk/signature-v4-multi-region": "3.969.0", "@aws-sdk/types": "3.969.0", "@aws-sdk/util-endpoints": "3.969.0", "@aws-sdk/util-user-agent-browser": "3.969.0", "@aws-sdk/util-user-agent-node": "3.969.0", "@smithy/config-resolver": "^4.4.6", "@smithy/core": "^3.20.5", "@smithy/eventstream-serde-browser": "^4.2.8", "@smithy/eventstream-serde-config-resolver": "^4.3.8", "@smithy/eventstream-serde-node": "^4.2.8", "@smithy/fetch-http-handler": "^5.3.9", "@smithy/hash-blob-browser": "^4.2.9", "@smithy/hash-node": "^4.2.8", "@smithy/hash-stream-node": "^4.2.8", "@smithy/invalid-dependency": "^4.2.8", "@smithy/md5-js": "^4.2.8", "@smithy/middleware-content-length": "^4.2.8", "@smithy/middleware-endpoint": "^4.4.6", "@smithy/middleware-retry": "^4.4.22", "@smithy/middleware-serde": "^4.2.9", "@smithy/middleware-stack": "^4.2.8", "@smithy/node-config-provider": "^4.3.8", "@smithy/node-http-handler": "^4.4.8", "@smithy/protocol-http": "^5.3.8", "@smithy/smithy-client": "^4.10.7", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.21", "@smithy/util-defaults-mode-node": "^4.2.24", "@smithy/util-endpoints": "^3.2.8", "@smithy/util-middleware": "^4.2.8", "@smithy/util-retry": "^4.2.8", "@smithy/util-stream": "^4.5.10", "@smithy/util-utf8": "^4.2.0", "@smithy/util-waiter": "^4.2.8", "tslib": "^2.6.2" } }, "sha512-dd19qt9wCY60AS0gc7K+C26U1SdtJddn8DkwHu3psCuGaZ8r9EAKbHTNC53iLsYD5OVGsZ5bkHKQ/BjjbSyVTQ=="],
-
-    "@aws-sdk/client-sso": ["@aws-sdk/client-sso@3.969.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.969.0", "@aws-sdk/middleware-host-header": "3.969.0", "@aws-sdk/middleware-logger": "3.969.0", "@aws-sdk/middleware-recursion-detection": "3.969.0", "@aws-sdk/middleware-user-agent": "3.969.0", "@aws-sdk/region-config-resolver": "3.969.0", "@aws-sdk/types": "3.969.0", "@aws-sdk/util-endpoints": "3.969.0", "@aws-sdk/util-user-agent-browser": "3.969.0", "@aws-sdk/util-user-agent-node": "3.969.0", "@smithy/config-resolver": "^4.4.6", "@smithy/core": "^3.20.5", "@smithy/fetch-http-handler": "^5.3.9", "@smithy/hash-node": "^4.2.8", "@smithy/invalid-dependency": "^4.2.8", "@smithy/middleware-content-length": "^4.2.8", "@smithy/middleware-endpoint": "^4.4.6", "@smithy/middleware-retry": "^4.4.22", "@smithy/middleware-serde": "^4.2.9", "@smithy/middleware-stack": "^4.2.8", "@smithy/node-config-provider": "^4.3.8", "@smithy/node-http-handler": "^4.4.8", "@smithy/protocol-http": "^5.3.8", "@smithy/smithy-client": "^4.10.7", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.21", "@smithy/util-defaults-mode-node": "^4.2.24", "@smithy/util-endpoints": "^3.2.8", "@smithy/util-middleware": "^4.2.8", "@smithy/util-retry": "^4.2.8", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-Qn0Uz6o15q2S+1E6OpwRKmaAMoT4LktEn+Oibk28qb2Mne+emaDawhZXahOJb/wFw5lN2FEH7XoiSNenNNUmCw=="],
-
-    "@aws-sdk/core": ["@aws-sdk/core@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@aws-sdk/xml-builder": "3.969.0", "@smithy/core": "^3.20.5", "@smithy/node-config-provider": "^4.3.8", "@smithy/property-provider": "^4.2.8", "@smithy/protocol-http": "^5.3.8", "@smithy/signature-v4": "^5.3.8", "@smithy/smithy-client": "^4.10.7", "@smithy/types": "^4.12.0", "@smithy/util-base64": "^4.3.0", "@smithy/util-middleware": "^4.2.8", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-qqmQt4z5rEK1OYVkVkboWgy/58CC5QaQ7oy0tvLe3iri/mfZbgJkA+pkwQyRP827DfCBZ3W7Ki9iwSa+B2U7uQ=="],
-
-    "@aws-sdk/crc64-nvme": ["@aws-sdk/crc64-nvme@3.969.0", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-IGNkP54HD3uuLnrPCYsv3ZD478UYq+9WwKrIVJ9Pdi3hxPg8562CH3ZHf8hEgfePN31P9Kj+Zu9kq2Qcjjt61A=="],
-
-    "@aws-sdk/credential-provider-env": ["@aws-sdk/credential-provider-env@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/property-provider": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-yS96heH5XDUqS3qQNcdObKKMOqZaivuNInMVRpRli48aXW8fX1M3fY67K/Onlqa3Wxu6WfDc3ZGF52SywdLvbg=="],
-
-    "@aws-sdk/credential-provider-http": ["@aws-sdk/credential-provider-http@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/fetch-http-handler": "^5.3.9", "@smithy/node-http-handler": "^4.4.8", "@smithy/property-provider": "^4.2.8", "@smithy/protocol-http": "^5.3.8", "@smithy/smithy-client": "^4.10.7", "@smithy/types": "^4.12.0", "@smithy/util-stream": "^4.5.10", "tslib": "^2.6.2" } }, "sha512-QCEFxBiUYFUW5VG6k8jKhT4luZndpC7uUY4u1olwt+OnJrl3N2yC7oS34isVBa3ioXZ4A0YagbXTa/3mXUhlAA=="],
-
-    "@aws-sdk/credential-provider-ini": ["@aws-sdk/credential-provider-ini@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/credential-provider-env": "3.969.0", "@aws-sdk/credential-provider-http": "3.969.0", "@aws-sdk/credential-provider-login": "3.969.0", "@aws-sdk/credential-provider-process": "3.969.0", "@aws-sdk/credential-provider-sso": "3.969.0", "@aws-sdk/credential-provider-web-identity": "3.969.0", "@aws-sdk/nested-clients": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/credential-provider-imds": "^4.2.8", "@smithy/property-provider": "^4.2.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-lsXyTDkUrZPxjr0XruZrqdcHY9zHcIuoY3TOCQEm23VTc8Np2BenTtjGAIexkL3ar69K4u3FVLQroLpmFxeXqA=="],
-
-    "@aws-sdk/credential-provider-login": ["@aws-sdk/credential-provider-login@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/nested-clients": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/property-provider": "^4.2.8", "@smithy/protocol-http": "^5.3.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-bIRFDf54qIUFFLTZNYt40d6EseNeK9w80dHEs7BVEAWoS23c9+MSqkdg/LJBBK9Kgy01vRmjiedfBZN+jGypLw=="],
-
-    "@aws-sdk/credential-provider-node": ["@aws-sdk/credential-provider-node@3.969.0", "", { "dependencies": { "@aws-sdk/credential-provider-env": "3.969.0", "@aws-sdk/credential-provider-http": "3.969.0", "@aws-sdk/credential-provider-ini": "3.969.0", "@aws-sdk/credential-provider-process": "3.969.0", "@aws-sdk/credential-provider-sso": "3.969.0", "@aws-sdk/credential-provider-web-identity": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/credential-provider-imds": "^4.2.8", "@smithy/property-provider": "^4.2.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-lImMjcy/5SGDIBk7PFJCqFO4rFuapKCvo1z2PidD3Cbz2D7wsJnyqUNQIp5Ix0Xc3/uAYG9zXI9kgaMf1dspIQ=="],
-
-    "@aws-sdk/credential-provider-process": ["@aws-sdk/credential-provider-process@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/property-provider": "^4.2.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-2qQkM0rwd8Hl9nIHtUaqT8Z/djrulovqx/wBHsbRKaISwc2fiT3De1Lk1jx34Jzrz/dTHAMJJi+cML1N4Lk3kw=="],
-
-    "@aws-sdk/credential-provider-sso": ["@aws-sdk/credential-provider-sso@3.969.0", "", { "dependencies": { "@aws-sdk/client-sso": "3.969.0", "@aws-sdk/core": "3.969.0", "@aws-sdk/token-providers": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/property-provider": "^4.2.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-JHqXw9Ct3dtZB86/zGFJYWyodr961GyIrqTBhV0brrZFPvcinM9abDSK58jt6GNBM2lqfMCvXL6I4ahNsMdkrg=="],
-
-    "@aws-sdk/credential-provider-web-identity": ["@aws-sdk/credential-provider-web-identity@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/nested-clients": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/property-provider": "^4.2.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-mKCZtqrs3ts3YmIjT4NFlYgT2Oe6syW0nX5m2l7iyrFrLXw26Zo3rx29DjGzycPdJHZZvsIy5y6yqChDuF65ng=="],
-
-    "@aws-sdk/middleware-bucket-endpoint": ["@aws-sdk/middleware-bucket-endpoint@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@aws-sdk/util-arn-parser": "3.968.0", "@smithy/node-config-provider": "^4.3.8", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "@smithy/util-config-provider": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-MlbrlixtkTVhYhoasblKOkr7n2yydvUZjjxTnBhIuHmkyBS1619oGnTfq/uLeGYb4NYXdeQ5OYcqsRGvmWSuTw=="],
-
-    "@aws-sdk/middleware-expect-continue": ["@aws-sdk/middleware-expect-continue@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-qXygzSi8osok7tH9oeuS3HoKw6jRfbvg5Me/X5RlHOvSSqQz8c5O9f3MjUApaCUSwbAU92KrbZWasw2PKiaVHg=="],
-
-    "@aws-sdk/middleware-flexible-checksums": ["@aws-sdk/middleware-flexible-checksums@3.969.0", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@aws-crypto/crc32c": "5.2.0", "@aws-crypto/util": "5.2.0", "@aws-sdk/core": "3.969.0", "@aws-sdk/crc64-nvme": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/is-array-buffer": "^4.2.0", "@smithy/node-config-provider": "^4.3.8", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "@smithy/util-middleware": "^4.2.8", "@smithy/util-stream": "^4.5.10", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-RKpo76qcHhQkSgu+wJNvwio8MzMD7ScwBaMCQhJfqzFTrhhlKtMkf8oxhBRRYU7rat368p35h6CbfxM18g/WNQ=="],
-
-    "@aws-sdk/middleware-host-header": ["@aws-sdk/middleware-host-header@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-AWa4rVsAfBR4xqm7pybQ8sUNJYnjyP/bJjfAw34qPuh3M9XrfGbAHG0aiAfQGrBnmS28jlO6Kz69o+c6PRw1dw=="],
-
-    "@aws-sdk/middleware-location-constraint": ["@aws-sdk/middleware-location-constraint@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-zH7pDfMLG/C4GWMOpvJEoYcSpj7XsNP9+irlgqwi667sUQ6doHQJ3yyDut3yiTk0maq1VgmriPFELyI9lrvH/g=="],
-
-    "@aws-sdk/middleware-logger": ["@aws-sdk/middleware-logger@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-xwrxfip7Y2iTtCMJ+iifN1E1XMOuhxIHY9DreMCvgdl4r7+48x2S1bCYPWH3eNY85/7CapBWdJ8cerpEl12sQQ=="],
-
-    "@aws-sdk/middleware-recursion-detection": ["@aws-sdk/middleware-recursion-detection@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@aws/lambda-invoke-store": "^0.2.2", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-2r3PuNquU3CcS1Am4vn/KHFwLi8QFjMdA/R+CRDXT4AFO/0qxevF/YStW3gAKntQIgWgQV8ZdEtKAoJvLI4UWg=="],
-
-    "@aws-sdk/middleware-sdk-s3": ["@aws-sdk/middleware-sdk-s3@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/types": "3.969.0", "@aws-sdk/util-arn-parser": "3.968.0", "@smithy/core": "^3.20.5", "@smithy/node-config-provider": "^4.3.8", "@smithy/protocol-http": "^5.3.8", "@smithy/signature-v4": "^5.3.8", "@smithy/smithy-client": "^4.10.7", "@smithy/types": "^4.12.0", "@smithy/util-config-provider": "^4.2.0", "@smithy/util-middleware": "^4.2.8", "@smithy/util-stream": "^4.5.10", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-xjcyZrbtvVaqkmjkhmqX+16Wf7zFVS/cYnNFu/JyG6ekkIxSXEAjptNwSEDzlAiLzf0Hf6dYj5erLZYGa40eWg=="],
-
-    "@aws-sdk/middleware-ssec": ["@aws-sdk/middleware-ssec@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-9wUYtd5ye4exygKHyl02lPVHUoAFlxxXoqvlw7u2sycfkK6uHLlwdsPru3MkMwj47ZSZs+lkyP/sVKXVMhuaAg=="],
-
-    "@aws-sdk/middleware-user-agent": ["@aws-sdk/middleware-user-agent@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/types": "3.969.0", "@aws-sdk/util-endpoints": "3.969.0", "@smithy/core": "^3.20.5", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-Y6WkW8QQ2X9jG9HNBWyzp5KlJOCtLqX8VIvGLoGc2wXdZH7dgOy62uFhkfnHbgfiel6fkNYaycjGx/yyxi0JLQ=="],
-
-    "@aws-sdk/nested-clients": ["@aws-sdk/nested-clients@3.969.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.969.0", "@aws-sdk/middleware-host-header": "3.969.0", "@aws-sdk/middleware-logger": "3.969.0", "@aws-sdk/middleware-recursion-detection": "3.969.0", "@aws-sdk/middleware-user-agent": "3.969.0", "@aws-sdk/region-config-resolver": "3.969.0", "@aws-sdk/types": "3.969.0", "@aws-sdk/util-endpoints": "3.969.0", "@aws-sdk/util-user-agent-browser": "3.969.0", "@aws-sdk/util-user-agent-node": "3.969.0", "@smithy/config-resolver": "^4.4.6", "@smithy/core": "^3.20.5", "@smithy/fetch-http-handler": "^5.3.9", "@smithy/hash-node": "^4.2.8", "@smithy/invalid-dependency": "^4.2.8", "@smithy/middleware-content-length": "^4.2.8", "@smithy/middleware-endpoint": "^4.4.6", "@smithy/middleware-retry": "^4.4.22", "@smithy/middleware-serde": "^4.2.9", "@smithy/middleware-stack": "^4.2.8", "@smithy/node-config-provider": "^4.3.8", "@smithy/node-http-handler": "^4.4.8", "@smithy/protocol-http": "^5.3.8", "@smithy/smithy-client": "^4.10.7", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.21", "@smithy/util-defaults-mode-node": "^4.2.24", "@smithy/util-endpoints": "^3.2.8", "@smithy/util-middleware": "^4.2.8", "@smithy/util-retry": "^4.2.8", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-MJrejgODxVYZjQjSpPLJkVuxnbrue1x1R8+as3anT5V/wk9Qc/Pf5B1IFjM3Ak6uOtzuRYNY4auOvcg4U8twDA=="],
-
-    "@aws-sdk/region-config-resolver": ["@aws-sdk/region-config-resolver@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/config-resolver": "^4.4.6", "@smithy/node-config-provider": "^4.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-scj9OXqKpcjJ4jsFLtqYWz3IaNvNOQTFFvEY8XMJXTv+3qF5I7/x9SJtKzTRJEBF3spjzBUYPtGFbs9sj4fisQ=="],
-
-    "@aws-sdk/s3-presigned-post": ["@aws-sdk/s3-presigned-post@3.969.0", "", { "dependencies": { "@aws-sdk/client-s3": "3.969.0", "@aws-sdk/types": "3.969.0", "@aws-sdk/util-format-url": "3.969.0", "@smithy/middleware-endpoint": "^4.4.6", "@smithy/signature-v4": "^5.3.8", "@smithy/types": "^4.12.0", "@smithy/util-hex-encoding": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-ie0mJHzo9sgPg5oXLvZw5np9JdaujVVfNaVeUMPtDTR9JldvigSpOYdXETWoPfnqPmWgaMYSoquol9aY1fgwsA=="],
-
-    "@aws-sdk/s3-request-presigner": ["@aws-sdk/s3-request-presigner@3.969.0", "", { "dependencies": { "@aws-sdk/signature-v4-multi-region": "3.969.0", "@aws-sdk/types": "3.969.0", "@aws-sdk/util-format-url": "3.969.0", "@smithy/middleware-endpoint": "^4.4.6", "@smithy/protocol-http": "^5.3.8", "@smithy/smithy-client": "^4.10.7", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-U/yFKf6vK2feTNmcZQcvfLPRWNaHBFZPaSVdOpAgH9voyIVAW8u9jAneV4s/fgfgLr8ytXUbheEIhruLPzGyTw=="],
-
-    "@aws-sdk/signature-v4-multi-region": ["@aws-sdk/signature-v4-multi-region@3.969.0", "", { "dependencies": { "@aws-sdk/middleware-sdk-s3": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/protocol-http": "^5.3.8", "@smithy/signature-v4": "^5.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-pv8BEQOlUzK+ww8ZfXZOnDzLfPO5+O7puBFtU1fE8CdCAQ/RP/B1XY3hxzW9Xs0dax7graYKnY8wd8ooYy7vBw=="],
-
-    "@aws-sdk/token-providers": ["@aws-sdk/token-providers@3.969.0", "", { "dependencies": { "@aws-sdk/core": "3.969.0", "@aws-sdk/nested-clients": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/property-provider": "^4.2.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-ucs6QczPkvGinbGmhMlPCQnagGJ+xsM6itsSWlJzxo9YsP6jR75cBU8pRdaM7nEbtCDnrUHf8W9g3D2Hd9mgVA=="],
-
-    "@aws-sdk/types": ["@aws-sdk/types@3.969.0", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-7IIzM5TdiXn+VtgPdVLjmE6uUBUtnga0f4RiSEI1WW10RPuNvZ9U+pL3SwDiRDAdoGrOF9tSLJOFZmfuwYuVYQ=="],
-
-    "@aws-sdk/util-arn-parser": ["@aws-sdk/util-arn-parser@3.968.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-gqqvYcitIIM2K4lrDX9de9YvOfXBcVdxfT/iLnvHJd4YHvSXlt+gs+AsL4FfPCxG4IG9A+FyulP9Sb1MEA75vw=="],
-
-    "@aws-sdk/util-endpoints": ["@aws-sdk/util-endpoints@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "@smithy/util-endpoints": "^3.2.8", "tslib": "^2.6.2" } }, "sha512-H2x2UwYiA1pHg40jE+OCSc668W9GXRShTiCWy1UPKtZKREbQ63Mgd7NAj+bEMsZUSCdHywqmSsLqKM9IcqQ3Bg=="],
-
-    "@aws-sdk/util-format-url": ["@aws-sdk/util-format-url@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/querystring-builder": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-C7ZiE8orcrEF9In+XDlIKrZhMjp0HCPUH6u74pgadE3T2LRre5TmOQcTt785/wVS2G0we9cxkjlzMrfDsfPvFw=="],
-
-    "@aws-sdk/util-locate-window": ["@aws-sdk/util-locate-window@3.965.2", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-qKgO7wAYsXzhwCHhdbaKFyxd83Fgs8/1Ka+jjSPrv2Ll7mB55Wbwlo0kkfMLh993/yEc8aoDIAc1Fz9h4Spi4Q=="],
-
-    "@aws-sdk/util-user-agent-browser": ["@aws-sdk/util-user-agent-browser@3.969.0", "", { "dependencies": { "@aws-sdk/types": "3.969.0", "@smithy/types": "^4.12.0", "bowser": "^2.11.0", "tslib": "^2.6.2" } }, "sha512-bpJGjuKmFr0rA6UKUCmN8D19HQFMLXMx5hKBXqBlPFdalMhxJSjcxzX9DbQh0Fn6bJtxCguFmRGOBdQqNOt49g=="],
-
-    "@aws-sdk/util-user-agent-node": ["@aws-sdk/util-user-agent-node@3.969.0", "", { "dependencies": { "@aws-sdk/middleware-user-agent": "3.969.0", "@aws-sdk/types": "3.969.0", "@smithy/node-config-provider": "^4.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" }, "peerDependencies": { "aws-crt": ">=1.0.0" }, "optionalPeers": ["aws-crt"] }, "sha512-D11ZuXNXdUMv8XTthMx+LPzkYNQAeQ68FnCTGnFLgLpnR8hVTeZMBBKjQ77wYGzWDk/csHKdCy697gU1On5KjA=="],
-
-    "@aws-sdk/xml-builder": ["@aws-sdk/xml-builder@3.969.0", "", { "dependencies": { "@smithy/types": "^4.12.0", "fast-xml-parser": "5.2.5", "tslib": "^2.6.2" } }, "sha512-BSe4Lx/qdRQQdX8cSSI7Et20vqBspzAjBy8ZmXVoyLkol3y4sXBXzn+BiLtR+oh60ExQn6o2DU4QjdOZbXaKIQ=="],
-
-    "@aws/lambda-invoke-store": ["@aws/lambda-invoke-store@0.2.3", "", {}, "sha512-oLvsaPMTBejkkmHhjf09xTgk71mOqyr/409NKhRIL08If7AhVfUsJhVsx386uJaqNd42v9kWamQ9lFbkoC2dYw=="],
-
-    "@babel/code-frame": ["@babel/code-frame@7.28.6", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q=="],
-
-    "@babel/compat-data": ["@babel/compat-data@7.28.6", "", {}, "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg=="],
-
-    "@babel/core": ["@babel/core@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw=="],
-
-    "@babel/generator": ["@babel/generator@7.28.6", "", { "dependencies": { "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw=="],
+    "@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
 
     "@babel/helper-annotate-as-pure": ["@babel/helper-annotate-as-pure@7.27.3", "", { "dependencies": { "@babel/types": "^7.27.3" } }, "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg=="],
 
@@ -168,9 +84,9 @@
 
     "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
 
-    "@babel/helpers": ["@babel/helpers@7.28.6", "", { "dependencies": { "@babel/template": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw=="],
+    "@babel/helpers": ["@babel/helpers@7.29.2", "", { "dependencies": { "@babel/template": "^7.28.6", "@babel/types": "^7.29.0" } }, "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw=="],
 
-    "@babel/parser": ["@babel/parser@7.28.6", "", { "dependencies": { "@babel/types": "^7.28.6" }, "bin": "./bin/babel-parser.js" }, "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ=="],
+    "@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
 
     "@babel/plugin-syntax-jsx": ["@babel/plugin-syntax-jsx@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w=="],
 
@@ -178,246 +94,48 @@
 
     "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.28.6", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-create-class-features-plugin": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1", "@babel/plugin-syntax-typescript": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw=="],
 
+    "@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
     "@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
 
-    "@babel/traverse": ["@babel/traverse@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/types": "^7.28.6", "debug": "^4.3.1" } }, "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg=="],
+    "@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
 
-    "@babel/types": ["@babel/types@7.28.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg=="],
+    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
 
-    "@cloudflare/kv-asset-handler": ["@cloudflare/kv-asset-handler@0.4.2", "", {}, "sha512-SIOD2DxrRRwQ+jgzlXCqoEFiKOFqaPjhnNTGKXSRLvp1HiOvapLaFG2kEr9dYQTYe8rKrd9uvDUzmAITeNyaHQ=="],
+    "@bufbuild/protobuf": ["@bufbuild/protobuf@2.11.0", "", {}, "sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ=="],
 
-    "@cloudflare/unenv-preset": ["@cloudflare/unenv-preset@2.10.0", "", { "peerDependencies": { "unenv": "2.0.0-rc.24", "workerd": "^1.20251221.0" }, "optionalPeers": ["workerd"] }, "sha512-/uII4vLQXhzCAZzEVeYAjFLBNg2nqTJ1JGzd2lRF6ItYe6U2zVoYGfeKpGx/EkBF6euiU+cyBXgMdtJih+nQ6g=="],
+    "@emnapi/core": ["@emnapi/core@1.9.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.0", "tslib": "^2.4.0" } }, "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA=="],
 
-    "@cloudflare/vite-plugin": ["@cloudflare/vite-plugin@1.21.0", "", { "dependencies": { "@cloudflare/unenv-preset": "2.10.0", "miniflare": "4.20260114.0", "unenv": "2.0.0-rc.24", "wrangler": "4.59.2", "ws": "8.18.0" }, "peerDependencies": { "vite": "^6.1.0 || ^7.0.0" } }, "sha512-3VXtkfjOQL+k3Plj+t0BHRyw8iIIRBQ8RJU6KJHJQKdYHA6rJE/WlSa/lRd0A8MMhvP8e8QiMLuDqveEN8gCZg=="],
+    "@emnapi/runtime": ["@emnapi/runtime@1.9.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA=="],
 
-    "@cloudflare/workerd-darwin-64": ["@cloudflare/workerd-darwin-64@1.20260114.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-HNlsRkfNgardCig2P/5bp/dqDECsZ4+NU5XewqArWxMseqt3C5daSuptI620s4pn7Wr0ZKg7jVLH0PDEBkA+aA=="],
+    "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg=="],
 
-    "@cloudflare/workerd-darwin-arm64": ["@cloudflare/workerd-darwin-arm64@1.20260114.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-qyE1UdFnAlxzb+uCfN/d9c8icch7XRiH49/DjoqEa+bCDihTuRS7GL1RmhVIqHJhb3pX3DzxmKgQZBDBL83Inw=="],
+    "@grpc/grpc-js": ["@grpc/grpc-js@1.14.3", "", { "dependencies": { "@grpc/proto-loader": "^0.8.0", "@js-sdsl/ordered-map": "^4.4.2" } }, "sha512-Iq8QQQ/7X3Sac15oB6p0FmUg/klxQvXLeileoqrTRGJYLV+/9tubbr9ipz0GKHjmXVsgFPo/+W+2cA8eNcR+XA=="],
 
-    "@cloudflare/workerd-linux-64": ["@cloudflare/workerd-linux-64@1.20260114.0", "", { "os": "linux", "cpu": "x64" }, "sha512-Z0BLvAj/JPOabzads2ddDEfgExWTlD22pnwsuNbPwZAGTSZeQa3Y47eGUWyHk+rSGngknk++S7zHTGbKuG7RRg=="],
+    "@grpc/proto-loader": ["@grpc/proto-loader@0.8.0", "", { "dependencies": { "lodash.camelcase": "^4.3.0", "long": "^5.0.0", "protobufjs": "^7.5.3", "yargs": "^17.7.2" }, "bin": { "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js" } }, "sha512-rc1hOQtjIWGxcxpb9aHAfLpIctjEnsDehj0DAiVfBlmT84uvR0uUtN2hEi/ecvWVjXUGf5qPF4qEgiLOx1YIMQ=="],
 
-    "@cloudflare/workerd-linux-arm64": ["@cloudflare/workerd-linux-arm64@1.20260114.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-kPUmEtUxUWlr9PQ64kuhdK0qyo8idPe5IIXUgi7xCD7mDd6EOe5J7ugDpbfvfbYKEjx4DpLvN2t45izyI/Sodw=="],
+    "@hattip/adapter-node": ["@hattip/adapter-node@0.0.49", "", { "dependencies": { "@hattip/core": "0.0.49", "@hattip/polyfills": "0.0.49", "@hattip/walk": "0.0.49" } }, "sha512-BE+Y8Q4U0YcH34FZUYU4DssGKOaZLbNL0zK57Z41UZp0m9kS79ZIolBmjjpPhTVpIlRY3Rs+uhXbVXKk7mUcJA=="],
 
-    "@cloudflare/workerd-windows-64": ["@cloudflare/workerd-windows-64@1.20260114.0", "", { "os": "win32", "cpu": "x64" }, "sha512-MJnKgm6i1jZGyt2ZHQYCnRlpFTEZcK2rv9y7asS3KdVEXaDgGF8kOns5u6YL6/+eMogfZuHRjfDS+UqRTUYIFA=="],
+    "@hattip/core": ["@hattip/core@0.0.49", "", {}, "sha512-3/ZJtC17cv8m6Sph8+nw4exUp9yhEf2Shi7HK6AHSUSBtaaQXZ9rJBVxTfZj3PGNOR/P49UBXOym/52WYKFTJQ=="],
 
-    "@cspotcode/source-map-support": ["@cspotcode/source-map-support@0.8.1", "", { "dependencies": { "@jridgewell/trace-mapping": "0.3.9" } }, "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="],
+    "@hattip/headers": ["@hattip/headers@0.0.49", "", { "dependencies": { "@hattip/core": "0.0.49" } }, "sha512-rrB2lEhTf0+MNVt5WdW184Ky706F1Ze9Aazn/R8c+/FMUYF9yjem2CgXp49csPt3dALsecrnAUOHFiV0LrrHXA=="],
 
-    "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
+    "@hattip/polyfills": ["@hattip/polyfills@0.0.49", "", { "dependencies": { "@hattip/core": "0.0.49", "@whatwg-node/fetch": "^0.9.22", "node-fetch-native": "^1.6.4" } }, "sha512-5g7W5s6Gq+HDxwULGFQ861yAnEx3yd9V8GDwS96HBZ1nM1u93vN+KTuwXvNsV7Z3FJmCrD/pgU8WakvchclYuA=="],
 
-    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw=="],
-
-    "@esbuild/android-arm": ["@esbuild/android-arm@0.27.2", "", { "os": "android", "cpu": "arm" }, "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA=="],
-
-    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.2", "", { "os": "android", "cpu": "arm64" }, "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA=="],
-
-    "@esbuild/android-x64": ["@esbuild/android-x64@0.27.2", "", { "os": "android", "cpu": "x64" }, "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A=="],
-
-    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg=="],
-
-    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA=="],
-
-    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g=="],
-
-    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA=="],
-
-    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.2", "", { "os": "linux", "cpu": "arm" }, "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw=="],
-
-    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw=="],
-
-    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.2", "", { "os": "linux", "cpu": "ia32" }, "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w=="],
-
-    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg=="],
-
-    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw=="],
-
-    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ=="],
-
-    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA=="],
-
-    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w=="],
-
-    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.2", "", { "os": "linux", "cpu": "x64" }, "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA=="],
-
-    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw=="],
-
-    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.2", "", { "os": "none", "cpu": "x64" }, "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA=="],
-
-    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA=="],
-
-    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg=="],
-
-    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag=="],
-
-    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg=="],
-
-    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg=="],
-
-    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ=="],
-
-    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.2", "", { "os": "win32", "cpu": "x64" }, "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ=="],
-
-    "@fastify/busboy": ["@fastify/busboy@3.2.0", "", {}, "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA=="],
-
-    "@firebase/ai": ["@firebase/ai@2.7.0", "", { "dependencies": { "@firebase/app-check-interop-types": "0.3.3", "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x", "@firebase/app-types": "0.x" } }, "sha512-PwpCz+TtAMWICM7uQNO0mkSPpUKwrMV4NSwHkbVKDvPKoaQmSlO96vIz+Suw2Ao1EaUUsxYb5LGImHWt/fSnRQ=="],
-
-    "@firebase/analytics": ["@firebase/analytics@0.10.19", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/installations": "0.6.19", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-3wU676fh60gaiVYQEEXsbGS4HbF2XsiBphyvvqDbtC1U4/dO4coshbYktcCHq+HFaGIK07iHOh4pME0hEq1fcg=="],
-
-    "@firebase/analytics-compat": ["@firebase/analytics-compat@0.2.25", "", { "dependencies": { "@firebase/analytics": "0.10.19", "@firebase/analytics-types": "0.8.3", "@firebase/component": "0.7.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-fdzoaG0BEKbqksRDhmf4JoyZf16Wosrl0Y7tbZtJyVDOOwziE0vrFjmZuTdviL0yhak+Nco6rMsUUbkbD+qb6Q=="],
-
-    "@firebase/analytics-types": ["@firebase/analytics-types@0.8.3", "", {}, "sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg=="],
-
-    "@firebase/app": ["@firebase/app@0.14.7", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "idb": "7.1.1", "tslib": "^2.1.0" } }, "sha512-o3ZfnOx0AWBD5n/36p2zPoB0rDDxQP8H/A60zDLvvfRLtW8b3LfCyV97GKpJaAVV1JMMl/BC89EDzMyzxFZxTw=="],
-
-    "@firebase/app-check": ["@firebase/app-check@0.11.0", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-XAvALQayUMBJo58U/rxW02IhsesaxxfWVmVkauZvGEz3vOAjMEQnzFlyblqkc2iAaO82uJ2ZVyZv9XzPfxjJ6w=="],
-
-    "@firebase/app-check-compat": ["@firebase/app-check-compat@0.4.0", "", { "dependencies": { "@firebase/app-check": "0.11.0", "@firebase/app-check-types": "0.5.3", "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-UfK2Q8RJNjYM/8MFORltZRG9lJj11k0nW84rrffiKvcJxLf1jf6IEjCIkCamykHE73C6BwqhVfhIBs69GXQV0g=="],
-
-    "@firebase/app-check-interop-types": ["@firebase/app-check-interop-types@0.3.3", "", {}, "sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A=="],
-
-    "@firebase/app-check-types": ["@firebase/app-check-types@0.5.3", "", {}, "sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng=="],
-
-    "@firebase/app-compat": ["@firebase/app-compat@0.5.7", "", { "dependencies": { "@firebase/app": "0.14.7", "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" } }, "sha512-MO+jfap8IBZQ+K8L2QCiHObyMgpYHrxo4Hc7iJgfb9hjGRW/z1y6LWVdT9wBBK+VJ7cRP2DjAiWQP+thu53hHA=="],
-
-    "@firebase/app-types": ["@firebase/app-types@0.9.3", "", {}, "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw=="],
-
-    "@firebase/auth": ["@firebase/auth@1.12.0", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x", "@react-native-async-storage/async-storage": "^2.2.0" }, "optionalPeers": ["@react-native-async-storage/async-storage"] }, "sha512-zkvLpsrxynWHk07qGrUDfCSqKf4AvfZGEqJ7mVCtYGjNNDbGE71k0Yn84rg8QEZu4hQw1BC0qDEHzpNVBcSVmA=="],
-
-    "@firebase/auth-compat": ["@firebase/auth-compat@0.6.2", "", { "dependencies": { "@firebase/auth": "1.12.0", "@firebase/auth-types": "0.13.0", "@firebase/component": "0.7.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-8UhCzF6pav9bw/eXA8Zy1QAKssPRYEYXaWagie1ewLTwHkXv6bKp/j6/IwzSYQP67sy/BMFXIFaCCsoXzFLr7A=="],
-
-    "@firebase/auth-interop-types": ["@firebase/auth-interop-types@0.2.4", "", {}, "sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA=="],
-
-    "@firebase/auth-types": ["@firebase/auth-types@0.13.0", "", { "peerDependencies": { "@firebase/app-types": "0.x", "@firebase/util": "1.x" } }, "sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg=="],
-
-    "@firebase/component": ["@firebase/component@0.7.0", "", { "dependencies": { "@firebase/util": "1.13.0", "tslib": "^2.1.0" } }, "sha512-wR9En2A+WESUHexjmRHkqtaVH94WLNKt6rmeqZhSLBybg4Wyf0Umk04SZsS6sBq4102ZsDBFwoqMqJYj2IoDSg=="],
-
-    "@firebase/data-connect": ["@firebase/data-connect@0.3.12", "", { "dependencies": { "@firebase/auth-interop-types": "0.2.4", "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-baPddcoNLj/+vYo+HSJidJUdr5W4OkhT109c5qhR8T1dJoZcyJpkv/dFpYlw/VJ3dV66vI8GHQFrmAZw/xUS4g=="],
-
-    "@firebase/database": ["@firebase/database@1.1.0", "", { "dependencies": { "@firebase/app-check-interop-types": "0.3.3", "@firebase/auth-interop-types": "0.2.4", "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "faye-websocket": "0.11.4", "tslib": "^2.1.0" } }, "sha512-gM6MJFae3pTyNLoc9VcJNuaUDej0ctdjn3cVtILo3D5lpp0dmUHHLFN/pUKe7ImyeB1KAvRlEYxvIHNF04Filg=="],
-
-    "@firebase/database-compat": ["@firebase/database-compat@2.1.0", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/database": "1.1.0", "@firebase/database-types": "1.0.16", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" } }, "sha512-8nYc43RqxScsePVd1qe1xxvWNf0OBnbwHxmXJ7MHSuuTVYFO3eLyLW3PiCKJ9fHnmIz4p4LbieXwz+qtr9PZDg=="],
-
-    "@firebase/database-types": ["@firebase/database-types@1.0.16", "", { "dependencies": { "@firebase/app-types": "0.9.3", "@firebase/util": "1.13.0" } }, "sha512-xkQLQfU5De7+SPhEGAXFBnDryUWhhlFXelEg2YeZOQMCdoe7dL64DDAd77SQsR+6uoXIZY5MB4y/inCs4GTfcw=="],
-
-    "@firebase/firestore": ["@firebase/firestore@4.10.0", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "@firebase/webchannel-wrapper": "1.0.5", "@grpc/grpc-js": "~1.9.0", "@grpc/proto-loader": "^0.7.8", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-fgF6EbpoagGWh5Vwfu/7/jYgBFwUCwTlPNVF/aSjHcoEDRXpRsIqVfAFTp1LD+dWAUcAKEK3h+osk8spMJXtxA=="],
-
-    "@firebase/firestore-compat": ["@firebase/firestore-compat@0.4.4", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/firestore": "4.10.0", "@firebase/firestore-types": "3.0.3", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-JvxxIgi+D5v9BecjLA1YomdyF7LA6CXhJuVK10b4GtRrB3m2O2hT1jJWbKYZYHUAjTaajkvnos+4U5VNxqkI2w=="],
-
-    "@firebase/firestore-types": ["@firebase/firestore-types@3.0.3", "", { "peerDependencies": { "@firebase/app-types": "0.x", "@firebase/util": "1.x" } }, "sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q=="],
-
-    "@firebase/functions": ["@firebase/functions@0.13.1", "", { "dependencies": { "@firebase/app-check-interop-types": "0.3.3", "@firebase/auth-interop-types": "0.2.4", "@firebase/component": "0.7.0", "@firebase/messaging-interop-types": "0.2.3", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-sUeWSb0rw5T+6wuV2o9XNmh9yHxjFI9zVGFnjFi+n7drTEWpl7ZTz1nROgGrSu472r+LAaj+2YaSicD4R8wfbw=="],
-
-    "@firebase/functions-compat": ["@firebase/functions-compat@0.4.1", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/functions": "0.13.1", "@firebase/functions-types": "0.6.3", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-AxxUBXKuPrWaVNQ8o1cG1GaCAtXT8a0eaTDfqgS5VsRYLAR0ALcfqDLwo/QyijZj1w8Qf8n3Qrfy/+Im245hOQ=="],
-
-    "@firebase/functions-types": ["@firebase/functions-types@0.6.3", "", {}, "sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg=="],
-
-    "@firebase/installations": ["@firebase/installations@0.6.19", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/util": "1.13.0", "idb": "7.1.1", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-nGDmiwKLI1lerhwfwSHvMR9RZuIH5/8E3kgUWnVRqqL7kGVSktjLTWEMva7oh5yxQ3zXfIlIwJwMcaM5bK5j8Q=="],
-
-    "@firebase/installations-compat": ["@firebase/installations-compat@0.2.19", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/installations": "0.6.19", "@firebase/installations-types": "0.5.3", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-khfzIY3EI5LePePo7vT19/VEIH1E3iYsHknI/6ek9T8QCozAZshWT9CjlwOzZrKvTHMeNcbpo/VSOSIWDSjWdQ=="],
-
-    "@firebase/installations-types": ["@firebase/installations-types@0.5.3", "", { "peerDependencies": { "@firebase/app-types": "0.x" } }, "sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA=="],
-
-    "@firebase/logger": ["@firebase/logger@0.5.0", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-cGskaAvkrnh42b3BA3doDWeBmuHFO/Mx5A83rbRDYakPjO9bJtRL3dX7javzc2Rr/JHZf4HlterTW2lUkfeN4g=="],
-
-    "@firebase/messaging": ["@firebase/messaging@0.12.23", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/installations": "0.6.19", "@firebase/messaging-interop-types": "0.2.3", "@firebase/util": "1.13.0", "idb": "7.1.1", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-cfuzv47XxqW4HH/OcR5rM+AlQd1xL/VhuaeW/wzMW1LFrsFcTn0GND/hak1vkQc2th8UisBcrkVcQAnOnKwYxg=="],
-
-    "@firebase/messaging-compat": ["@firebase/messaging-compat@0.2.23", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/messaging": "0.12.23", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-SN857v/kBUvlQ9X/UjAqBoQ2FEaL1ZozpnmL1ByTe57iXkmnVVFm9KqAsTfmf+OEwWI4kJJe9NObtN/w22lUgg=="],
-
-    "@firebase/messaging-interop-types": ["@firebase/messaging-interop-types@0.2.3", "", {}, "sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q=="],
-
-    "@firebase/performance": ["@firebase/performance@0.7.9", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/installations": "0.6.19", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0", "web-vitals": "^4.2.4" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-UzybENl1EdM2I1sjYm74xGt/0JzRnU/0VmfMAKo2LSpHJzaj77FCLZXmYQ4oOuE+Pxtt8Wy2BVJEENiZkaZAzQ=="],
-
-    "@firebase/performance-compat": ["@firebase/performance-compat@0.2.22", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/performance": "0.7.9", "@firebase/performance-types": "0.2.3", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-xLKxaSAl/FVi10wDX/CHIYEUP13jXUjinL+UaNXT9ByIvxII5Ne5150mx6IgM8G6Q3V+sPiw9C8/kygkyHUVxg=="],
-
-    "@firebase/performance-types": ["@firebase/performance-types@0.2.3", "", {}, "sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ=="],
-
-    "@firebase/remote-config": ["@firebase/remote-config@0.8.0", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/installations": "0.6.19", "@firebase/logger": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-sJz7C2VACeE257Z/3kY9Ap2WXbFsgsDLfaGfZmmToKAK39ipXxFan+vzB9CSbF6mP7bzjyzEnqPcMXhAnYE6fQ=="],
-
-    "@firebase/remote-config-compat": ["@firebase/remote-config-compat@0.2.21", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/logger": "0.5.0", "@firebase/remote-config": "0.8.0", "@firebase/remote-config-types": "0.5.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-9+lm0eUycxbu8GO25JfJe4s6R2xlDqlVt0CR6CvN9E6B4AFArEV4qfLoDVRgIEB7nHKwvH2nYRocPWfmjRQTnw=="],
-
-    "@firebase/remote-config-types": ["@firebase/remote-config-types@0.5.0", "", {}, "sha512-vI3bqLoF14L/GchtgayMiFpZJF+Ao3uR8WCde0XpYNkSokDpAKca2DxvcfeZv7lZUqkUwQPL2wD83d3vQ4vvrg=="],
-
-    "@firebase/storage": ["@firebase/storage@0.14.0", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app": "0.x" } }, "sha512-xWWbb15o6/pWEw8H01UQ1dC5U3rf8QTAzOChYyCpafV6Xki7KVp3Yaw2nSklUwHEziSWE9KoZJS7iYeyqWnYFA=="],
-
-    "@firebase/storage-compat": ["@firebase/storage-compat@0.4.0", "", { "dependencies": { "@firebase/component": "0.7.0", "@firebase/storage": "0.14.0", "@firebase/storage-types": "0.8.3", "@firebase/util": "1.13.0", "tslib": "^2.1.0" }, "peerDependencies": { "@firebase/app-compat": "0.x" } }, "sha512-vDzhgGczr1OfcOy285YAPur5pWDEvD67w4thyeCUh6Ys0izN9fNYtA1MJERmNBfqjqu0lg0FM5GLbw0Il21M+g=="],
-
-    "@firebase/storage-types": ["@firebase/storage-types@0.8.3", "", { "peerDependencies": { "@firebase/app-types": "0.x", "@firebase/util": "1.x" } }, "sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg=="],
-
-    "@firebase/util": ["@firebase/util@1.13.0", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-0AZUyYUfpMNcztR5l09izHwXkZpghLgCUaAGjtMwXnCg3bj4ml5VgiwqOMOxJ+Nw4qN/zJAaOQBcJ7KGkWStqQ=="],
-
-    "@firebase/webchannel-wrapper": ["@firebase/webchannel-wrapper@1.0.5", "", {}, "sha512-+uGNN7rkfn41HLO0vekTFhTxk61eKa8mTpRGLO0QSqlQdKvIoGAvLp3ppdVIWbTGYJWM6Kp0iN+PjMIOcnVqTw=="],
-
-    "@google-cloud/firestore": ["@google-cloud/firestore@7.11.6", "", { "dependencies": { "@opentelemetry/api": "^1.3.0", "fast-deep-equal": "^3.1.1", "functional-red-black-tree": "^1.0.1", "google-gax": "^4.3.3", "protobufjs": "^7.2.6" } }, "sha512-EW/O8ktzwLfyWBOsNuhRoMi8lrC3clHM5LVFhGvO1HCsLozCOOXRAlHrYBoE6HL42Sc8yYMuCb2XqcnJ4OOEpw=="],
-
-    "@google-cloud/paginator": ["@google-cloud/paginator@5.0.2", "", { "dependencies": { "arrify": "^2.0.0", "extend": "^3.0.2" } }, "sha512-DJS3s0OVH4zFDB1PzjxAsHqJT6sKVbRwwML0ZBP9PbU7Yebtu/7SWMRzvO2J3nUi9pRNITCfu4LJeooM2w4pjg=="],
-
-    "@google-cloud/projectify": ["@google-cloud/projectify@4.0.0", "", {}, "sha512-MmaX6HeSvyPbWGwFq7mXdo0uQZLGBYCwziiLIGq5JVX+/bdI3SAq6bP98trV5eTWfLuvsMcIC1YJOF2vfteLFA=="],
-
-    "@google-cloud/promisify": ["@google-cloud/promisify@4.0.0", "", {}, "sha512-Orxzlfb9c67A15cq2JQEyVc7wEsmFBmHjZWZYQMUyJ1qivXyMwdyNOs9odi79hze+2zqdTtu1E19IM/FtqZ10g=="],
-
-    "@google-cloud/storage": ["@google-cloud/storage@7.18.0", "", { "dependencies": { "@google-cloud/paginator": "^5.0.0", "@google-cloud/projectify": "^4.0.0", "@google-cloud/promisify": "<4.1.0", "abort-controller": "^3.0.0", "async-retry": "^1.3.3", "duplexify": "^4.1.3", "fast-xml-parser": "^4.4.1", "gaxios": "^6.0.2", "google-auth-library": "^9.6.3", "html-entities": "^2.5.2", "mime": "^3.0.0", "p-limit": "^3.0.1", "retry-request": "^7.0.0", "teeny-request": "^9.0.0", "uuid": "^8.0.0" } }, "sha512-r3ZwDMiz4nwW6R922Z1pwpePxyRwE5GdevYX63hRmAQUkUQJcBH/79EnQPDv5cOv1mFBgevdNWQfi3tie3dHrQ=="],
-
-    "@grpc/grpc-js": ["@grpc/grpc-js@1.9.15", "", { "dependencies": { "@grpc/proto-loader": "^0.7.8", "@types/node": ">=12.12.47" } }, "sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ=="],
-
-    "@grpc/proto-loader": ["@grpc/proto-loader@0.7.15", "", { "dependencies": { "lodash.camelcase": "^4.3.0", "long": "^5.0.0", "protobufjs": "^7.2.5", "yargs": "^17.7.2" }, "bin": { "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js" } }, "sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ=="],
+    "@hattip/walk": ["@hattip/walk@0.0.49", "", { "dependencies": { "@hattip/headers": "0.0.49", "cac": "^6.7.14", "mime-types": "^2.1.35" }, "bin": { "hattip-walk": "cli.js" } }, "sha512-AgJgKLooZyQnzMfoFg5Mo/aHM+HGBC9ExpXIjNqGimYTRgNbL/K7X5EM1kR2JY90BNKk9lo6Usq1T/nWFdT7TQ=="],
 
     "@hiogawa/tiny-rpc": ["@hiogawa/tiny-rpc@0.2.3-pre.18", "", {}, "sha512-BiNHrutG9G9yV622QvkxZxF+PhkaH2Aspp4/X1KYTfnaQTcg4fFUTBWf5Kf533swon2SuVJwi6U6H1LQbhVOQQ=="],
 
     "@hiogawa/utils": ["@hiogawa/utils@1.7.0", "", {}, "sha512-ghiEFWBR1NENoHn+lSuW7liicTIzVPN+8Srm5UedCTw43gus0mlse6Wp2lz6GmbOXJ/CalMPp/0Tz2X8tajkAg=="],
 
+    "@hono/node-server": ["@hono/node-server@1.19.12", "", { "peerDependencies": { "hono": "^4" } }, "sha512-txsUW4SQ1iilgE0l9/e9VQWmELXifEFvmdA1j6WFh/aFPj99hIntrSsq/if0UWyGVkmrRPKA1wCeP+UCr1B9Uw=="],
+
+    "@hono/zod-validator": ["@hono/zod-validator@0.7.6", "", { "peerDependencies": { "hono": ">=3.9.0", "zod": "^3.25.0 || ^4.0.0" } }, "sha512-Io1B6d011Gj1KknV4rXYz4le5+5EubcWEU/speUjuw9XMMIaP3n78yXLhjd2A3PXaXaUwEAluOiAyLqhBEJgsw=="],
+
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
 
     "@iconify/utils": ["@iconify/utils@3.1.0", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "mlly": "^1.8.0" } }, "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw=="],
 
-    "@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
-
-    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
-
-    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
-
-    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
-
-    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
-
-    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
-
-    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
-
-    "@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
-
-    "@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
-
-    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
-
-    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
-
-    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
-
-    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
-
-    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
-
-    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
-
-    "@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
-
-    "@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
-
-    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
-
-    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
-
-    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
-
-    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
-
-    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
-
-    "@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
-
-    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
-
-    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
-
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -426,40 +144,60 @@
 
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
-    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
     "@js-sdsl/ordered-map": ["@js-sdsl/ordered-map@4.4.2", "", {}, "sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw=="],
 
-    "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
+    "@kamilkisiela/fast-url-parser": ["@kamilkisiela/fast-url-parser@1.1.4", "", {}, "sha512-gbkePEBupNydxCelHCESvFSFM8XPh1Zs/OAVRW/rKpEqPAl5PbOM90Si8mv9bvnR53uPD2s/FiRxdvSejpRJew=="],
+
+    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" } }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],
+
+    "@oxc-parser/binding-android-arm-eabi": ["@oxc-parser/binding-android-arm-eabi@0.115.0", "", { "os": "android", "cpu": "arm" }, "sha512-VoB2rhgoqgYf64d6Qs5emONQW8ASiTc0xp+aUE4JUhxjX+0pE3gblTYDO0upcN5vt9UlBNmUhAwfSifkfre7nw=="],
+
+    "@oxc-parser/binding-android-arm64": ["@oxc-parser/binding-android-arm64@0.115.0", "", { "os": "android", "cpu": "arm64" }, "sha512-lWRX75u+gqfB4TF3pWCHuvhaeneAmRl2b2qNBcl4S6yJ0HtnT4VXOMEZrq747i4Zby1ZTxj6mtOe678Bg8gRLw=="],
+
+    "@oxc-parser/binding-darwin-arm64": ["@oxc-parser/binding-darwin-arm64@0.115.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ii/oOZjfGY1aszXTy29Z5DRyCEnBOrAXDVCvfdfXFQsOZlbbOa7NMHD7D+06YFe5qdxfmbWAYv4yn6QJi/0d2g=="],
+
+    "@oxc-parser/binding-darwin-x64": ["@oxc-parser/binding-darwin-x64@0.115.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-R/sW/p8l77wglbjpMcF+h/3rWbp9zk1mRP3U14mxTYIC2k3m+aLBpXXgk2zksqf9qKk5mcc4GIYsuCn9l8TgDg=="],
+
+    "@oxc-parser/binding-freebsd-x64": ["@oxc-parser/binding-freebsd-x64@0.115.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-CSJ5ldNm9wIGGkhaIJeGmxRMZbgxThRN+X1ufYQQUNi5jZDV/U3C2QDMywpP93fczNBj961hXtcUPO/oVGq4Pw=="],
+
+    "@oxc-parser/binding-linux-arm-gnueabihf": ["@oxc-parser/binding-linux-arm-gnueabihf@0.115.0", "", { "os": "linux", "cpu": "arm" }, "sha512-uWFwssE5dHfQ8lH+ktrsD9JA49+Qa0gtxZHUs62z1e91NgGz6O7jefHGI6aygNyKNS45pnnBSDSP/zV977MsOQ=="],
+
+    "@oxc-parser/binding-linux-arm-musleabihf": ["@oxc-parser/binding-linux-arm-musleabihf@0.115.0", "", { "os": "linux", "cpu": "arm" }, "sha512-fZbqt8y/sKQ+v6bBCuv/mYYFoC0+fZI3mGDDEemmDOhT78+aUs2+4ZMdbd2btlXmnLaScl37r8IRbhnok5Ka9w=="],
+
+    "@oxc-parser/binding-linux-arm64-gnu": ["@oxc-parser/binding-linux-arm64-gnu@0.115.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-1ej/MjuTY9tJEunU/hUPIFmgH5PqgMQoRjNOvOkibtJ3Zqlw/+Lc+HGHDNET8sjbgIkWzdhX+p4J96A5CPdbag=="],
+
+    "@oxc-parser/binding-linux-arm64-musl": ["@oxc-parser/binding-linux-arm64-musl@0.115.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-HjsZbJPH9mMd4swJRywVMsDZsJX0hyKb1iNHo5ijRl5yhtbO3lj7ImSrrL1oZ1VEg0te4iKmDGGz/6YPLd1G8w=="],
+
+    "@oxc-parser/binding-linux-ppc64-gnu": ["@oxc-parser/binding-linux-ppc64-gnu@0.115.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-zhhePoBrd7kQx3oClX/W6NldsuCbuMqaN9rRsY+6/WoorAb4j490PG/FjqgAXscWp2uSW2WV9L+ksn0wHrvsrg=="],
+
+    "@oxc-parser/binding-linux-riscv64-gnu": ["@oxc-parser/binding-linux-riscv64-gnu@0.115.0", "", { "os": "linux", "cpu": "none" }, "sha512-t/IRojvUE9XrKu+/H1b8YINug+7Q6FLls5rsm2lxB5mnS8GN/eYAYrPgHkcg9/1SueRDSzGpDYu3lGWTObk1zw=="],
+
+    "@oxc-parser/binding-linux-riscv64-musl": ["@oxc-parser/binding-linux-riscv64-musl@0.115.0", "", { "os": "linux", "cpu": "none" }, "sha512-79jBHSSh/YpQRAmvYoaCfpyToRbJ/HBrdB7hxK2ku2JMehjopTVo+xMJss/RV7/ZYqeezgjvKDQzapJbgcjVZA=="],
+
+    "@oxc-parser/binding-linux-s390x-gnu": ["@oxc-parser/binding-linux-s390x-gnu@0.115.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-nA1TpxkhNTIOMMyiSSsa7XIVJVoOU/SsVrHIz3gHvWweB5PHCQfO7w+Lb2EP0lBWokv7HtA/KbF7aLDoXzmuMw=="],
+
+    "@oxc-parser/binding-linux-x64-gnu": ["@oxc-parser/binding-linux-x64-gnu@0.115.0", "", { "os": "linux", "cpu": "x64" }, "sha512-9iVX789DoC3SaOOG+X6NcF/tVChgLp2vcHffzOC2/Z1JTPlz6bMG2ogvcW6/9s0BG2qvhNQImd+gbWYeQbOwVw=="],
+
+    "@oxc-parser/binding-linux-x64-musl": ["@oxc-parser/binding-linux-x64-musl@0.115.0", "", { "os": "linux", "cpu": "x64" }, "sha512-RmQmk+mjCB0nMNfEYhaCxwofLo1Z95ebHw1AGvRiWGCd4zhCNOyskgCbMogIcQzSB3SuEKWgkssyaiQYVAA4hQ=="],
+
+    "@oxc-parser/binding-openharmony-arm64": ["@oxc-parser/binding-openharmony-arm64@0.115.0", "", { "os": "none", "cpu": "arm64" }, "sha512-viigraWWQhhDvX5aGq+wrQq58k00Xq3MHz/0R4AFMxGlZ8ogNonpEfNc73Q5Ly87Z6sU9BvxEdG0dnYTfVnmew=="],
+
+    "@oxc-parser/binding-wasm32-wasi": ["@oxc-parser/binding-wasm32-wasi@0.115.0", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-IzGCrMwXhpb4kTXy/8lnqqqwjI7eOvy+r9AhVw+hsr8t1ecBBEHprcNy0aKatFHN6hsX7UMHHQmBAQjVvL/p1A=="],
+
+    "@oxc-parser/binding-win32-arm64-msvc": ["@oxc-parser/binding-win32-arm64-msvc@0.115.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-/ym+Absk/TLFvbhh3se9XYuI1D7BrUVHw4RaG/2dmWKgBenrZHaJsgnRb7NJtaOyjEOLIPtULx1wDdVL0SX2eg=="],
+
+    "@oxc-parser/binding-win32-ia32-msvc": ["@oxc-parser/binding-win32-ia32-msvc@0.115.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-AQSZjIR+b+Te7uaO/hGTMjT8/oxlYrvKrOTi4KTHF/O6osjHEatUQ3y6ZW2+8+lJxy20zIcGz6iQFmFq/qDKkg=="],
+
+    "@oxc-parser/binding-win32-x64-msvc": ["@oxc-parser/binding-win32-x64-msvc@0.115.0", "", { "os": "win32", "cpu": "x64" }, "sha512-oxUl82N+fIO9jIaXPph8SPPHQXrA08BHokBBJW8ct9F/x6o6bZE6eUAhUtWajbtvFhL8UYcCWRMba+kww6MBlA=="],
+
+    "@oxc-project/types": ["@oxc-project/types@0.122.0", "", {}, "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA=="],
+
+    "@pinia/colada": ["@pinia/colada@1.1.0", "", { "peerDependencies": { "pinia": "^2.2.6 || ^3.0.0", "vue": "^3.5.17" } }, "sha512-GoTOlaDuQuF+9Lj5MbY2oOOZeJSP/I0U9/+Ugo5nfCymlWSyjFFjE7QcHageNL7tQr+tfepb13ks8+qO6uSV/A=="],
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
 
-    "@poppinss/colors": ["@poppinss/colors@4.1.6", "", { "dependencies": { "kleur": "^4.1.5" } }, "sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg=="],
-
-    "@poppinss/dumper": ["@poppinss/dumper@0.6.5", "", { "dependencies": { "@poppinss/colors": "^4.1.5", "@sindresorhus/is": "^7.0.2", "supports-color": "^10.0.0" } }, "sha512-NBdYIb90J7LfOI32dOewKI1r7wnkiH6m920puQ3qHUeZkxNkQiFnXVWoE6YtFSv6QOiPPf7ys6i+HWWecDz7sw=="],
-
-    "@poppinss/exception": ["@poppinss/exception@1.2.3", "", {}, "sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw=="],
-
-    "@primeuix/forms": ["@primeuix/forms@0.1.0", "", { "dependencies": { "@primeuix/utils": "^0.6.0" } }, "sha512-LctcQidb+B5PuvAFWH24YH/SIzmHlOabLHpaTeGY/k51iBv1WyCp+5w9JMYuMB/BplSvV0ZGySxQVkN5Azr/aQ=="],
-
-    "@primeuix/styled": ["@primeuix/styled@0.7.4", "", { "dependencies": { "@primeuix/utils": "^0.6.1" } }, "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ=="],
-
-    "@primeuix/styles": ["@primeuix/styles@2.0.2", "", { "dependencies": { "@primeuix/styled": "^0.7.4" } }, "sha512-LNtkJsTonNHF5ag+9s3+zQzm00+LRmffw68QRIHy6S/dam1JpdrrAnUzNYlWbaY7aE2EkZvQmx7Np7+PyHn+ow=="],
-
-    "@primeuix/themes": ["@primeuix/themes@2.0.2", "", { "dependencies": { "@primeuix/styled": "^0.7.4" } }, "sha512-prwQvA3tDGBz8yWSUenaJUttEMCEvPvxwOfFhDPmSe1vwsfVKL2Nmh5eZvtPFQnxmIOPsHZS7zc0/L3CzJ83Eg=="],
-
-    "@primeuix/utils": ["@primeuix/utils@0.6.3", "", {}, "sha512-/SLNQSKQ73WbBIsflKVqbpVjCfFYvQO3Sf1LMheXyxh8JqxO4M63dzP56wwm9OPGuCQ6MYOd2AHgZXz+g7PZcg=="],
-
-    "@primevue/auto-import-resolver": ["@primevue/auto-import-resolver@4.5.4", "", { "dependencies": { "@primevue/metadata": "4.5.4" } }, "sha512-YQHrZ9PQSG/4K2BwthA2Xuna4WyS0JMHajiHD9PljaDyQtBVwCadX5ZpKcrAUWR8E/1gjva8x/si0RYxxYrRJw=="],
-
-    "@primevue/core": ["@primevue/core@4.5.4", "", { "dependencies": { "@primeuix/styled": "^0.7.4", "@primeuix/utils": "^0.6.2" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-lYJJB3wTrDJ8MkLctzHfrPZAqXVxoatjIsswSJzupatf6ZogJHVYADUKcn1JAkLLk8dtV1FA2AxDek663fHO5Q=="],
-
-    "@primevue/forms": ["@primevue/forms@4.5.4", "", { "dependencies": { "@primeuix/forms": "^0.1.0", "@primeuix/utils": "^0.6.2", "@primevue/core": "4.5.4" } }, "sha512-2TlD8oJEtb8vuKzY3jY0W+7NVBC/Qj0m57iWzpMUmGnEKg9sbQ2/ZiU1sTof710/liYgm4FneRTOYHIpVkiJNA=="],
-
-    "@primevue/icons": ["@primevue/icons@4.5.4", "", { "dependencies": { "@primeuix/utils": "^0.6.2", "@primevue/core": "4.5.4" } }, "sha512-DxgryEc7ZmUqcEhYMcxGBRyFzdtLIoy3jLtlH1zsVSRZaG+iSAcjQ88nvfkZxGUZtZBFL7sRjF6KLq3bJZJwUw=="],
-
-    "@primevue/metadata": ["@primevue/metadata@4.5.4", "", {}, "sha512-jJFD0KYm8bPYgFo0JP3Dc2RkyXzrMI1XHQGsEKTysx9Jx2d1XdxtFji/ZsQeoo/RmwUNof5ciZ72URq37rnK+g=="],
-
     "@protobufjs/aspromise": ["@protobufjs/aspromise@1.1.2", "", {}, "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="],
 
     "@protobufjs/base64": ["@protobufjs/base64@1.1.2", "", {}, "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="],
@@ -482,257 +220,101 @@
 
     "@quansync/fs": ["@quansync/fs@1.0.0", "", { "dependencies": { "quansync": "^1.0.0" } }, "sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ=="],
 
-    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.53", "", {}, "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ=="],
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.12", "", { "os": "android", "cpu": "arm64" }, "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA=="],
 
-    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.55.1", "", { "os": "android", "cpu": "arm" }, "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg=="],
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg=="],
 
-    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.55.1", "", { "os": "android", "cpu": "arm64" }, "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg=="],
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw=="],
 
-    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.55.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg=="],
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q=="],
 
-    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.55.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ=="],
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm" }, "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q=="],
 
-    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.55.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg=="],
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg=="],
 
-    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.55.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw=="],
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw=="],
 
-    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.55.1", "", { "os": "linux", "cpu": "arm" }, "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ=="],
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g=="],
 
-    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.55.1", "", { "os": "linux", "cpu": "arm" }, "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg=="],
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og=="],
 
-    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.55.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ=="],
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "x64" }, "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg=="],
 
-    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.55.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA=="],
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.12", "", { "os": "linux", "cpu": "x64" }, "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig=="],
 
-    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g=="],
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.12", "", { "os": "none", "cpu": "arm64" }, "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA=="],
 
-    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw=="],
+    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.12", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg=="],
 
-    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.55.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw=="],
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q=="],
 
-    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.55.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw=="],
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.12", "", { "os": "win32", "cpu": "x64" }, "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw=="],
 
-    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw=="],
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.2", "", {}, "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw=="],
 
-    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg=="],
+    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
 
-    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.55.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg=="],
+    "@tanstack/vue-table": ["@tanstack/vue-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "vue": ">=3.2" } }, "sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw=="],
 
-    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.55.1", "", { "os": "linux", "cpu": "x64" }, "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg=="],
+    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
 
-    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.55.1", "", { "os": "linux", "cpu": "x64" }, "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w=="],
-
-    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.55.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg=="],
-
-    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.55.1", "", { "os": "none", "cpu": "arm64" }, "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw=="],
-
-    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.55.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g=="],
-
-    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.55.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA=="],
-
-    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.55.1", "", { "os": "win32", "cpu": "x64" }, "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg=="],
-
-    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.55.1", "", { "os": "win32", "cpu": "x64" }, "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw=="],
-
-    "@sindresorhus/is": ["@sindresorhus/is@7.2.0", "", {}, "sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw=="],
-
-    "@smithy/abort-controller": ["@smithy/abort-controller@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-peuVfkYHAmS5ybKxWcfraK7WBBP0J+rkfUcbHJJKQ4ir3UAUNQI+Y4Vt/PqSzGqgloJ5O1dk7+WzNL8wcCSXbw=="],
-
-    "@smithy/chunked-blob-reader": ["@smithy/chunked-blob-reader@5.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-WmU0TnhEAJLWvfSeMxBNe5xtbselEO8+4wG0NtZeL8oR21WgH1xiO37El+/Y+H/Ie4SCwBy3MxYWmOYaGgZueA=="],
-
-    "@smithy/chunked-blob-reader-native": ["@smithy/chunked-blob-reader-native@4.2.1", "", { "dependencies": { "@smithy/util-base64": "^4.3.0", "tslib": "^2.6.2" } }, "sha512-lX9Ay+6LisTfpLid2zZtIhSEjHMZoAR5hHCR4H7tBz/Zkfr5ea8RcQ7Tk4mi0P76p4cN+Btz16Ffno7YHpKXnQ=="],
-
-    "@smithy/config-resolver": ["@smithy/config-resolver@4.4.6", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.8", "@smithy/types": "^4.12.0", "@smithy/util-config-provider": "^4.2.0", "@smithy/util-endpoints": "^3.2.8", "@smithy/util-middleware": "^4.2.8", "tslib": "^2.6.2" } }, "sha512-qJpzYC64kaj3S0fueiu3kXm8xPrR3PcXDPEgnaNMRn0EjNSZFoFjvbUp0YUDsRhN1CB90EnHJtbxWKevnH99UQ=="],
-
-    "@smithy/core": ["@smithy/core@3.20.6", "", { "dependencies": { "@smithy/middleware-serde": "^4.2.9", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-middleware": "^4.2.8", "@smithy/util-stream": "^4.5.10", "@smithy/util-utf8": "^4.2.0", "@smithy/uuid": "^1.1.0", "tslib": "^2.6.2" } }, "sha512-BpAffW1mIyRZongoKBbh3RgHG+JDHJek/8hjA/9LnPunM+ejorO6axkxCgwxCe4K//g/JdPeR9vROHDYr/hfnQ=="],
-
-    "@smithy/credential-provider-imds": ["@smithy/credential-provider-imds@4.2.8", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.8", "@smithy/property-provider": "^4.2.8", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "tslib": "^2.6.2" } }, "sha512-FNT0xHS1c/CPN8upqbMFP83+ul5YgdisfCfkZ86Jh2NSmnqw/AJ6x5pEogVCTVvSm7j9MopRU89bmDelxuDMYw=="],
-
-    "@smithy/eventstream-codec": ["@smithy/eventstream-codec@4.2.8", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.12.0", "@smithy/util-hex-encoding": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-jS/O5Q14UsufqoGhov7dHLOPCzkYJl9QDzusI2Psh4wyYx/izhzvX9P4D69aTxcdfVhEPhjK+wYyn/PzLjKbbw=="],
-
-    "@smithy/eventstream-serde-browser": ["@smithy/eventstream-serde-browser@4.2.8", "", { "dependencies": { "@smithy/eventstream-serde-universal": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-MTfQT/CRQz5g24ayXdjg53V0mhucZth4PESoA5IhvaWVDTOQLfo8qI9vzqHcPsdd2v6sqfTYqF5L/l+pea5Uyw=="],
-
-    "@smithy/eventstream-serde-config-resolver": ["@smithy/eventstream-serde-config-resolver@4.3.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-ah12+luBiDGzBruhu3efNy1IlbwSEdNiw8fOZksoKoWW1ZHvO/04MQsdnws/9Aj+5b0YXSSN2JXKy/ClIsW8MQ=="],
-
-    "@smithy/eventstream-serde-node": ["@smithy/eventstream-serde-node@4.2.8", "", { "dependencies": { "@smithy/eventstream-serde-universal": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-cYpCpp29z6EJHa5T9WL0KAlq3SOKUQkcgSoeRfRVwjGgSFl7Uh32eYGt7IDYCX20skiEdRffyDpvF2efEZPC0A=="],
-
-    "@smithy/eventstream-serde-universal": ["@smithy/eventstream-serde-universal@4.2.8", "", { "dependencies": { "@smithy/eventstream-codec": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-iJ6YNJd0bntJYnX6s52NC4WFYcZeKrPUr1Kmmr5AwZcwCSzVpS7oavAmxMR7pMq7V+D1G4s9F5NJK0xwOsKAlQ=="],
-
-    "@smithy/fetch-http-handler": ["@smithy/fetch-http-handler@5.3.9", "", { "dependencies": { "@smithy/protocol-http": "^5.3.8", "@smithy/querystring-builder": "^4.2.8", "@smithy/types": "^4.12.0", "@smithy/util-base64": "^4.3.0", "tslib": "^2.6.2" } }, "sha512-I4UhmcTYXBrct03rwzQX1Y/iqQlzVQaPxWjCjula++5EmWq9YGBrx6bbGqluGc1f0XEfhSkiY4jhLgbsJUMKRA=="],
-
-    "@smithy/hash-blob-browser": ["@smithy/hash-blob-browser@4.2.9", "", { "dependencies": { "@smithy/chunked-blob-reader": "^5.2.0", "@smithy/chunked-blob-reader-native": "^4.2.1", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-m80d/iicI7DlBDxyQP6Th7BW/ejDGiF0bgI754+tiwK0lgMkcaIBgvwwVc7OFbY4eUzpGtnig52MhPAEJ7iNYg=="],
-
-    "@smithy/hash-node": ["@smithy/hash-node@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-7ZIlPbmaDGxVoxErDZnuFG18WekhbA/g2/i97wGj+wUBeS6pcUeAym8u4BXh/75RXWhgIJhyC11hBzig6MljwA=="],
-
-    "@smithy/hash-stream-node": ["@smithy/hash-stream-node@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-v0FLTXgHrTeheYZFGhR+ehX5qUm4IQsjAiL9qehad2cyjMWcN2QG6/4mSwbSgEQzI7jwfoXj7z4fxZUx/Mhj2w=="],
-
-    "@smithy/invalid-dependency": ["@smithy/invalid-dependency@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-N9iozRybwAQ2dn9Fot9kI6/w9vos2oTXLhtK7ovGqwZjlOcxu6XhPlpLpC+INsxktqHinn5gS2DXDjDF2kG5sQ=="],
-
-    "@smithy/is-array-buffer": ["@smithy/is-array-buffer@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-DZZZBvC7sjcYh4MazJSGiWMI2L7E0oCiRHREDzIxi/M2LY79/21iXt6aPLHge82wi5LsuRF5A06Ds3+0mlh6CQ=="],
-
-    "@smithy/md5-js": ["@smithy/md5-js@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-oGMaLj4tVZzLi3itBa9TCswgMBr7k9b+qKYowQ6x1rTyTuO1IU2YHdHUa+891OsOH+wCsH7aTPRsTJO3RMQmjQ=="],
-
-    "@smithy/middleware-content-length": ["@smithy/middleware-content-length@4.2.8", "", { "dependencies": { "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-RO0jeoaYAB1qBRhfVyq0pMgBoUK34YEJxVxyjOWYZiOKOq2yMZ4MnVXMZCUDenpozHue207+9P5ilTV1zeda0A=="],
-
-    "@smithy/middleware-endpoint": ["@smithy/middleware-endpoint@4.4.7", "", { "dependencies": { "@smithy/core": "^3.20.6", "@smithy/middleware-serde": "^4.2.9", "@smithy/node-config-provider": "^4.3.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "@smithy/util-middleware": "^4.2.8", "tslib": "^2.6.2" } }, "sha512-SCmhUG1UwtnEhF5Sxd8qk7bJwkj1BpFzFlHkXqKCEmDPLrRjJyTGM0EhqT7XBtDaDJjCfjRJQodgZcKDR843qg=="],
-
-    "@smithy/middleware-retry": ["@smithy/middleware-retry@4.4.23", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.8", "@smithy/protocol-http": "^5.3.8", "@smithy/service-error-classification": "^4.2.8", "@smithy/smithy-client": "^4.10.8", "@smithy/types": "^4.12.0", "@smithy/util-middleware": "^4.2.8", "@smithy/util-retry": "^4.2.8", "@smithy/uuid": "^1.1.0", "tslib": "^2.6.2" } }, "sha512-lLEmkQj7I7oKfvZ1wsnToGJouLOtfkMXDKRA1Hi6F+mMp5O1N8GcVWmVeNgTtgZtd0OTXDTI2vpVQmeutydGew=="],
-
-    "@smithy/middleware-serde": ["@smithy/middleware-serde@4.2.9", "", { "dependencies": { "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-eMNiej0u/snzDvlqRGSN3Vl0ESn3838+nKyVfF2FKNXFbi4SERYT6PR392D39iczngbqqGG0Jl1DlCnp7tBbXQ=="],
-
-    "@smithy/middleware-stack": ["@smithy/middleware-stack@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-w6LCfOviTYQjBctOKSwy6A8FIkQy7ICvglrZFl6Bw4FmcQ1Z420fUtIhxaUZZshRe0VCq4kvDiPiXrPZAe8oRA=="],
-
-    "@smithy/node-config-provider": ["@smithy/node-config-provider@4.3.8", "", { "dependencies": { "@smithy/property-provider": "^4.2.8", "@smithy/shared-ini-file-loader": "^4.4.3", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-aFP1ai4lrbVlWjfpAfRSL8KFcnJQYfTl5QxLJXY32vghJrDuFyPZ6LtUL+JEGYiFRG1PfPLHLoxj107ulncLIg=="],
-
-    "@smithy/node-http-handler": ["@smithy/node-http-handler@4.4.8", "", { "dependencies": { "@smithy/abort-controller": "^4.2.8", "@smithy/protocol-http": "^5.3.8", "@smithy/querystring-builder": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-q9u+MSbJVIJ1QmJ4+1u+cERXkrhuILCBDsJUBAW1MPE6sFonbCNaegFuwW9ll8kh5UdyY3jOkoOGlc7BesoLpg=="],
-
-    "@smithy/property-provider": ["@smithy/property-provider@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-EtCTbyIveCKeOXDSWSdze3k612yCPq1YbXsbqX3UHhkOSW8zKsM9NOJG5gTIya0vbY2DIaieG8pKo1rITHYL0w=="],
-
-    "@smithy/protocol-http": ["@smithy/protocol-http@5.3.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-QNINVDhxpZ5QnP3aviNHQFlRogQZDfYlCkQT+7tJnErPQbDhysondEjhikuANxgMsZrkGeiAxXy4jguEGsDrWQ=="],
-
-    "@smithy/querystring-builder": ["@smithy/querystring-builder@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "@smithy/util-uri-escape": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-Xr83r31+DrE8CP3MqPgMJl+pQlLLmOfiEUnoyAlGzzJIrEsbKsPy1hqH0qySaQm4oWrCBlUqRt+idEgunKB+iw=="],
-
-    "@smithy/querystring-parser": ["@smithy/querystring-parser@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-vUurovluVy50CUlazOiXkPq40KGvGWSdmusa3130MwrR1UNnNgKAlj58wlOe61XSHRpUfIIh6cE0zZ8mzKaDPA=="],
-
-    "@smithy/service-error-classification": ["@smithy/service-error-classification@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0" } }, "sha512-mZ5xddodpJhEt3RkCjbmUQuXUOaPNTkbMGR0bcS8FE0bJDLMZlhmpgrvPNCYglVw5rsYTpSnv19womw9WWXKQQ=="],
-
-    "@smithy/shared-ini-file-loader": ["@smithy/shared-ini-file-loader@4.4.3", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-DfQjxXQnzC5UbCUPeC3Ie8u+rIWZTvuDPAGU/BxzrOGhRvgUanaP68kDZA+jaT3ZI+djOf+4dERGlm9mWfFDrg=="],
-
-    "@smithy/signature-v4": ["@smithy/signature-v4@5.3.8", "", { "dependencies": { "@smithy/is-array-buffer": "^4.2.0", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "@smithy/util-hex-encoding": "^4.2.0", "@smithy/util-middleware": "^4.2.8", "@smithy/util-uri-escape": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-6A4vdGj7qKNRF16UIcO8HhHjKW27thsxYci+5r/uVRkdcBEkOEiY8OMPuydLX4QHSrJqGHPJzPRwwVTqbLZJhg=="],
-
-    "@smithy/smithy-client": ["@smithy/smithy-client@4.10.8", "", { "dependencies": { "@smithy/core": "^3.20.6", "@smithy/middleware-endpoint": "^4.4.7", "@smithy/middleware-stack": "^4.2.8", "@smithy/protocol-http": "^5.3.8", "@smithy/types": "^4.12.0", "@smithy/util-stream": "^4.5.10", "tslib": "^2.6.2" } }, "sha512-wcr3UEL26k7lLoyf9eVDZoD1nNY3Fa1gbNuOXvfxvVWLGkOVW+RYZgUUp/bXHryJfycIOQnBq9o1JAE00ax8HQ=="],
-
-    "@smithy/types": ["@smithy/types@4.12.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-9YcuJVTOBDjg9LWo23Qp0lTQ3D7fQsQtwle0jVfpbUHy9qBwCEgKuVH4FqFB3VYu0nwdHKiEMA+oXz7oV8X1kw=="],
-
-    "@smithy/url-parser": ["@smithy/url-parser@4.2.8", "", { "dependencies": { "@smithy/querystring-parser": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-NQho9U68TGMEU639YkXnVMV3GEFFULmmaWdlu1E9qzyIePOHsoSnagTGSDv1Zi8DCNN6btxOSdgmy5E/hsZwhA=="],
-
-    "@smithy/util-base64": ["@smithy/util-base64@4.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-GkXZ59JfyxsIwNTWFnjmFEI8kZpRNIBfxKjv09+nkAWPt/4aGaEWMM04m4sxgNVWkbt2MdSvE3KF/PfX4nFedQ=="],
-
-    "@smithy/util-body-length-browser": ["@smithy/util-body-length-browser@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-Fkoh/I76szMKJnBXWPdFkQJl2r9SjPt3cMzLdOB6eJ4Pnpas8hVoWPYemX/peO0yrrvldgCUVJqOAjUrOLjbxg=="],
-
-    "@smithy/util-body-length-node": ["@smithy/util-body-length-node@4.2.1", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-h53dz/pISVrVrfxV1iqXlx5pRg3V2YWFcSQyPyXZRrZoZj4R4DeWRDo1a7dd3CPTcFi3kE+98tuNyD2axyZReA=="],
-
-    "@smithy/util-buffer-from": ["@smithy/util-buffer-from@4.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-kAY9hTKulTNevM2nlRtxAG2FQ3B2OR6QIrPY3zE5LqJy1oxzmgBGsHLWTcNhWXKchgA0WHW+mZkQrng/pgcCew=="],
-
-    "@smithy/util-config-provider": ["@smithy/util-config-provider@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-YEjpl6XJ36FTKmD+kRJJWYvrHeUvm5ykaUS5xK+6oXffQPHeEM4/nXlZPe+Wu0lsgRUcNZiliYNh/y7q9c2y6Q=="],
-
-    "@smithy/util-defaults-mode-browser": ["@smithy/util-defaults-mode-browser@4.3.22", "", { "dependencies": { "@smithy/property-provider": "^4.2.8", "@smithy/smithy-client": "^4.10.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-O2WXr6ZRqPnbyoepb7pKcLt1QL6uRfFzGYJ9sGb5hMJQi7v/4RjRmCQa9mNjA0YiXqsc5lBmLXqJPhjM1Vjv5A=="],
-
-    "@smithy/util-defaults-mode-node": ["@smithy/util-defaults-mode-node@4.2.25", "", { "dependencies": { "@smithy/config-resolver": "^4.4.6", "@smithy/credential-provider-imds": "^4.2.8", "@smithy/node-config-provider": "^4.3.8", "@smithy/property-provider": "^4.2.8", "@smithy/smithy-client": "^4.10.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-7uMhppVNRbgNIpyUBVRfjGHxygP85wpXalRvn9DvUlCx4qgy1AB/uxOPSiDx/jFyrwD3/BypQhx1JK7f3yxrAw=="],
-
-    "@smithy/util-endpoints": ["@smithy/util-endpoints@3.2.8", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-8JaVTn3pBDkhZgHQ8R0epwWt+BqPSLCjdjXXusK1onwJlRuN69fbvSK66aIKKO7SwVFM6x2J2ox5X8pOaWcUEw=="],
-
-    "@smithy/util-hex-encoding": ["@smithy/util-hex-encoding@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-CCQBwJIvXMLKxVbO88IukazJD9a4kQ9ZN7/UMGBjBcJYvatpWk+9g870El4cB8/EJxfe+k+y0GmR9CAzkF+Nbw=="],
-
-    "@smithy/util-middleware": ["@smithy/util-middleware@4.2.8", "", { "dependencies": { "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-PMqfeJxLcNPMDgvPbbLl/2Vpin+luxqTGPpW3NAQVLbRrFRzTa4rNAASYeIGjRV9Ytuhzny39SpyU04EQreF+A=="],
-
-    "@smithy/util-retry": ["@smithy/util-retry@4.2.8", "", { "dependencies": { "@smithy/service-error-classification": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-CfJqwvoRY0kTGe5AkQokpURNCT1u/MkRzMTASWMPPo2hNSnKtF1D45dQl3DE2LKLr4m+PW9mCeBMJr5mCAVThg=="],
-
-    "@smithy/util-stream": ["@smithy/util-stream@4.5.10", "", { "dependencies": { "@smithy/fetch-http-handler": "^5.3.9", "@smithy/node-http-handler": "^4.4.8", "@smithy/types": "^4.12.0", "@smithy/util-base64": "^4.3.0", "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-hex-encoding": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-jbqemy51UFSZSp2y0ZmRfckmrzuKww95zT9BYMmuJ8v3altGcqjwoV1tzpOwuHaKrwQrCjIzOib499ymr2f98g=="],
-
-    "@smithy/util-uri-escape": ["@smithy/util-uri-escape@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-igZpCKV9+E/Mzrpq6YacdTQ0qTiLm85gD6N/IrmyDvQFA4UnU3d5g3m8tMT/6zG/vVkWSU+VxeUyGonL62DuxA=="],
-
-    "@smithy/util-utf8": ["@smithy/util-utf8@4.2.0", "", { "dependencies": { "@smithy/util-buffer-from": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-zBPfuzoI8xyBtR2P6WQj63Rz8i3AmfAaJLuNG8dWsfvPe8lO4aCPYLn879mEgHndZH1zQ2oXmG8O1GGzzaoZiw=="],
-
-    "@smithy/util-waiter": ["@smithy/util-waiter@4.2.8", "", { "dependencies": { "@smithy/abort-controller": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-n+lahlMWk+aejGuax7DPWtqav8HYnWxQwR+LCG2BgCUmaGcTe9qZCFsmw8TMg9iG75HOwhrJCX9TCJRLH+Yzqg=="],
-
-    "@smithy/uuid": ["@smithy/uuid@1.1.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-4aUIteuyxtBUhVdiQqcDhKFitwfd9hqoSDYY2KRXiWtgoWJ9Bmise+KfEPDiVHWeJepvF8xJO9/9+WDIciMFFw=="],
-
-    "@speed-highlight/core": ["@speed-highlight/core@1.2.14", "", {}, "sha512-G4ewlBNhUtlLvrJTb88d2mdy2KRijzs4UhnlrOSRT4bmjh/IqNElZa3zkrZ+TC47TwtlDWzVLFADljF1Ijp5hA=="],
-
-    "@tootallnate/once": ["@tootallnate/once@2.0.0", "", {}, "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A=="],
-
-    "@types/body-parser": ["@types/body-parser@1.19.6", "", { "dependencies": { "@types/connect": "*", "@types/node": "*" } }, "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g=="],
-
-    "@types/caseless": ["@types/caseless@0.12.5", "", {}, "sha512-hWtVTC2q7hc7xZ/RLbxapMvDMgUnDvKvMOpKal4DrMyfGBUfB1oKaZlIRr6mJL+If3bAP6sV/QneGzF6tJjZDg=="],
-
-    "@types/connect": ["@types/connect@3.4.38", "", { "dependencies": { "@types/node": "*" } }, "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug=="],
+    "@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
-    "@types/express": ["@types/express@4.17.25", "", { "dependencies": { "@types/body-parser": "*", "@types/express-serve-static-core": "^4.17.33", "@types/qs": "*", "@types/serve-static": "^1" } }, "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw=="],
-
-    "@types/express-serve-static-core": ["@types/express-serve-static-core@4.19.8", "", { "dependencies": { "@types/node": "*", "@types/qs": "*", "@types/range-parser": "*", "@types/send": "*" } }, "sha512-02S5fmqeoKzVZCHPZid4b8JH2eM5HzQLZWN2FohQEy/0eXTq8VXZfSN6Pcr3F6N9R/vNrj7cpgbhjie6m/1tCA=="],
-
-    "@types/http-errors": ["@types/http-errors@2.0.5", "", {}, "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg=="],
-
-    "@types/jsonwebtoken": ["@types/jsonwebtoken@9.0.10", "", { "dependencies": { "@types/ms": "*", "@types/node": "*" } }, "sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA=="],
-
-    "@types/long": ["@types/long@4.0.2", "", {}, "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="],
-
-    "@types/mime": ["@types/mime@1.3.5", "", {}, "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="],
-
-    "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
-
-    "@types/node": ["@types/node@25.0.9", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-/rpCXHlCWeqClNBwUhDcusJxXYDjZTyE8v5oTO7WbL8eij2nKhUeU89/6xgjU7N4/Vh3He0BtyhJdQbDyhiXAw=="],
-
-    "@types/qs": ["@types/qs@6.14.0", "", {}, "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ=="],
-
-    "@types/range-parser": ["@types/range-parser@1.2.7", "", {}, "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="],
-
-    "@types/request": ["@types/request@2.48.13", "", { "dependencies": { "@types/caseless": "*", "@types/node": "*", "@types/tough-cookie": "*", "form-data": "^2.5.5" } }, "sha512-FGJ6udDNUCjd19pp0Q3iTiDkwhYup7J8hpMW9c4k53NrccQFFWKRho6hvtPPEhnXWKvukfwAlB6DbDz4yhH5Gg=="],
-
-    "@types/send": ["@types/send@0.17.6", "", { "dependencies": { "@types/mime": "^1", "@types/node": "*" } }, "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og=="],
-
-    "@types/serve-static": ["@types/serve-static@1.15.10", "", { "dependencies": { "@types/http-errors": "*", "@types/node": "*", "@types/send": "<1" } }, "sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw=="],
-
-    "@types/tough-cookie": ["@types/tough-cookie@4.0.5", "", {}, "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA=="],
+    "@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="],
 
     "@types/web-bluetooth": ["@types/web-bluetooth@0.0.21", "", {}, "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="],
 
-    "@unhead/vue": ["@unhead/vue@2.1.2", "", { "dependencies": { "hookable": "^6.0.1", "unhead": "2.1.2" }, "peerDependencies": { "vue": ">=3.5.18" } }, "sha512-w5yxH/fkkLWAFAOnMSIbvAikNHYn6pgC7zGF/BasXf+K3CO1cYIPFehYAk5jpcsbiNPMc3goyyw1prGLoyD14g=="],
+    "@unhead/vue": ["@unhead/vue@2.1.12", "", { "dependencies": { "hookable": "^6.0.1", "unhead": "2.1.12" }, "peerDependencies": { "vue": ">=3.5.18" } }, "sha512-zEWqg0nZM8acpuTZE40wkeUl8AhIe0tU0OkilVi1D4fmVjACrwoh5HP6aNqJ8kUnKsoy6D+R3Vi/O+fmdNGO7g=="],
 
-    "@unocss/astro": ["@unocss/astro@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/reset": "66.6.0", "@unocss/vite": "66.6.0" }, "peerDependencies": { "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0" }, "optionalPeers": ["vite"] }, "sha512-HCDgZnoXv6pZGUK9N4ko7ZeBP1YTIP8IFj0Vr7pXVdv9sGR9CofoueFbclTvPQ065UHSsG+WI+JO5z9/BGd5fw=="],
+    "@unocss/cli": ["@unocss/cli@66.6.7", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@unocss/config": "66.6.7", "@unocss/core": "66.6.7", "@unocss/preset-wind3": "66.6.7", "@unocss/preset-wind4": "66.6.7", "@unocss/transformer-directives": "66.6.7", "cac": "^6.7.14", "chokidar": "^5.0.0", "colorette": "^2.0.20", "consola": "^3.4.2", "magic-string": "^0.30.21", "pathe": "^2.0.3", "perfect-debounce": "^2.1.0", "tinyglobby": "^0.2.15", "unplugin-utils": "^0.3.1" }, "bin": { "unocss": "bin/unocss.mjs" } }, "sha512-m/yW5HMVyxfAOeyO4OyA4JB9dY+/gTsk25ucI8xVCFVDEENPEGr+vEqTDOA+vfe6pdURtyDYS7OrhikIRU1WNA=="],
 
-    "@unocss/cli": ["@unocss/cli@66.6.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@unocss/config": "66.6.0", "@unocss/core": "66.6.0", "@unocss/preset-wind3": "66.6.0", "@unocss/preset-wind4": "66.6.0", "@unocss/transformer-directives": "66.6.0", "cac": "^6.7.14", "chokidar": "^5.0.0", "colorette": "^2.0.20", "consola": "^3.4.2", "magic-string": "^0.30.21", "pathe": "^2.0.3", "perfect-debounce": "^2.0.0", "tinyglobby": "^0.2.15", "unplugin-utils": "^0.3.1" }, "bin": { "unocss": "bin/unocss.mjs" } }, "sha512-wtA6YBIvW2f8FISdYS8rx+B3ZGTUjw3YO3Fxz1ApUCHinYSdz8SoNWShH1I61LWbcjJ4hbjI/D9t/Dmgp6vmiQ=="],
+    "@unocss/config": ["@unocss/config@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "colorette": "^2.0.20", "consola": "^3.4.2", "unconfig": "^7.5.0" } }, "sha512-1uleyRLyJc6PNNc2L3hEaKL89zXwvQAtP36oFySgL47RAxZHPZ4vfqFpbwR0eEN4iSqTS24ZFr7CTRWCaEGjzQ=="],
 
-    "@unocss/config": ["@unocss/config@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "unconfig": "^7.4.2" } }, "sha512-YvNk/b9jGmT1TQGDbHR+0VALnTsPLzSTzw90t09ggny9YxeF0XnsP06M5+H0EJPwpmdigBC++KEIMaK8SYDsaQ=="],
+    "@unocss/core": ["@unocss/core@66.6.7", "", {}, "sha512-Q8456iWFtdwrUNYKVOQY8ygRggjZOVtLc6Jc8KIkxig7OiNlUWOgXJTfCh4I8g6jBYzC5eHaHFDLgJOmOrxBsg=="],
 
-    "@unocss/core": ["@unocss/core@66.6.0", "", {}, "sha512-Sxm7HmhsPIIzxbPnWembPyobuCeA5j9KxL+jIOW2c+kZiTFjHeju7vuVWX9jmAMMC+UyDuuCQ4yE+kBo3Y7SWQ=="],
+    "@unocss/extractor-arbitrary-variants": ["@unocss/extractor-arbitrary-variants@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7" } }, "sha512-PQiBHK0yUJ0BR+3GYnTPU6va6HVSRPV+O+s1zZmt23TWbyIeucoKCNR47TDtv+Z1xuksY8krIjtDYtufdrVWKw=="],
 
-    "@unocss/extractor-arbitrary-variants": ["@unocss/extractor-arbitrary-variants@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0" } }, "sha512-AsCmpbre4hQb+cKOf3gHUeYlF7guR/aCKZvw53VBk12qY5wNF7LdfIx4zWc5LFVCoRxIZlU2C7L4/Tt7AkiFMA=="],
+    "@unocss/inspector": ["@unocss/inspector@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/rule-utils": "66.6.7", "colorette": "^2.0.20", "gzip-size": "^6.0.0", "sirv": "^3.0.2" } }, "sha512-4lA70A/wy9dfSDm7rJ5Uq5fKz+/Szm2rUcHjdbLCVNEc6vv2YXeI7aFvP5qDjTp4ClBSF2AMPnF1mtoMQOfDvA=="],
 
-    "@unocss/inspector": ["@unocss/inspector@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/rule-utils": "66.6.0", "colorette": "^2.0.20", "gzip-size": "^6.0.0", "sirv": "^3.0.2", "vue-flow-layout": "^0.2.0" } }, "sha512-BvdY8ah+OTmzFMb+z8RZkaF15+PWRFt9S2bOARkkRBubybX9EE1rxM07l74kO5Dj16++CS4nO15XFq39pPoBvg=="],
+    "@unocss/preset-attributify": ["@unocss/preset-attributify@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7" } }, "sha512-thtoLQb53+Acy2QJYT6n+YhgNJ5ilhS8k9bqi+UzflbsuK4TJqOuQQjC9fRkULP5QjtNxgqN3d5Up7ms8tBPDA=="],
 
-    "@unocss/postcss": ["@unocss/postcss@66.6.0", "", { "dependencies": { "@unocss/config": "66.6.0", "@unocss/core": "66.6.0", "@unocss/rule-utils": "66.6.0", "css-tree": "^3.1.0", "postcss": "^8.5.6", "tinyglobby": "^0.2.15" } }, "sha512-Tn8l8JMXJcTgzrPHSukpRBnVIt561bQCUle7jW8NXk61vYBy8p52nEBkNy5QMXybaCih5ghg2d/+nDIAl9YIpw=="],
+    "@unocss/preset-icons": ["@unocss/preset-icons@66.6.7", "", { "dependencies": { "@iconify/utils": "^3.1.0", "@unocss/core": "66.6.7", "ofetch": "^1.5.1" } }, "sha512-mGAOyI/qz1pZUV1BcOtWAMm5czdFCjhFCYcDk0KY+Jw37pKRVSQRFeh4gpHuYKmehGv36caLyVrWXpTAwRBdFQ=="],
 
-    "@unocss/preset-attributify": ["@unocss/preset-attributify@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0" } }, "sha512-IfGZT9LjQkfpJaVjDtFMxOlrEoj7m1DCztRdby0FaptXChE7vdgRkYFl8HDeXMkEIlzV1YTHuIarwJ+tV+1SRQ=="],
+    "@unocss/preset-mini": ["@unocss/preset-mini@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/extractor-arbitrary-variants": "66.6.7", "@unocss/rule-utils": "66.6.7" } }, "sha512-tf0mqiSEhPQ49WZOqjNhxlbZbNakiBLzCoxfLSzqfIGglOPYShP8mxsdp9Jv0n+Ntn0rHcBiX5KTLfax1/Bd9g=="],
 
-    "@unocss/preset-icons": ["@unocss/preset-icons@66.6.0", "", { "dependencies": { "@iconify/utils": "^3.1.0", "@unocss/core": "66.6.0", "ofetch": "^1.5.1" } }, "sha512-ObgmN9SsqU7TiClNvy+mQDyqzwOhlBXT0whXFp3iiBfSbnxUIDyf4Pr/2hwxnAWrCWCQj7xw2H0Y0sDtXq8XkA=="],
+    "@unocss/preset-tagify": ["@unocss/preset-tagify@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7" } }, "sha512-0WeQf+Dx9Ztv3aewkBKEnAfOauSjvWBlfkpsgLpXcCkyGMnCqq87UrAq3+b76TDJvQc8i2ADlvVGK7V1z0JZQg=="],
 
-    "@unocss/preset-mini": ["@unocss/preset-mini@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/extractor-arbitrary-variants": "66.6.0", "@unocss/rule-utils": "66.6.0" } }, "sha512-8bQyTuMJcry/z4JTDsQokI0187/1CJIkVx9hr9eEbKf/gWti538P8ktKEmHCf8IyT0At5dfP9oLHLCUzVetdbA=="],
+    "@unocss/preset-typography": ["@unocss/preset-typography@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/rule-utils": "66.6.7" } }, "sha512-RA7MwPDD5N9xGrbWnguVm5tP+F4/n/9X1rJsq2nBjvvK2dbtIRJZjRFM1vBDsR0GIhtvbHMoTchZaSZed5I+Hw=="],
 
-    "@unocss/preset-tagify": ["@unocss/preset-tagify@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0" } }, "sha512-Vy9olM61lqTDxcHbfDkIJNp9LF2m8K9I/F2J0diD+BVZgpym1QRK6+aZaeAPJuMCyQrOk87dm7VIiAPFtLOXFA=="],
+    "@unocss/preset-uno": ["@unocss/preset-uno@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/preset-wind3": "66.6.7" } }, "sha512-imGCe6Yv2XgrJxP77gV8WZCz0xL99MsGov5rYn64lh2/tcsHF2rUIhTj/Urgxt0kwk8rLFtGbR1JuwPMNL5EDw=="],
 
-    "@unocss/preset-typography": ["@unocss/preset-typography@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/rule-utils": "66.6.0" } }, "sha512-vDogO+jaatGSAoZqqa9+GJ18WbrwYzJr5UyIFUQqXJ5TUDaWzKb4Qhty2WnOtjQaf4sOMML8JFA/cydZl+Rjjw=="],
+    "@unocss/preset-web-fonts": ["@unocss/preset-web-fonts@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "ofetch": "^1.5.1" } }, "sha512-GLjUoSL/kYt1Yw2zpzixKnxvpHgLHAg0JXiPglct4PZ9YmUzCPbvJ/vVn+0AnB8Fxr29Z8NAFSNoX625ZaRonQ=="],
 
-    "@unocss/preset-uno": ["@unocss/preset-uno@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/preset-wind3": "66.6.0" } }, "sha512-xDppgdgFk+JNrL9jhqhrn6H9IS8P10p1HSsWOYF+9owg43zqpeNpzDMvZGwq8uxq6guyB1fu6l4YzO+bDZnwvw=="],
+    "@unocss/preset-wind": ["@unocss/preset-wind@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/preset-wind3": "66.6.7" } }, "sha512-jxtAN96jljd+KglbhPv6Y/ujceI5rVdrLQimj4KUTPoYBPEiWadzsGKN3o8Q07hlPRg+hBlO0r4tGSUWl+/EZQ=="],
 
-    "@unocss/preset-web-fonts": ["@unocss/preset-web-fonts@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "ofetch": "^1.5.1" } }, "sha512-Mqb8bVSAfDEnkGyAl8ZPdvaojq3YSow4lvxGCOm7nHJFIXkRKgYBgD3tmm+rvO81CUtihZd7hdw0Ay+8pYrlTw=="],
+    "@unocss/preset-wind3": ["@unocss/preset-wind3@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/preset-mini": "66.6.7", "@unocss/rule-utils": "66.6.7" } }, "sha512-PKyqeRzlIMd3Irdt6fCKMm73zgwweiXESk5edUK8dVWndvPIcZCOqrEq7yg6Pr/Q8tHdq26viYSkVY3a3t8RSg=="],
 
-    "@unocss/preset-wind": ["@unocss/preset-wind@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/preset-wind3": "66.6.0" } }, "sha512-6uVq3/gV1MD9ZsycrYLP6OvAS9kI1oGAIuccKKspZHW3jqwEhJmPofDD4pYwbkx4i4zSWzoLakcfp9d67Szjqg=="],
+    "@unocss/preset-wind4": ["@unocss/preset-wind4@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/extractor-arbitrary-variants": "66.6.7", "@unocss/rule-utils": "66.6.7" } }, "sha512-9grhWeBsFzpv8iER9AFATRaxLyXMCwGQ5HzeI4XZh2ZZ9O6vC7nYfGhns4/I+F/RpFglzU1bjqMWRS/DS8OpGQ=="],
 
-    "@unocss/preset-wind3": ["@unocss/preset-wind3@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/preset-mini": "66.6.0", "@unocss/rule-utils": "66.6.0" } }, "sha512-7gzswF810BCSru7pF01BsMzGZbfrsWT5GV6JJLkhROS2pPjeNOpqy2VEfiavv5z09iGSIESeOFMlXr5ORuLZrg=="],
+    "@unocss/rule-utils": ["@unocss/rule-utils@66.6.7", "", { "dependencies": { "@unocss/core": "^66.6.7", "magic-string": "^0.30.21" } }, "sha512-4PT/s8yKIShSqP9XPSw4EjbZopcu3wlIB9i3kbGbzQwF91H+0Yy10guK3kHDGtkmWVN6Np6VvaGIj2UcbmaivA=="],
 
-    "@unocss/preset-wind4": ["@unocss/preset-wind4@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/extractor-arbitrary-variants": "66.6.0", "@unocss/rule-utils": "66.6.0" } }, "sha512-1yyo9fmB+r5C92kSHU7lIaqGJdvz5UQyYZxYDxSmWLAUzWEK5HBRj6OkSF6rUnz+Yd4JvgOgACZNOShVOezPlA=="],
+    "@unocss/transformer-attributify-jsx": ["@unocss/transformer-attributify-jsx@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "oxc-parser": "^0.115.0", "oxc-walker": "^0.7.0" } }, "sha512-r5bsnaPVe4iySLK5G5rA/QPSKmpPjYT9lixEv+KElvZcqZ+cPpkGoo+E+rnTcapu9KDMOVJItH/4Zy9m4AQ1ZQ=="],
 
-    "@unocss/reset": ["@unocss/reset@66.6.0", "", {}, "sha512-OQK5F7Dzx0wWDSPTYEz7NRP9pekufSAkjxfKOyKokiXOUzVTg8Yx8sOvCsA3Oi0Rx5WlsO2LN+MOBekpkrttXg=="],
+    "@unocss/transformer-compile-class": ["@unocss/transformer-compile-class@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7" } }, "sha512-4uz4jCyq8VUaSPveXhelUWUNaTnetPFvEmXzmbYJ5BygAlUlipNynffUlUusDQmBBRrfZhJNB5J1Zif2Q6oUiA=="],
 
-    "@unocss/rule-utils": ["@unocss/rule-utils@66.6.0", "", { "dependencies": { "@unocss/core": "^66.6.0", "magic-string": "^0.30.21" } }, "sha512-v16l6p5VrefDx8P/gzWnp0p6/hCA0vZ4UMUN6SxHGVE6V+IBpX6I6Du3Egk9TdkhZ7o+Pe1NHxksHcjT0V/tww=="],
+    "@unocss/transformer-directives": ["@unocss/transformer-directives@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7", "@unocss/rule-utils": "66.6.7", "css-tree": "^3.1.0" } }, "sha512-z3gi8/cD2P0I+c6jOPZUtsPXknHwVNlMIitSh7LhyM6W3EqbqvDcYH2gFeGhdhoYcN2r5OpTBujq34iz4IdUxA=="],
 
-    "@unocss/transformer-attributify-jsx": ["@unocss/transformer-attributify-jsx@66.6.0", "", { "dependencies": { "@babel/parser": "7.27.7", "@babel/traverse": "7.27.7", "@unocss/core": "66.6.0" } }, "sha512-fzjLVlhYO8JdHzIusRKAva5ZOnA4deOVYuiM6HVpbX7P19479TVHZgeSV+AG0BWLhmIJ2cer+n3/CIO5nodT6g=="],
+    "@unocss/transformer-variant-group": ["@unocss/transformer-variant-group@66.6.7", "", { "dependencies": { "@unocss/core": "66.6.7" } }, "sha512-XouJuQCjYJpvR3sY4QDXnGXxtyJ4qgWFG+S9bAB01TTslhQLvNPE9o2+4gZlltnJLqxiPQWuLeJA1KdPD6ciww=="],
 
-    "@unocss/transformer-compile-class": ["@unocss/transformer-compile-class@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0" } }, "sha512-OkwdbIfsbs8dtHIfBaoya/SPHZUJeogvJl2BpJb4/3nY/tWBZB/+i2vPMAML3D9aQYZAuC7uqcTRGNbuvyyy+w=="],
+    "@unocss/vite": ["@unocss/vite@66.6.7", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@unocss/config": "66.6.7", "@unocss/core": "66.6.7", "@unocss/inspector": "66.6.7", "chokidar": "^5.0.0", "magic-string": "^0.30.21", "pathe": "^2.0.3", "tinyglobby": "^0.2.15", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0" } }, "sha512-8AHrVzAecnQaPLJv3/mpyFt5j2iL3gEwkZcZ8HzjH5ttK2XON1YE9vgujN5NS/yvZwlJxCMNPxn0S410/Ek61A=="],
 
-    "@unocss/transformer-directives": ["@unocss/transformer-directives@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0", "@unocss/rule-utils": "66.6.0", "css-tree": "^3.1.0" } }, "sha512-2Z4FFjJI/bH6kKGuuuO0DpFEVSFOhFnGLTFK8y9BGz0cIOQOIuEKTemM7QLqPuyRSORBO1RKvcKvA3DV0n1X7g=="],
+    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@6.0.5", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.2" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.2.25" } }, "sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg=="],
 
-    "@unocss/transformer-variant-group": ["@unocss/transformer-variant-group@66.6.0", "", { "dependencies": { "@unocss/core": "66.6.0" } }, "sha512-kWYYcrn8ZFKLVCU6kB8yaQY9iYgx3/XhPb9c0XZZ5QzWjoGffrl6XLUk8XrjR/yxC3qwHg/WizzsmsQ2OXF6Qg=="],
+    "@vitejs/plugin-vue-jsx": ["@vitejs/plugin-vue-jsx@5.1.5", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-syntax-typescript": "^7.28.6", "@babel/plugin-transform-typescript": "^7.28.6", "@rolldown/pluginutils": "^1.0.0-rc.2", "@vue/babel-plugin-jsx": "^2.0.1" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.0.0" } }, "sha512-jIAsvHOEtWpslLOI2MeElGFxH7M8pM83BU/Tor4RLyiwH0FM4nUW3xdvbw20EeU9wc5IspQwMq225K3CMnJEpA=="],
 
-    "@unocss/vite": ["@unocss/vite@66.6.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@unocss/config": "66.6.0", "@unocss/core": "66.6.0", "@unocss/inspector": "66.6.0", "chokidar": "^5.0.0", "magic-string": "^0.30.21", "pathe": "^2.0.3", "tinyglobby": "^0.2.15", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0" } }, "sha512-SC0/rX0xSjdu8Jaj98XztHOuvXHWDVk0YaHKRAQks2Oj3yyqAOrhzhDUH0zzFaQWf5bsKVYK40H+h4rMk9vm5Q=="],
-
-    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@6.0.3", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-beta.53" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "vue": "^3.2.25" } }, "sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w=="],
-
-    "@vitejs/plugin-vue-jsx": ["@vitejs/plugin-vue-jsx@5.1.3", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-syntax-typescript": "^7.27.1", "@babel/plugin-transform-typescript": "^7.28.5", "@rolldown/pluginutils": "^1.0.0-beta.56", "@vue/babel-plugin-jsx": "^2.0.1" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "vue": "^3.0.0" } }, "sha512-I6Zr8cYVr5WHMW5gNOP09DNqW9rgO8RX73Wa6Czgq/0ndpTfJM4vfDChfOT1+3KtdrNqilNBtNlFwVeB02ZzGw=="],
+    "@vue-macros/common": ["@vue-macros/common@3.1.2", "", { "dependencies": { "@vue/compiler-sfc": "^3.5.22", "ast-kit": "^2.1.2", "local-pkg": "^1.1.2", "magic-string-ast": "^1.0.2", "unplugin-utils": "^0.3.0" }, "peerDependencies": { "vue": "^2.7.0 || ^3.2.25" }, "optionalPeers": ["vue"] }, "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng=="],
 
     "@vue/babel-helper-vue-transform-on": ["@vue/babel-helper-vue-transform-on@2.0.1", "", {}, "sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA=="],
 
@@ -740,13 +322,13 @@
 
     "@vue/babel-plugin-resolve-type": ["@vue/babel-plugin-resolve-type@2.0.1", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/helper-module-imports": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "@babel/parser": "^7.28.4", "@vue/compiler-sfc": "^3.5.22" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ=="],
 
-    "@vue/compiler-core": ["@vue/compiler-core@3.5.26", "", { "dependencies": { "@babel/parser": "^7.28.5", "@vue/shared": "3.5.26", "entities": "^7.0.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-vXyI5GMfuoBCnv5ucIT7jhHKl55Y477yxP6fc4eUswjP8FG3FFVFd41eNDArR+Uk3QKn2Z85NavjaxLxOC19/w=="],
+    "@vue/compiler-core": ["@vue/compiler-core@3.5.31", "", { "dependencies": { "@babel/parser": "^7.29.2", "@vue/shared": "3.5.31", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-k/ueL14aNIEy5Onf0OVzR8kiqF/WThgLdFhxwa4e/KF/0qe38IwIdofoSWBTvvxQOesaz6riAFAUaYjoF9fLLQ=="],
 
-    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.26", "", { "dependencies": { "@vue/compiler-core": "3.5.26", "@vue/shared": "3.5.26" } }, "sha512-y1Tcd3eXs834QjswshSilCBnKGeQjQXB6PqFn/1nxcQw4pmG42G8lwz+FZPAZAby6gZeHSt/8LMPfZ4Rb+Bd/A=="],
+    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.31", "", { "dependencies": { "@vue/compiler-core": "3.5.31", "@vue/shared": "3.5.31" } }, "sha512-BMY/ozS/xxjYqRFL+tKdRpATJYDTTgWSo0+AJvJNg4ig+Hgb0dOsHPXvloHQ5hmlivUqw1Yt2pPIqp4e0v1GUw=="],
 
-    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.26", "", { "dependencies": { "@babel/parser": "^7.28.5", "@vue/compiler-core": "3.5.26", "@vue/compiler-dom": "3.5.26", "@vue/compiler-ssr": "3.5.26", "@vue/shared": "3.5.26", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.6", "source-map-js": "^1.2.1" } }, "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA=="],
+    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.31", "", { "dependencies": { "@babel/parser": "^7.29.2", "@vue/compiler-core": "3.5.31", "@vue/compiler-dom": "3.5.31", "@vue/compiler-ssr": "3.5.31", "@vue/shared": "3.5.31", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.8", "source-map-js": "^1.2.1" } }, "sha512-M8wpPgR9UJ8MiRGjppvx9uWJfLV7A/T+/rL8s/y3QG3u0c2/YZgff3d6SuimKRIhcYnWg5fTfDMlz2E6seUW8Q=="],
 
-    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.26", "", { "dependencies": { "@vue/compiler-dom": "3.5.26", "@vue/shared": "3.5.26" } }, "sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw=="],
+    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.31", "", { "dependencies": { "@vue/compiler-dom": "3.5.31", "@vue/shared": "3.5.31" } }, "sha512-h0xIMxrt/LHOvJKMri+vdYT92BrK3HFLtDqq9Pr/lVVfE4IyKZKvWf0vJFW10Yr6nX02OR4MkJwI0c1HDa1hog=="],
 
     "@vue/devtools-api": ["@vue/devtools-api@7.7.9", "", { "dependencies": { "@vue/devtools-kit": "^7.7.9" } }, "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g=="],
 
@@ -754,61 +336,55 @@
 
     "@vue/devtools-shared": ["@vue/devtools-shared@7.7.9", "", { "dependencies": { "rfdc": "^1.4.1" } }, "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA=="],
 
-    "@vue/reactivity": ["@vue/reactivity@3.5.26", "", { "dependencies": { "@vue/shared": "3.5.26" } }, "sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ=="],
+    "@vue/reactivity": ["@vue/reactivity@3.5.31", "", { "dependencies": { "@vue/shared": "3.5.31" } }, "sha512-DtKXxk9E/KuVvt8VxWu+6Luc9I9ETNcqR1T1oW1gf02nXaZ1kuAx58oVu7uX9XxJR0iJCro6fqBLw9oSBELo5g=="],
 
-    "@vue/runtime-core": ["@vue/runtime-core@3.5.26", "", { "dependencies": { "@vue/reactivity": "3.5.26", "@vue/shared": "3.5.26" } }, "sha512-xJWM9KH1kd201w5DvMDOwDHYhrdPTrAatn56oB/LRG4plEQeZRQLw0Bpwih9KYoqmzaxF0OKSn6swzYi84e1/Q=="],
+    "@vue/runtime-core": ["@vue/runtime-core@3.5.31", "", { "dependencies": { "@vue/reactivity": "3.5.31", "@vue/shared": "3.5.31" } }, "sha512-AZPmIHXEAyhpkmN7aWlqjSfYynmkWlluDNPHMCZKFHH+lLtxP/30UJmoVhXmbDoP1Ng0jG0fyY2zCj1PnSSA6Q=="],
 
-    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.26", "", { "dependencies": { "@vue/reactivity": "3.5.26", "@vue/runtime-core": "3.5.26", "@vue/shared": "3.5.26", "csstype": "^3.2.3" } }, "sha512-XLLd/+4sPC2ZkN/6+V4O4gjJu6kSDbHAChvsyWgm1oGbdSO3efvGYnm25yCjtFm/K7rrSDvSfPDgN1pHgS4VNQ=="],
+    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.31", "", { "dependencies": { "@vue/reactivity": "3.5.31", "@vue/runtime-core": "3.5.31", "@vue/shared": "3.5.31", "csstype": "^3.2.3" } }, "sha512-xQJsNRmGPeDCJq/u813tyonNgWBFjzfVkBwDREdEWndBnGdHLHgkwNBQxLtg4zDrzKTEcnikUy1UUNecb3lJ6g=="],
 
-    "@vue/server-renderer": ["@vue/server-renderer@3.5.26", "", { "dependencies": { "@vue/compiler-ssr": "3.5.26", "@vue/shared": "3.5.26" }, "peerDependencies": { "vue": "3.5.26" } }, "sha512-TYKLXmrwWKSodyVuO1WAubucd+1XlLg4set0YoV+Hu8Lo79mp/YMwWV5mC5FgtsDxX3qo1ONrxFaTP1OQgy1uA=="],
+    "@vue/server-renderer": ["@vue/server-renderer@3.5.31", "", { "dependencies": { "@vue/compiler-ssr": "3.5.31", "@vue/shared": "3.5.31" }, "peerDependencies": { "vue": "3.5.31" } }, "sha512-GJuwRvMcdZX/CriUnyIIOGkx3rMV3H6sOu0JhdKbduaeCji6zb60iOGMY7tFoN24NfsUYoFBhshZtGxGpxO4iA=="],
 
-    "@vue/shared": ["@vue/shared@3.5.26", "", {}, "sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A=="],
+    "@vue/shared": ["@vue/shared@3.5.31", "", {}, "sha512-nBxuiuS9Lj5bPkPbWogPUnjxxWpkRniX7e5UBQDWl6Fsf4roq9wwV+cR7ezQ4zXswNvPIlsdj1slcLB7XCsRAw=="],
 
-    "@vueuse/core": ["@vueuse/core@14.1.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.1.0", "@vueuse/shared": "14.1.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw=="],
+    "@vueuse/core": ["@vueuse/core@14.2.1", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.2.1", "@vueuse/shared": "14.2.1" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ=="],
 
-    "@vueuse/metadata": ["@vueuse/metadata@14.1.0", "", {}, "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA=="],
+    "@vueuse/metadata": ["@vueuse/metadata@14.2.1", "", {}, "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw=="],
 
-    "@vueuse/shared": ["@vueuse/shared@14.1.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw=="],
+    "@vueuse/shared": ["@vueuse/shared@14.2.1", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw=="],
 
-    "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
+    "@whatwg-node/fetch": ["@whatwg-node/fetch@0.9.23", "", { "dependencies": { "@whatwg-node/node-fetch": "^0.6.0", "urlpattern-polyfill": "^10.0.0" } }, "sha512-7xlqWel9JsmxahJnYVUj/LLxWcnA93DR4c9xlw3U814jWTiYalryiH1qToik1hOxweKKRLi4haXHM5ycRksPBA=="],
 
-    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
+    "@whatwg-node/node-fetch": ["@whatwg-node/node-fetch@0.6.0", "", { "dependencies": { "@kamilkisiela/fast-url-parser": "^1.1.4", "busboy": "^1.6.0", "fast-querystring": "^1.1.1", "tslib": "^2.6.3" } }, "sha512-tcZAhrpx6oVlkEsRngeTEEE7I5/QdLjeEz4IlekabGaESP7+Dkm/6a9KcF1KdCBB7mO9PXtBkwCuTCt8+UPg8Q=="],
 
-    "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
+    "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
 
     "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
-    "arrify": ["arrify@2.0.1", "", {}, "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug=="],
+    "ast-kit": ["ast-kit@2.2.0", "", { "dependencies": { "@babel/parser": "^7.28.5", "pathe": "^2.0.3" } }, "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw=="],
 
-    "async-retry": ["async-retry@1.3.3", "", { "dependencies": { "retry": "0.13.1" } }, "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw=="],
+    "ast-walker-scope": ["ast-walker-scope@0.8.3", "", { "dependencies": { "@babel/parser": "^7.28.4", "ast-kit": "^2.1.3" } }, "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg=="],
 
-    "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
+    "aws4fetch": ["aws4fetch@1.0.20", "", {}, "sha512-/djoAN709iY65ETD6LKCtyyEI04XIBP5xVvfmNxsEP0uJB5tyaGBztSryRr4HqMStr9R06PisQE7m9zDTXKu6g=="],
 
-    "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
-
-    "baseline-browser-mapping": ["baseline-browser-mapping@2.9.14", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg=="],
-
-    "bignumber.js": ["bignumber.js@9.3.1", "", {}, "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ=="],
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.10", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-sUoJ3IMxx4AyRqO4MLeHlnGDkyXRoUG0/AI9fjK+vS72ekpV0yWVY7O0BVjmBcRtkNcsAO2QDZ4tdKKGoI6YaQ=="],
 
     "birpc": ["birpc@2.9.0", "", {}, "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw=="],
 
-    "blake3-wasm": ["blake3-wasm@2.1.5", "", {}, "sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g=="],
-
-    "bowser": ["bowser@2.13.1", "", {}, "sha512-OHawaAbjwx6rqICCKgSG0SAnT05bzd7ppyKLVUITZpANBaaMFBAsaNkto3LoQ31tyFP5kNujE8Cdx85G9VzOkw=="],
-
     "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
 
-    "buffer-equal-constant-time": ["buffer-equal-constant-time@1.0.1", "", {}, "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="],
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "busboy": ["busboy@1.6.0", "", { "dependencies": { "streamsearch": "^1.1.0" } }, "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA=="],
 
     "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
 
-    "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001781", "", {}, "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001764", "", {}, "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g=="],
+    "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
 
-    "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
 
     "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
 
@@ -820,19 +396,17 @@
 
     "colorette": ["colorette@2.0.20", "", {}, "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="],
 
-    "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
-
-    "confbox": ["confbox@0.2.2", "", {}, "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ=="],
+    "confbox": ["confbox@0.2.4", "", {}, "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ=="],
 
     "consola": ["consola@3.4.2", "", {}, "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="],
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
-    "cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],
-
     "copy-anything": ["copy-anything@4.0.5", "", { "dependencies": { "is-what": "^5.2.0" } }, "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA=="],
 
-    "css-tree": ["css-tree@3.1.0", "", { "dependencies": { "mdn-data": "2.12.2", "source-map-js": "^1.0.1" } }, "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w=="],
+    "cross-fetch": ["cross-fetch@4.1.0", "", { "dependencies": { "node-fetch": "^2.7.0" } }, "sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw=="],
+
+    "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="],
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
@@ -840,39 +414,17 @@
 
     "defu": ["defu@6.1.4", "", {}, "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="],
 
-    "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
-
     "destr": ["destr@2.0.5", "", {}, "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="],
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
-    "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
-
     "duplexer": ["duplexer@0.1.2", "", {}, "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="],
 
-    "duplexify": ["duplexify@4.1.3", "", { "dependencies": { "end-of-stream": "^1.4.1", "inherits": "^2.0.3", "readable-stream": "^3.1.1", "stream-shift": "^1.0.2" } }, "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA=="],
-
-    "ecdsa-sig-formatter": ["ecdsa-sig-formatter@1.0.11", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ=="],
-
-    "electron-to-chromium": ["electron-to-chromium@1.5.267", "", {}, "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.323", "", {}, "sha512-oQm+FxbazvN2WICCbvJgj3IYPKV8awip57+W5VP+Aatk4kFU4pDYCPHZOX22Z27zpw8uttBehEqgK+VTJAYrVw=="],
 
     "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "end-of-stream": ["end-of-stream@1.4.5", "", { "dependencies": { "once": "^1.4.0" } }, "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg=="],
-
-    "entities": ["entities@7.0.0", "", {}, "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ=="],
-
-    "error-stack-parser-es": ["error-stack-parser-es@1.0.5", "", {}, "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA=="],
-
-    "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
-
-    "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
-
-    "es-object-atoms": ["es-object-atoms@1.1.1", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA=="],
-
-    "es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
-
-    "esbuild": ["esbuild@0.27.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.2", "@esbuild/android-arm": "0.27.2", "@esbuild/android-arm64": "0.27.2", "@esbuild/android-x64": "0.27.2", "@esbuild/darwin-arm64": "0.27.2", "@esbuild/darwin-x64": "0.27.2", "@esbuild/freebsd-arm64": "0.27.2", "@esbuild/freebsd-x64": "0.27.2", "@esbuild/linux-arm": "0.27.2", "@esbuild/linux-arm64": "0.27.2", "@esbuild/linux-ia32": "0.27.2", "@esbuild/linux-loong64": "0.27.2", "@esbuild/linux-mips64el": "0.27.2", "@esbuild/linux-ppc64": "0.27.2", "@esbuild/linux-riscv64": "0.27.2", "@esbuild/linux-s390x": "0.27.2", "@esbuild/linux-x64": "0.27.2", "@esbuild/netbsd-arm64": "0.27.2", "@esbuild/netbsd-x64": "0.27.2", "@esbuild/openbsd-arm64": "0.27.2", "@esbuild/openbsd-x64": "0.27.2", "@esbuild/openharmony-arm64": "0.27.2", "@esbuild/sunos-x64": "0.27.2", "@esbuild/win32-arm64": "0.27.2", "@esbuild/win32-ia32": "0.27.2", "@esbuild/win32-x64": "0.27.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw=="],
+    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
@@ -880,259 +432,169 @@
 
     "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
-    "event-target-shim": ["event-target-shim@5.0.1", "", {}, "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="],
-
     "exsolve": ["exsolve@1.0.8", "", {}, "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA=="],
 
-    "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
+    "fast-decode-uri-component": ["fast-decode-uri-component@1.0.1", "", {}, "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg=="],
 
-    "farmhash-modern": ["farmhash-modern@1.1.0", "", {}, "sha512-6ypT4XfgqJk/F3Yuv4SX26I3doUjt0GTG4a+JgWxXQpxXzTBq8fPUeGHfcYMMDPHJHm3yPOSjaeBwBGAHWXCdA=="],
-
-    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
-
-    "fast-xml-parser": ["fast-xml-parser@4.5.3", "", { "dependencies": { "strnum": "^1.1.1" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-RKihhV+SHsIUGXObeVy9AXiBbFwkVk7Syp8XgwN5U3JV416+Gwp/GO9i0JYKmikykgz/UHRrrV4ROuZEo/T0ig=="],
-
-    "faye-websocket": ["faye-websocket@0.11.4", "", { "dependencies": { "websocket-driver": ">=0.5.1" } }, "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g=="],
+    "fast-querystring": ["fast-querystring@1.1.2", "", { "dependencies": { "fast-decode-uri-component": "^1.0.1" } }, "sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg=="],
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
-    "firebase": ["firebase@12.8.0", "", { "dependencies": { "@firebase/ai": "2.7.0", "@firebase/analytics": "0.10.19", "@firebase/analytics-compat": "0.2.25", "@firebase/app": "0.14.7", "@firebase/app-check": "0.11.0", "@firebase/app-check-compat": "0.4.0", "@firebase/app-compat": "0.5.7", "@firebase/app-types": "0.9.3", "@firebase/auth": "1.12.0", "@firebase/auth-compat": "0.6.2", "@firebase/data-connect": "0.3.12", "@firebase/database": "1.1.0", "@firebase/database-compat": "2.1.0", "@firebase/firestore": "4.10.0", "@firebase/firestore-compat": "0.4.4", "@firebase/functions": "0.13.1", "@firebase/functions-compat": "0.4.1", "@firebase/installations": "0.6.19", "@firebase/installations-compat": "0.2.19", "@firebase/messaging": "0.12.23", "@firebase/messaging-compat": "0.2.23", "@firebase/performance": "0.7.9", "@firebase/performance-compat": "0.2.22", "@firebase/remote-config": "0.8.0", "@firebase/remote-config-compat": "0.2.21", "@firebase/storage": "0.14.0", "@firebase/storage-compat": "0.4.0", "@firebase/util": "1.13.0" } }, "sha512-S1tCIR3ENecee0tY2cfTHfMkXqkitHfbsvqpCtvsT0Zi9vDB7A4CodAjHfHCjVvu/XtGy1LHLjOasVcF10rCVw=="],
-
-    "firebase-admin": ["firebase-admin@13.6.0", "", { "dependencies": { "@fastify/busboy": "^3.0.0", "@firebase/database-compat": "^2.0.0", "@firebase/database-types": "^1.0.6", "@types/node": "^22.8.7", "farmhash-modern": "^1.1.0", "fast-deep-equal": "^3.1.1", "google-auth-library": "^9.14.2", "jsonwebtoken": "^9.0.0", "jwks-rsa": "^3.1.0", "node-forge": "^1.3.1", "uuid": "^11.0.2" }, "optionalDependencies": { "@google-cloud/firestore": "^7.11.0", "@google-cloud/storage": "^7.14.0" } }, "sha512-GdPA/t0+Cq8p1JnjFRBmxRxAGvF/kl2yfdhALl38PrRp325YxyQ5aNaHui0XmaKcKiGRFIJ/EgBNWFoDP0onjw=="],
-
-    "form-data": ["form-data@2.5.5", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "hasown": "^2.0.2", "mime-types": "^2.1.35", "safe-buffer": "^5.2.1" } }, "sha512-jqdObeR2rxZZbPSGL+3VckHMYtu+f9//KXBsVny6JSX/pa38Fy+bGjuG8eW/H6USNQWhLi8Num++cU2yOCNz4A=="],
-
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
-    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
-
-    "functional-red-black-tree": ["functional-red-black-tree@1.0.1", "", {}, "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g=="],
-
-    "gaxios": ["gaxios@6.7.1", "", { "dependencies": { "extend": "^3.0.2", "https-proxy-agent": "^7.0.1", "is-stream": "^2.0.0", "node-fetch": "^2.6.9", "uuid": "^9.0.1" } }, "sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ=="],
-
-    "gcp-metadata": ["gcp-metadata@6.1.1", "", { "dependencies": { "gaxios": "^6.1.1", "google-logging-utils": "^0.0.2", "json-bigint": "^1.0.0" } }, "sha512-a4tiq7E0/5fTjxPAaH4jpjkSv/uCaU2p5KC6HVGrvl0cDjA8iBZv4vv1gyzlmK0ZUKqwpOyQMKzZQe3lTit77A=="],
-
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
 
     "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
 
-    "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
-
-    "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
-
-    "globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],
-
-    "google-auth-library": ["google-auth-library@9.15.1", "", { "dependencies": { "base64-js": "^1.3.0", "ecdsa-sig-formatter": "^1.0.11", "gaxios": "^6.1.1", "gcp-metadata": "^6.1.0", "gtoken": "^7.0.0", "jws": "^4.0.0" } }, "sha512-Jb6Z0+nvECVz+2lzSMt9u98UsoakXxA2HGHMCxh+so3n90XgYWkq5dur19JAJV7ONiJY22yBTyJB1TSkvPq9Ng=="],
-
-    "google-gax": ["google-gax@4.6.1", "", { "dependencies": { "@grpc/grpc-js": "^1.10.9", "@grpc/proto-loader": "^0.7.13", "@types/long": "^4.0.0", "abort-controller": "^3.0.0", "duplexify": "^4.0.0", "google-auth-library": "^9.3.0", "node-fetch": "^2.7.0", "object-hash": "^3.0.0", "proto3-json-serializer": "^2.0.2", "protobufjs": "^7.3.2", "retry-request": "^7.0.0", "uuid": "^9.0.1" } }, "sha512-V6eky/xz2mcKfAd1Ioxyd6nmA61gao3n01C+YeuIwu3vzM9EDR6wcVzMSIbLMDXWeoi9SHYctXuKYC5uJUT3eQ=="],
-
-    "google-logging-utils": ["google-logging-utils@0.0.2", "", {}, "sha512-NEgUnEcBiP5HrPzufUkBzJOD/Sxsco3rLNo1F1TNf7ieU8ryUzBhqba8r756CjLX7rn3fHl6iLEwPYuqpoKgQQ=="],
-
-    "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
-
-    "gtoken": ["gtoken@7.1.0", "", { "dependencies": { "gaxios": "^6.0.0", "jws": "^4.0.0" } }, "sha512-pCcEwRi+TKpMlxAQObHDQ56KawURgyAf6jtIY046fJ5tIv3zDe/LEIubckAO8fj6JnAxLdmWkUfNyulQ2iKdEw=="],
-
     "gzip-size": ["gzip-size@6.0.0", "", { "dependencies": { "duplexer": "^0.1.2" } }, "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q=="],
 
-    "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
+    "hono": ["hono@4.12.9", "", {}, "sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA=="],
 
-    "has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],
+    "hookable": ["hookable@6.1.0", "", {}, "sha512-ZoKZSJgu8voGK2geJS+6YtYjvIzu9AOM/KZXsBxr83uhLL++e9pEv/dlgwgy3dvHg06kTz6JOh1hk3C8Ceiymw=="],
 
-    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
+    "i18next": ["i18next@26.0.3", "", { "dependencies": { "@babel/runtime": "^7.29.2" }, "peerDependencies": { "typescript": "^5 || ^6" }, "optionalPeers": ["typescript"] }, "sha512-1571kXINxHKY7LksWp8wP+zP0YqHSSpl/OW0Y0owFEf2H3s8gCAffWaZivcz14rMkOvn3R/psiQxVsR9t2Nafg=="],
 
-    "hono": ["hono@4.11.4", "", {}, "sha512-U7tt8JsyrxSRKspfhtLET79pU8K+tInj5QZXs1jSugO1Vq5dFj3kmZsRldo29mTBfcjDRVRXrEZ6LS63Cog9ZA=="],
+    "i18next-http-backend": ["i18next-http-backend@3.0.4", "", { "dependencies": { "cross-fetch": "4.1.0" } }, "sha512-udwrBIE6cNpqn1gRAqRULq3+7MzIIuaiKRWrz++dVz5SqWW2VwXmPJtAgkI0JtMLFaADC9qNmnZAxWAhsxXx2g=="],
 
-    "hookable": ["hookable@6.0.1", "", {}, "sha512-uKGyY8BuzN/a5gvzvA+3FVWo0+wUjgtfSdnmjtrOVwQCZPHpHDH2WRO3VZSOeluYrHoDCiXFffZXs8Dj1ULWtw=="],
-
-    "html-entities": ["html-entities@2.6.0", "", {}, "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ=="],
-
-    "http-parser-js": ["http-parser-js@0.5.10", "", {}, "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA=="],
-
-    "http-proxy-agent": ["http-proxy-agent@5.0.0", "", { "dependencies": { "@tootallnate/once": "2", "agent-base": "6", "debug": "4" } }, "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w=="],
-
-    "https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
-
-    "idb": ["idb@7.1.1", "", {}, "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="],
-
-    "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
+    "i18next-vue": ["i18next-vue@5.4.0", "", { "peerDependencies": { "i18next": ">=23", "vue": "^3.4.38" } }, "sha512-GDj0Xvmis5Xgcvo9gMBJMgJCtewYMLZP6gAEPDDGCMjA+QeB4uS4qUf1MK79mkz/FukhaJdC+nlj0y1qk6NO2Q=="],
 
     "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
 
     "is-mobile": ["is-mobile@5.0.0", "", {}, "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ=="],
 
-    "is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
-
     "is-what": ["is-what@5.5.0", "", {}, "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw=="],
 
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
-    "jose": ["jose@4.15.9", "", {}, "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA=="],
-
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
-    "json-bigint": ["json-bigint@1.0.0", "", { "dependencies": { "bignumber.js": "^9.0.0" } }, "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ=="],
-
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
-    "jsonwebtoken": ["jsonwebtoken@9.0.3", "", { "dependencies": { "jws": "^4.0.1", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g=="],
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
 
-    "jwa": ["jwa@2.0.1", "", { "dependencies": { "buffer-equal-constant-time": "^1.0.1", "ecdsa-sig-formatter": "1.0.11", "safe-buffer": "^5.0.1" } }, "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg=="],
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
 
-    "jwks-rsa": ["jwks-rsa@3.2.0", "", { "dependencies": { "@types/express": "^4.17.20", "@types/jsonwebtoken": "^9.0.4", "debug": "^4.3.4", "jose": "^4.15.4", "limiter": "^1.1.5", "lru-memoizer": "^2.2.0" } }, "sha512-PwchfHcQK/5PSydeKCs1ylNym0w/SSv8a62DgHJ//7x2ZclCoinlsjAfDxAAbpoTPybOum/Jgy+vkvMmKz89Ww=="],
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
 
-    "jws": ["jws@4.0.1", "", { "dependencies": { "jwa": "^2.0.1", "safe-buffer": "^5.0.1" } }, "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA=="],
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
 
-    "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
 
-    "limiter": ["limiter@1.1.5", "", {}, "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="],
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
 
     "local-pkg": ["local-pkg@1.1.2", "", { "dependencies": { "mlly": "^1.7.4", "pkg-types": "^2.3.0", "quansync": "^0.2.11" } }, "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A=="],
 
     "lodash.camelcase": ["lodash.camelcase@4.3.0", "", {}, "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="],
 
-    "lodash.clonedeep": ["lodash.clonedeep@4.5.0", "", {}, "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="],
-
-    "lodash.includes": ["lodash.includes@4.3.0", "", {}, "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="],
-
-    "lodash.isboolean": ["lodash.isboolean@3.0.3", "", {}, "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="],
-
-    "lodash.isinteger": ["lodash.isinteger@4.0.4", "", {}, "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="],
-
-    "lodash.isnumber": ["lodash.isnumber@3.0.3", "", {}, "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="],
-
-    "lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],
-
-    "lodash.isstring": ["lodash.isstring@4.0.1", "", {}, "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="],
-
-    "lodash.once": ["lodash.once@4.1.1", "", {}, "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="],
-
     "long": ["long@5.3.2", "", {}, "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="],
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
-    "lru-memoizer": ["lru-memoizer@2.3.0", "", { "dependencies": { "lodash.clonedeep": "^4.5.0", "lru-cache": "6.0.0" } }, "sha512-GXn7gyHAMhO13WSKrIiNfztwxodVsP8IoZ3XfrJV4yH2x0/OeTO/FIaAHTY5YekdGgW94njfuKmyyt1E0mR6Ug=="],
+    "magic-regexp": ["magic-regexp@0.10.0", "", { "dependencies": { "estree-walker": "^3.0.3", "magic-string": "^0.30.12", "mlly": "^1.7.2", "regexp-tree": "^0.1.27", "type-level-regexp": "~0.1.17", "ufo": "^1.5.4", "unplugin": "^2.0.0" } }, "sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg=="],
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
-    "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
+    "magic-string-ast": ["magic-string-ast@1.0.3", "", { "dependencies": { "magic-string": "^0.30.19" } }, "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA=="],
 
-    "mdn-data": ["mdn-data@2.12.2", "", {}, "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="],
-
-    "mime": ["mime@3.0.0", "", { "bin": { "mime": "cli.js" } }, "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A=="],
+    "mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="],
 
     "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
 
     "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
-    "miniflare": ["miniflare@4.20260114.0", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "sharp": "^0.34.5", "undici": "7.14.0", "workerd": "1.20260114.0", "ws": "8.18.0", "youch": "4.1.0-beta.10", "zod": "^3.25.76" }, "bin": { "miniflare": "bootstrap.js" } }, "sha512-QwHT7S6XqGdQxIvql1uirH/7/i3zDEt0B/YBXTYzMfJtVCR4+ue3KPkU+Bl0zMxvpgkvjh9+eCHhJbKEqya70A=="],
-
     "mitt": ["mitt@3.0.1", "", {}, "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="],
 
-    "mlly": ["mlly@1.8.0", "", { "dependencies": { "acorn": "^8.15.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.1" } }, "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g=="],
+    "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="],
 
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
+    "muggle-string": ["muggle-string@0.4.1", "", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
+
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "node-fetch": ["node-fetch@2.7.0", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="],
 
     "node-fetch-native": ["node-fetch-native@1.6.7", "", {}, "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="],
 
-    "node-forge": ["node-forge@1.3.3", "", {}, "sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg=="],
+    "node-releases": ["node-releases@2.0.36", "", {}, "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA=="],
 
-    "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
-
-    "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
+    "obug": ["obug@2.1.1", "", {}, "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ=="],
 
     "ofetch": ["ofetch@1.5.1", "", { "dependencies": { "destr": "^2.0.5", "node-fetch-native": "^1.6.7", "ufo": "^1.6.1" } }, "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA=="],
 
-    "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
+    "oxc-parser": ["oxc-parser@0.115.0", "", { "dependencies": { "@oxc-project/types": "^0.115.0" }, "optionalDependencies": { "@oxc-parser/binding-android-arm-eabi": "0.115.0", "@oxc-parser/binding-android-arm64": "0.115.0", "@oxc-parser/binding-darwin-arm64": "0.115.0", "@oxc-parser/binding-darwin-x64": "0.115.0", "@oxc-parser/binding-freebsd-x64": "0.115.0", "@oxc-parser/binding-linux-arm-gnueabihf": "0.115.0", "@oxc-parser/binding-linux-arm-musleabihf": "0.115.0", "@oxc-parser/binding-linux-arm64-gnu": "0.115.0", "@oxc-parser/binding-linux-arm64-musl": "0.115.0", "@oxc-parser/binding-linux-ppc64-gnu": "0.115.0", "@oxc-parser/binding-linux-riscv64-gnu": "0.115.0", "@oxc-parser/binding-linux-riscv64-musl": "0.115.0", "@oxc-parser/binding-linux-s390x-gnu": "0.115.0", "@oxc-parser/binding-linux-x64-gnu": "0.115.0", "@oxc-parser/binding-linux-x64-musl": "0.115.0", "@oxc-parser/binding-openharmony-arm64": "0.115.0", "@oxc-parser/binding-wasm32-wasi": "0.115.0", "@oxc-parser/binding-win32-arm64-msvc": "0.115.0", "@oxc-parser/binding-win32-ia32-msvc": "0.115.0", "@oxc-parser/binding-win32-x64-msvc": "0.115.0" } }, "sha512-2w7Xn3CbS/zwzSY82S5WLemrRu3CT57uF7Lx8llrE/2bul6iMTcJE4Rbls7GDNbLn3ttATI68PfOz2Pt3KZ2cQ=="],
 
-    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+    "oxc-walker": ["oxc-walker@0.7.0", "", { "dependencies": { "magic-regexp": "^0.10.0" }, "peerDependencies": { "oxc-parser": ">=0.98.0" } }, "sha512-54B4KUhrzbzc4sKvKwVYm7E2PgeROpGba0/2nlNZMqfDyca+yOor5IMb4WLGBatGDT0nkzYdYuzylg7n3YfB7A=="],
 
     "package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="],
 
-    "path-to-regexp": ["path-to-regexp@6.3.0", "", {}, "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ=="],
-
     "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
 
-    "perfect-debounce": ["perfect-debounce@2.0.0", "", {}, "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow=="],
+    "perfect-debounce": ["perfect-debounce@2.1.0", "", {}, "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g=="],
 
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
-    "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
+    "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
 
     "pinia": ["pinia@3.0.4", "", { "dependencies": { "@vue/devtools-api": "^7.7.7" }, "peerDependencies": { "typescript": ">=4.5.0", "vue": "^3.5.11" }, "optionalPeers": ["typescript"] }, "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw=="],
 
     "pkg-types": ["pkg-types@2.3.0", "", { "dependencies": { "confbox": "^0.2.2", "exsolve": "^1.0.7", "pathe": "^2.0.3" } }, "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig=="],
 
-    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
-
-    "primevue": ["primevue@4.5.4", "", { "dependencies": { "@primeuix/styled": "^0.7.4", "@primeuix/styles": "^2.0.2", "@primeuix/utils": "^0.6.2", "@primevue/core": "4.5.4", "@primevue/icons": "4.5.4" } }, "sha512-nTyEohZABFJhVIpeUxgP0EJ8vKcJAhD+Z7DYj95e7ie/MNUCjRNcGjqmE1cXtXi4z54qDfTSI9h2uJ51qz2DIw=="],
-
-    "proto3-json-serializer": ["proto3-json-serializer@2.0.2", "", { "dependencies": { "protobufjs": "^7.2.5" } }, "sha512-SAzp/O4Yh02jGdRc+uIrGoe87dkN/XtwxfZ4ZyafJHymd79ozp5VG5nyZ7ygqPM5+cpLDjjGnYFUkngonyDPOQ=="],
+    "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
 
     "protobufjs": ["protobufjs@7.5.4", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.2", "@protobufjs/base64": "^1.1.2", "@protobufjs/codegen": "^2.0.4", "@protobufjs/eventemitter": "^1.1.0", "@protobufjs/fetch": "^1.1.0", "@protobufjs/float": "^1.0.2", "@protobufjs/inquire": "^1.1.0", "@protobufjs/path": "^1.1.2", "@protobufjs/pool": "^1.1.0", "@protobufjs/utf8": "^1.1.0", "@types/node": ">=13.7.0", "long": "^5.0.0" } }, "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg=="],
 
     "quansync": ["quansync@0.2.11", "", {}, "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA=="],
 
-    "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
+    "readdirp": ["readdirp@5.0.0", "", {}, "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="],
 
-    "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
+    "regexp-tree": ["regexp-tree@0.1.27", "", { "bin": { "regexp-tree": "bin/regexp-tree" } }, "sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA=="],
 
     "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
 
-    "retry": ["retry@0.13.1", "", {}, "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="],
-
-    "retry-request": ["retry-request@7.0.2", "", { "dependencies": { "@types/request": "^2.48.8", "extend": "^3.0.2", "teeny-request": "^9.0.0" } }, "sha512-dUOvLMJ0/JJYEn8NrpOaGNE7X3vpI5XlZS/u0ANjqtcZVKnIxP7IgCFwrKTxENw29emmwug53awKtaMm4i9g5w=="],
-
     "rfdc": ["rfdc@1.4.1", "", {}, "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="],
 
-    "rollup": ["rollup@4.55.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.55.1", "@rollup/rollup-android-arm64": "4.55.1", "@rollup/rollup-darwin-arm64": "4.55.1", "@rollup/rollup-darwin-x64": "4.55.1", "@rollup/rollup-freebsd-arm64": "4.55.1", "@rollup/rollup-freebsd-x64": "4.55.1", "@rollup/rollup-linux-arm-gnueabihf": "4.55.1", "@rollup/rollup-linux-arm-musleabihf": "4.55.1", "@rollup/rollup-linux-arm64-gnu": "4.55.1", "@rollup/rollup-linux-arm64-musl": "4.55.1", "@rollup/rollup-linux-loong64-gnu": "4.55.1", "@rollup/rollup-linux-loong64-musl": "4.55.1", "@rollup/rollup-linux-ppc64-gnu": "4.55.1", "@rollup/rollup-linux-ppc64-musl": "4.55.1", "@rollup/rollup-linux-riscv64-gnu": "4.55.1", "@rollup/rollup-linux-riscv64-musl": "4.55.1", "@rollup/rollup-linux-s390x-gnu": "4.55.1", "@rollup/rollup-linux-x64-gnu": "4.55.1", "@rollup/rollup-linux-x64-musl": "4.55.1", "@rollup/rollup-openbsd-x64": "4.55.1", "@rollup/rollup-openharmony-arm64": "4.55.1", "@rollup/rollup-win32-arm64-msvc": "4.55.1", "@rollup/rollup-win32-ia32-msvc": "4.55.1", "@rollup/rollup-win32-x64-gnu": "4.55.1", "@rollup/rollup-win32-x64-msvc": "4.55.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A=="],
-
-    "safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
+    "rolldown": ["rolldown@1.0.0-rc.12", "", { "dependencies": { "@oxc-project/types": "=0.122.0", "@rolldown/pluginutils": "1.0.0-rc.12" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-x64": "1.0.0-rc.12", "@rolldown/binding-freebsd-x64": "1.0.0-rc.12", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A=="],
 
     "scule": ["scule@1.3.0", "", {}, "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
-    "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
-
     "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "speakingurl": ["speakingurl@14.0.1", "", {}, "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ=="],
 
-    "stream-events": ["stream-events@1.0.5", "", { "dependencies": { "stubs": "^3.0.0" } }, "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg=="],
-
-    "stream-shift": ["stream-shift@1.0.3", "", {}, "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ=="],
+    "streamsearch": ["streamsearch@1.1.0", "", {}, "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="],
 
     "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
-    "string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
-
     "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
     "strip-literal": ["strip-literal@3.1.0", "", { "dependencies": { "js-tokens": "^9.0.1" } }, "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg=="],
 
-    "strnum": ["strnum@1.1.2", "", {}, "sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA=="],
-
-    "stubs": ["stubs@3.0.0", "", {}, "sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw=="],
-
     "superjson": ["superjson@2.2.6", "", { "dependencies": { "copy-anything": "^4" } }, "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA=="],
 
-    "supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
+    "tailwind-merge": ["tailwind-merge@3.5.0", "", {}, "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A=="],
 
-    "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
-
-    "teeny-request": ["teeny-request@9.0.0", "", { "dependencies": { "http-proxy-agent": "^5.0.0", "https-proxy-agent": "^5.0.0", "node-fetch": "^2.6.9", "stream-events": "^1.0.5", "uuid": "^9.0.0" } }, "sha512-resvxdc6Mgb7YEThw6G6bExlXKkv6+YbuzGg9xuXxSgxJF7Ozs+o8Y9+2R3sArdWdW8nOokoQb1yrpFB0pQK2g=="],
-
-    "tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="],
+    "tinyexec": ["tinyexec@1.0.4", "", {}, "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw=="],
 
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
 
@@ -1142,113 +604,73 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tweetnacl": ["tweetnacl@1.0.3", "", {}, "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="],
+
+    "type-level-regexp": ["type-level-regexp@0.1.17", "", {}, "sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg=="],
+
     "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
 
-    "unconfig": ["unconfig@7.4.2", "", { "dependencies": { "@quansync/fs": "^1.0.0", "defu": "^6.1.4", "jiti": "^2.6.1", "quansync": "^1.0.0", "unconfig-core": "7.4.2" } }, "sha512-nrMlWRQ1xdTjSnSUqvYqJzbTBFugoqHobQj58B2bc8qxHKBBHMNNsWQFP3Cd3/JZK907voM2geYPWqD4VK3MPQ=="],
+    "unconfig": ["unconfig@7.5.0", "", { "dependencies": { "@quansync/fs": "^1.0.0", "defu": "^6.1.4", "jiti": "^2.6.1", "quansync": "^1.0.0", "unconfig-core": "7.5.0" } }, "sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA=="],
 
-    "unconfig-core": ["unconfig-core@7.4.2", "", { "dependencies": { "@quansync/fs": "^1.0.0", "quansync": "^1.0.0" } }, "sha512-VgPCvLWugINbXvMQDf8Jh0mlbvNjNC6eSUziHsBCMpxR05OPrNrvDnyatdMjRgcHaaNsCqz+wjNXxNw1kRLHUg=="],
+    "unconfig-core": ["unconfig-core@7.5.0", "", { "dependencies": { "@quansync/fs": "^1.0.0", "quansync": "^1.0.0" } }, "sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w=="],
 
-    "undici": ["undici@7.14.0", "", {}, "sha512-Vqs8HTzjpQXZeXdpsfChQTlafcMQaaIwnGwLam1wudSSjlJeQ3bw1j+TLPePgrCnCpUXx7Ba5Pdpf5OBih62NQ=="],
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
 
-    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+    "unhead": ["unhead@2.1.12", "", { "dependencies": { "hookable": "^6.0.1" } }, "sha512-iTHdWD9ztTunOErtfUFk6Wr11BxvzumcYJ0CzaSCBUOEtg+DUZ9+gnE99i8QkLFT2q1rZD48BYYGXpOZVDLYkA=="],
 
-    "unenv": ["unenv@2.0.0-rc.24", "", { "dependencies": { "pathe": "^2.0.3" } }, "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw=="],
+    "unimport": ["unimport@5.7.0", "", { "dependencies": { "acorn": "^8.16.0", "escape-string-regexp": "^5.0.0", "estree-walker": "^3.0.3", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.0", "pathe": "^2.0.3", "picomatch": "^4.0.3", "pkg-types": "^2.3.0", "scule": "^1.3.0", "strip-literal": "^3.1.0", "tinyglobby": "^0.2.15", "unplugin": "^2.3.11", "unplugin-utils": "^0.3.1" } }, "sha512-njnL6sp8lEA8QQbZrt+52p/g4X0rw3bnGGmUcJnt1jeG8+iiqO779aGz0PirCtydAIVcuTBRlJ52F0u46z309Q=="],
 
-    "unhead": ["unhead@2.1.2", "", { "dependencies": { "hookable": "^6.0.1" } }, "sha512-vSihrxyb+zsEUfEbraZBCjdE0p/WSoc2NGDrpwwSNAwuPxhYK1nH3eegf02IENLpn1sUhL8IoO84JWmRQ6tILA=="],
-
-    "unimport": ["unimport@5.6.0", "", { "dependencies": { "acorn": "^8.15.0", "escape-string-regexp": "^5.0.0", "estree-walker": "^3.0.3", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.0", "pathe": "^2.0.3", "picomatch": "^4.0.3", "pkg-types": "^2.3.0", "scule": "^1.3.0", "strip-literal": "^3.1.0", "tinyglobby": "^0.2.15", "unplugin": "^2.3.11", "unplugin-utils": "^0.3.1" } }, "sha512-8rqAmtJV8o60x46kBAJKtHpJDJWkA2xcBqWKPI14MgUb05o1pnpnCnXSxedUXyeq7p8fR5g3pTo2BaswZ9lD9A=="],
-
-    "unocss": ["unocss@66.6.0", "", { "dependencies": { "@unocss/astro": "66.6.0", "@unocss/cli": "66.6.0", "@unocss/core": "66.6.0", "@unocss/postcss": "66.6.0", "@unocss/preset-attributify": "66.6.0", "@unocss/preset-icons": "66.6.0", "@unocss/preset-mini": "66.6.0", "@unocss/preset-tagify": "66.6.0", "@unocss/preset-typography": "66.6.0", "@unocss/preset-uno": "66.6.0", "@unocss/preset-web-fonts": "66.6.0", "@unocss/preset-wind": "66.6.0", "@unocss/preset-wind3": "66.6.0", "@unocss/preset-wind4": "66.6.0", "@unocss/transformer-attributify-jsx": "66.6.0", "@unocss/transformer-compile-class": "66.6.0", "@unocss/transformer-directives": "66.6.0", "@unocss/transformer-variant-group": "66.6.0", "@unocss/vite": "66.6.0" }, "peerDependencies": { "@unocss/webpack": "66.6.0", "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0" }, "optionalPeers": ["@unocss/webpack", "vite"] }, "sha512-B5QsMJzFKeTHPzF5Ehr8tSMuhxzbCR9n+XP0GyhK9/2jTcBdI0/T+rCDDr9m6vUz+lku/coCVz7VAQ2BRAbZJw=="],
+    "unocss": ["unocss@66.6.7", "", { "dependencies": { "@unocss/cli": "66.6.7", "@unocss/core": "66.6.7", "@unocss/preset-attributify": "66.6.7", "@unocss/preset-icons": "66.6.7", "@unocss/preset-mini": "66.6.7", "@unocss/preset-tagify": "66.6.7", "@unocss/preset-typography": "66.6.7", "@unocss/preset-uno": "66.6.7", "@unocss/preset-web-fonts": "66.6.7", "@unocss/preset-wind": "66.6.7", "@unocss/preset-wind3": "66.6.7", "@unocss/preset-wind4": "66.6.7", "@unocss/transformer-attributify-jsx": "66.6.7", "@unocss/transformer-compile-class": "66.6.7", "@unocss/transformer-directives": "66.6.7", "@unocss/transformer-variant-group": "66.6.7", "@unocss/vite": "66.6.7" }, "peerDependencies": { "@unocss/astro": "66.6.7", "@unocss/postcss": "66.6.7", "@unocss/webpack": "66.6.7" }, "optionalPeers": ["@unocss/astro", "@unocss/postcss", "@unocss/webpack"] }, "sha512-TdZ/JnKhrqkknrMvLl0KOwrGzFThEspFIyYiylFYJki2JkMN/5EJIr+vIZEGRX69hFTjTLi6utIpbipueqzNbw=="],
 
     "unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],
 
-    "unplugin-auto-import": ["unplugin-auto-import@20.3.0", "", { "dependencies": { "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "picomatch": "^4.0.3", "unimport": "^5.5.0", "unplugin": "^2.3.11", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@nuxt/kit": "^4.0.0", "@vueuse/core": "*" }, "optionalPeers": ["@nuxt/kit", "@vueuse/core"] }, "sha512-RcSEQiVv7g0mLMMXibYVKk8mpteKxvyffGuDKqZZiFr7Oq3PB1HwgHdK5O7H4AzbhzHoVKG0NnMnsk/1HIVYzQ=="],
+    "unplugin-auto-import": ["unplugin-auto-import@21.0.0", "", { "dependencies": { "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "picomatch": "^4.0.3", "unimport": "^5.6.0", "unplugin": "^2.3.11", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@nuxt/kit": "^4.0.0", "@vueuse/core": "*" }, "optionalPeers": ["@nuxt/kit", "@vueuse/core"] }, "sha512-vWuC8SwqJmxZFYwPojhOhOXDb5xFhNNcEVb9K/RFkyk/3VnfaOjzitWN7v+8DEKpMjSsY2AEGXNgt6I0yQrhRQ=="],
 
     "unplugin-utils": ["unplugin-utils@0.3.1", "", { "dependencies": { "pathe": "^2.0.3", "picomatch": "^4.0.3" } }, "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog=="],
 
-    "unplugin-vue-components": ["unplugin-vue-components@30.0.0", "", { "dependencies": { "chokidar": "^4.0.3", "debug": "^4.4.3", "local-pkg": "^1.1.2", "magic-string": "^0.30.19", "mlly": "^1.8.0", "tinyglobby": "^0.2.15", "unplugin": "^2.3.10", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@babel/parser": "^7.15.8", "@nuxt/kit": "^3.2.2 || ^4.0.0", "vue": "2 || 3" }, "optionalPeers": ["@babel/parser", "@nuxt/kit"] }, "sha512-4qVE/lwCgmdPTp6h0qsRN2u642tt4boBQtcpn4wQcWZAsr8TQwq+SPT3NDu/6kBFxzo/sSEK4ioXhOOBrXc3iw=="],
+    "unplugin-vue-components": ["unplugin-vue-components@32.0.0", "", { "dependencies": { "chokidar": "^5.0.0", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.2", "obug": "^2.1.1", "picomatch": "^4.0.3", "tinyglobby": "^0.2.15", "unplugin": "^3.0.0", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@nuxt/kit": "^3.2.2 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@nuxt/kit"] }, "sha512-uLdccgS7mf3pv1bCCP20y/hm+u1eOjAmygVkh+Oa70MPkzgl1eQv1L0CwdHNM3gscO8/GDMGIET98Ja47CBbZg=="],
 
     "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
 
-    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+    "urlpattern-polyfill": ["urlpattern-polyfill@10.1.0", "", {}, "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw=="],
 
-    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
-
-    "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
+    "vite": ["vite@8.0.3", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.12", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ=="],
 
     "vite-ssr-components": ["vite-ssr-components@0.5.2", "", { "dependencies": { "@babel/parser": "^7.27.2", "@babel/traverse": "^7.27.1", "picomatch": "^4.0.2" } }, "sha512-1a8YThRwyyu1gGjc1Ral9Q4uS+n0D4GydhbkVd9c1SA1YNgXyrOizttped87C1ItEznQzhiCyQjaOcYnXa0zMA=="],
 
-    "vue": ["vue@3.5.26", "", { "dependencies": { "@vue/compiler-dom": "3.5.26", "@vue/compiler-sfc": "3.5.26", "@vue/runtime-dom": "3.5.26", "@vue/server-renderer": "3.5.26", "@vue/shared": "3.5.26" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA=="],
+    "vue": ["vue@3.5.31", "", { "dependencies": { "@vue/compiler-dom": "3.5.31", "@vue/compiler-sfc": "3.5.31", "@vue/runtime-dom": "3.5.31", "@vue/server-renderer": "3.5.31", "@vue/shared": "3.5.31" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q=="],
 
-    "vue-flow-layout": ["vue-flow-layout@0.2.0", "", {}, "sha512-zKgsWWkXq0xrus7H4Mc+uFs1ESrmdTXlO0YNbR6wMdPaFvosL3fMB8N7uTV308UhGy9UvTrGhIY7mVz9eN+L0Q=="],
-
-    "vue-router": ["vue-router@4.6.4", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg=="],
-
-    "web-vitals": ["web-vitals@4.2.4", "", {}, "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="],
+    "vue-router": ["vue-router@5.0.4", "", { "dependencies": { "@babel/generator": "^7.28.6", "@vue-macros/common": "^3.1.1", "@vue/devtools-api": "^8.0.6", "ast-walker-scope": "^0.8.3", "chokidar": "^5.0.0", "json5": "^2.2.3", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.0", "muggle-string": "^0.4.1", "pathe": "^2.0.3", "picomatch": "^4.0.3", "scule": "^1.3.0", "tinyglobby": "^0.2.15", "unplugin": "^3.0.0", "unplugin-utils": "^0.3.1", "yaml": "^2.8.2" }, "peerDependencies": { "@pinia/colada": ">=0.21.2", "@vue/compiler-sfc": "^3.5.17", "pinia": "^3.0.4", "vue": "^3.5.0" }, "optionalPeers": ["@pinia/colada", "@vue/compiler-sfc", "pinia"] }, "sha512-lCqDLCI2+fKVRl2OzXuzdSWmxXFLQRxQbmHugnRpTMyYiT+hNaycV0faqG5FBHDXoYrZ6MQcX87BvbY8mQ20Bg=="],
 
     "webidl-conversions": ["webidl-conversions@3.0.1", "", {}, "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="],
 
     "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
 
-    "websocket-driver": ["websocket-driver@0.7.4", "", { "dependencies": { "http-parser-js": ">=0.5.1", "safe-buffer": ">=5.1.0", "websocket-extensions": ">=0.1.1" } }, "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg=="],
-
-    "websocket-extensions": ["websocket-extensions@0.1.4", "", {}, "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="],
-
     "whatwg-url": ["whatwg-url@5.0.0", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="],
 
-    "workerd": ["workerd@1.20260114.0", "", { "optionalDependencies": { "@cloudflare/workerd-darwin-64": "1.20260114.0", "@cloudflare/workerd-darwin-arm64": "1.20260114.0", "@cloudflare/workerd-linux-64": "1.20260114.0", "@cloudflare/workerd-linux-arm64": "1.20260114.0", "@cloudflare/workerd-windows-64": "1.20260114.0" }, "bin": { "workerd": "bin/workerd" } }, "sha512-kTJ+jNdIllOzWuVA3NRQRvywP0T135zdCjAE2dAUY1BFbxM6fmMZV8BbskEoQ4hAODVQUfZQmyGctcwvVCKxFA=="],
-
-    "wrangler": ["wrangler@4.59.2", "", { "dependencies": { "@cloudflare/kv-asset-handler": "0.4.2", "@cloudflare/unenv-preset": "2.10.0", "blake3-wasm": "2.1.5", "esbuild": "0.27.0", "miniflare": "4.20260114.0", "path-to-regexp": "6.3.0", "unenv": "2.0.0-rc.24", "workerd": "1.20260114.0" }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@cloudflare/workers-types": "^4.20260114.0" }, "optionalPeers": ["@cloudflare/workers-types"], "bin": { "wrangler": "bin/wrangler.js", "wrangler2": "bin/wrangler.js" } }, "sha512-Z4xn6jFZTaugcOKz42xvRAYKgkVUERHVbuCJ5+f+gK+R6k12L02unakPGOA0L0ejhUl16dqDjKe4tmL9sedHcw=="],
-
     "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
-    "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],
-
-    "ws": ["ws@8.18.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw=="],
-
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
+    "yaml": ["yaml@2.8.3", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg=="],
+
     "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
 
     "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
 
-    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
-
-    "youch": ["youch@4.1.0-beta.10", "", { "dependencies": { "@poppinss/colors": "^4.1.5", "@poppinss/dumper": "^0.6.4", "@speed-highlight/core": "^1.2.7", "cookie": "^1.0.2", "youch-core": "^0.3.3" } }, "sha512-rLfVLB4FgQneDr0dv1oddCVZmKjcJ6yX6mS4pU82Mq/Dt9a3cLZQ62pDBL4AUO+uVrCvtWz3ZFUL2HFAFJ/BXQ=="],
-
-    "youch-core": ["youch-core@0.3.3", "", { "dependencies": { "@poppinss/exception": "^1.2.2", "error-stack-parser-es": "^1.0.5" } }, "sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA=="],
-
-    "zod": ["zod@4.3.5", "", {}, "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g=="],
-
-    "@aws-crypto/sha1-browser/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="],
-
-    "@aws-crypto/sha256-browser/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="],
-
-    "@aws-crypto/util/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="],
-
-    "@aws-sdk/xml-builder/fast-xml-parser": ["fast-xml-parser@5.2.5", "", { "dependencies": { "strnum": "^2.1.0" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-pfX9uG9Ki0yekDHx2SiuRIyFdyAr1kMIMitPvb0YBo8SUfKvia7w7FIyd/l6av85pFYRhZscS75MwMnbvY+hcQ=="],
-
-    "@babel/generator/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
-
-    "@google-cloud/storage/uuid": ["uuid@8.3.2", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="],
-
-    "@jridgewell/gen-mapping/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
-
-    "@jridgewell/remapping/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+    "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
     "@quansync/fs/quansync": ["quansync@1.0.0", "", {}, "sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA=="],
 
-    "@unocss/cli/chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
+    "@vitejs/plugin-vue-jsx/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.11", "", {}, "sha512-xQO9vbwBecJRv9EUcQ/y0dzSTJgA7Q6UVN7xp6B81+tBGSLVAK03yJ9NkJaUA7JFD91kbjxRSC/mDnmvXzbHoQ=="],
 
-    "@unocss/transformer-attributify-jsx/@babel/parser": ["@babel/parser@7.27.7", "", { "dependencies": { "@babel/types": "^7.27.7" }, "bin": "./bin/babel-parser.js" }, "sha512-qnzXzDXdr/po3bOTbTIQZ7+TxNKxpkN5IifVLXS+r7qwynkZfPyjZfE7hCXbo7IoO9TNcSyibgONsf2HauUd3Q=="],
+    "@vue-macros/common/@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/compiler-core": "3.5.30", "@vue/compiler-dom": "3.5.30", "@vue/compiler-ssr": "3.5.30", "@vue/shared": "3.5.30", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.8", "source-map-js": "^1.2.1" } }, "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A=="],
 
-    "@unocss/transformer-attributify-jsx/@babel/traverse": ["@babel/traverse@7.27.7", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.27.5", "@babel/parser": "^7.27.7", "@babel/template": "^7.27.2", "@babel/types": "^7.27.7", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-X6ZlfR/O/s5EQ/SnUSLzr+6kGnkg8HXGMzpgsMsrJVcfDtH1vIp6ctCN4eZ1LS5c0+te5Cb6Y514fASjMRJ1nw=="],
+    "@vue/babel-plugin-jsx/@vue/shared": ["@vue/shared@3.5.30", "", {}, "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ=="],
 
-    "@unocss/vite/chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
-
-    "@vitejs/plugin-vue-jsx/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.9-commit.d91dfb5", "", {}, "sha512-8sExkWRK+zVybw3+2/kBkYBFeLnEUWz1fT7BLHplpzmtqkOfTbAQ9gkt4pzwGIIZmg4Qn5US5ACjUBenrhezwQ=="],
+    "@vue/babel-plugin-resolve-type/@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/compiler-core": "3.5.30", "@vue/compiler-dom": "3.5.30", "@vue/compiler-ssr": "3.5.30", "@vue/shared": "3.5.30", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.8", "source-map-js": "^1.2.1" } }, "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A=="],
 
     "@vue/compiler-core/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
@@ -1258,120 +680,50 @@
 
     "@vue/devtools-kit/perfect-debounce": ["perfect-debounce@1.0.0", "", {}, "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="],
 
-    "firebase-admin/@types/node": ["@types/node@22.19.7", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw=="],
-
-    "gaxios/uuid": ["uuid@9.0.1", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="],
-
-    "google-gax/@grpc/grpc-js": ["@grpc/grpc-js@1.14.3", "", { "dependencies": { "@grpc/proto-loader": "^0.8.0", "@js-sdsl/ordered-map": "^4.4.2" } }, "sha512-Iq8QQQ/7X3Sac15oB6p0FmUg/klxQvXLeileoqrTRGJYLV+/9tubbr9ipz0GKHjmXVsgFPo/+W+2cA8eNcR+XA=="],
-
-    "google-gax/uuid": ["uuid@9.0.1", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="],
-
-    "http-proxy-agent/agent-base": ["agent-base@6.0.2", "", { "dependencies": { "debug": "4" } }, "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ=="],
-
-    "jsonwebtoken/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
-
-    "lru-memoizer/lru-cache": ["lru-cache@6.0.0", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="],
-
-    "miniflare/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
-
     "mlly/pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
 
-    "sharp/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
+    "oxc-parser/@oxc-project/types": ["@oxc-project/types@0.115.0", "", {}, "sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw=="],
+
+    "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.12", "", {}, "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw=="],
 
     "strip-literal/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="],
 
-    "teeny-request/https-proxy-agent": ["https-proxy-agent@5.0.1", "", { "dependencies": { "agent-base": "6", "debug": "4" } }, "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA=="],
-
-    "teeny-request/uuid": ["uuid@9.0.1", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="],
-
     "unconfig/quansync": ["quansync@1.0.0", "", {}, "sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA=="],
 
     "unconfig-core/quansync": ["quansync@1.0.0", "", {}, "sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA=="],
 
-    "vue-router/@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
+    "unplugin-vue-components/unplugin": ["unplugin@3.0.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg=="],
 
-    "wrangler/esbuild": ["esbuild@0.27.0", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.0", "@esbuild/android-arm": "0.27.0", "@esbuild/android-arm64": "0.27.0", "@esbuild/android-x64": "0.27.0", "@esbuild/darwin-arm64": "0.27.0", "@esbuild/darwin-x64": "0.27.0", "@esbuild/freebsd-arm64": "0.27.0", "@esbuild/freebsd-x64": "0.27.0", "@esbuild/linux-arm": "0.27.0", "@esbuild/linux-arm64": "0.27.0", "@esbuild/linux-ia32": "0.27.0", "@esbuild/linux-loong64": "0.27.0", "@esbuild/linux-mips64el": "0.27.0", "@esbuild/linux-ppc64": "0.27.0", "@esbuild/linux-riscv64": "0.27.0", "@esbuild/linux-s390x": "0.27.0", "@esbuild/linux-x64": "0.27.0", "@esbuild/netbsd-arm64": "0.27.0", "@esbuild/netbsd-x64": "0.27.0", "@esbuild/openbsd-arm64": "0.27.0", "@esbuild/openbsd-x64": "0.27.0", "@esbuild/openharmony-arm64": "0.27.0", "@esbuild/sunos-x64": "0.27.0", "@esbuild/win32-arm64": "0.27.0", "@esbuild/win32-ia32": "0.27.0", "@esbuild/win32-x64": "0.27.0" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA=="],
+    "vue-router/@vue/devtools-api": ["@vue/devtools-api@8.1.1", "", { "dependencies": { "@vue/devtools-kit": "^8.1.1" } }, "sha512-bsDMJ07b3GN1puVwJb/fyFnj/U2imyswK5UQVLZwVl7O05jDrt6BHxeG5XffmOOdasOj/bOmIjxJvGPxU7pcqw=="],
 
-    "@aws-crypto/sha1-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="],
+    "vue-router/unplugin": ["unplugin@3.0.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg=="],
 
-    "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="],
+    "@vue-macros/common/@vue/compiler-sfc/@vue/compiler-core": ["@vue/compiler-core@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/shared": "3.5.30", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw=="],
 
-    "@aws-crypto/util/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="],
+    "@vue-macros/common/@vue/compiler-sfc/@vue/compiler-dom": ["@vue/compiler-dom@3.5.30", "", { "dependencies": { "@vue/compiler-core": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g=="],
 
-    "@aws-sdk/xml-builder/fast-xml-parser/strnum": ["strnum@2.1.2", "", {}, "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ=="],
+    "@vue-macros/common/@vue/compiler-sfc/@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.30", "", { "dependencies": { "@vue/compiler-dom": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA=="],
 
-    "@unocss/cli/chokidar/readdirp": ["readdirp@5.0.0", "", {}, "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="],
+    "@vue-macros/common/@vue/compiler-sfc/@vue/shared": ["@vue/shared@3.5.30", "", {}, "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ=="],
 
-    "@unocss/transformer-attributify-jsx/@babel/traverse/@babel/parser": ["@babel/parser@7.28.6", "", { "dependencies": { "@babel/types": "^7.28.6" }, "bin": "./bin/babel-parser.js" }, "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ=="],
+    "@vue-macros/common/@vue/compiler-sfc/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
-    "@unocss/vite/chokidar/readdirp": ["readdirp@5.0.0", "", {}, "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="],
+    "@vue/babel-plugin-resolve-type/@vue/compiler-sfc/@vue/compiler-core": ["@vue/compiler-core@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/shared": "3.5.30", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw=="],
 
-    "firebase-admin/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+    "@vue/babel-plugin-resolve-type/@vue/compiler-sfc/@vue/compiler-dom": ["@vue/compiler-dom@3.5.30", "", { "dependencies": { "@vue/compiler-core": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g=="],
 
-    "google-gax/@grpc/grpc-js/@grpc/proto-loader": ["@grpc/proto-loader@0.8.0", "", { "dependencies": { "lodash.camelcase": "^4.3.0", "long": "^5.0.0", "protobufjs": "^7.5.3", "yargs": "^17.7.2" }, "bin": { "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js" } }, "sha512-rc1hOQtjIWGxcxpb9aHAfLpIctjEnsDehj0DAiVfBlmT84uvR0uUtN2hEi/ecvWVjXUGf5qPF4qEgiLOx1YIMQ=="],
+    "@vue/babel-plugin-resolve-type/@vue/compiler-sfc/@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.30", "", { "dependencies": { "@vue/compiler-dom": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA=="],
 
-    "lru-memoizer/lru-cache/yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
+    "@vue/babel-plugin-resolve-type/@vue/compiler-sfc/@vue/shared": ["@vue/shared@3.5.30", "", {}, "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ=="],
+
+    "@vue/babel-plugin-resolve-type/@vue/compiler-sfc/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
     "mlly/pkg-types/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
 
-    "teeny-request/https-proxy-agent/agent-base": ["agent-base@6.0.2", "", { "dependencies": { "debug": "4" } }, "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ=="],
+    "vue-router/@vue/devtools-api/@vue/devtools-kit": ["@vue/devtools-kit@8.1.1", "", { "dependencies": { "@vue/devtools-shared": "^8.1.1", "birpc": "^2.6.1", "hookable": "^5.5.3", "perfect-debounce": "^2.0.0" } }, "sha512-gVBaBv++i+adg4JpH71k9ppl4soyR7Y2McEqO5YNgv0BI1kMZ7BDX5gnwkZ5COYgiCyhejZG+yGNrBAjj6Coqg=="],
 
-    "wrangler/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.0", "", { "os": "aix", "cpu": "ppc64" }, "sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A=="],
+    "vue-router/@vue/devtools-api/@vue/devtools-kit/@vue/devtools-shared": ["@vue/devtools-shared@8.1.1", "", {}, "sha512-+h4ttmJYl/txpxHKaoZcaKpC+pvckgLzIDiSQlaQ7kKthKh8KuwoLW2D8hPJEnqKzXOvu15UHEoGyngAXCz0EQ=="],
 
-    "wrangler/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.27.0", "", { "os": "android", "cpu": "arm" }, "sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ=="],
-
-    "wrangler/esbuild/@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.0", "", { "os": "android", "cpu": "arm64" }, "sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ=="],
-
-    "wrangler/esbuild/@esbuild/android-x64": ["@esbuild/android-x64@0.27.0", "", { "os": "android", "cpu": "x64" }, "sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q=="],
-
-    "wrangler/esbuild/@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg=="],
-
-    "wrangler/esbuild/@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g=="],
-
-    "wrangler/esbuild/@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw=="],
-
-    "wrangler/esbuild/@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g=="],
-
-    "wrangler/esbuild/@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.0", "", { "os": "linux", "cpu": "arm" }, "sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ=="],
-
-    "wrangler/esbuild/@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ=="],
-
-    "wrangler/esbuild/@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.0", "", { "os": "linux", "cpu": "ia32" }, "sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw=="],
-
-    "wrangler/esbuild/@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.0", "", { "os": "linux", "cpu": "none" }, "sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg=="],
-
-    "wrangler/esbuild/@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.0", "", { "os": "linux", "cpu": "none" }, "sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg=="],
-
-    "wrangler/esbuild/@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA=="],
-
-    "wrangler/esbuild/@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.0", "", { "os": "linux", "cpu": "none" }, "sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ=="],
-
-    "wrangler/esbuild/@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w=="],
-
-    "wrangler/esbuild/@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.0", "", { "os": "linux", "cpu": "x64" }, "sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw=="],
-
-    "wrangler/esbuild/@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.0", "", { "os": "none", "cpu": "arm64" }, "sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w=="],
-
-    "wrangler/esbuild/@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.0", "", { "os": "none", "cpu": "x64" }, "sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA=="],
-
-    "wrangler/esbuild/@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.0", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ=="],
-
-    "wrangler/esbuild/@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.0", "", { "os": "openbsd", "cpu": "x64" }, "sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A=="],
-
-    "wrangler/esbuild/@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.0", "", { "os": "none", "cpu": "arm64" }, "sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA=="],
-
-    "wrangler/esbuild/@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.0", "", { "os": "sunos", "cpu": "x64" }, "sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA=="],
-
-    "wrangler/esbuild/@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg=="],
-
-    "wrangler/esbuild/@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ=="],
-
-    "wrangler/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.0", "", { "os": "win32", "cpu": "x64" }, "sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg=="],
-
-    "@aws-crypto/sha1-browser/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="],
-
-    "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="],
-
-    "@aws-crypto/util/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="],
+    "vue-router/@vue/devtools-api/@vue/devtools-kit/hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
   }
 }
diff --git a/components.d.ts b/components.d.ts
index 1956eda..6f7f8d8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,61 +12,187 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ActivityIcon: typeof import('./src/components/icons/ActivityIcon.vue')['default']
     Add: typeof import('./src/components/icons/Add.vue')['default']
-    AddFilled: typeof import('./src/components/icons/AddFilled.vue')['default']
+    AdvertisementIcon: typeof import('./src/components/icons/AdvertisementIcon.vue')['default']
+    AlertTriangle: typeof import('./src/components/icons/AlertTriangle.vue')['default']
+    AlertTriangleIcon: typeof import('./src/components/icons/AlertTriangleIcon.vue')['default']
+    AppButton: typeof import('./src/components/ui/AppButton.vue')['default']
+    AppConfirmHost: typeof import('./src/components/ui/AppConfirmHost.vue')['default']
+    AppDialog: typeof import('./src/components/ui/AppDialog.vue')['default']
+    AppInput: typeof import('./src/components/ui/AppInput.vue')['default']
+    AppProgressBar: typeof import('./src/components/ui/AppProgressBar.vue')['default']
+    AppSwitch: typeof import('./src/components/ui/AppSwitch.vue')['default']
+    AppToastHost: typeof import('./src/components/ui/AppToastHost.vue')['default']
+    AppTopLoadingBar: typeof import('./src/components/AppTopLoadingBar.vue')['default']
+    ArrowDownTray: typeof import('./src/components/icons/ArrowDownTray.vue')['default']
+    ArrowRightIcon: typeof import('./src/components/icons/ArrowRightIcon.vue')['default']
+    AsyncSelect: typeof import('./src/components/ui/AsyncSelect.vue')['default']
+    BaseTable: typeof import('./src/components/ui/BaseTable.vue')['default']
     Bell: typeof import('./src/components/icons/Bell.vue')['default']
-    BellFilled: typeof import('./src/components/icons/BellFilled.vue')['default']
-    Button: typeof import('primevue/button')['default']
-    Checkbox: typeof import('primevue/checkbox')['default']
+    BellDot: typeof import('./src/components/icons/BellDot.vue')['default']
+    BellOff: typeof import('./src/components/icons/BellOff.vue')['default']
+    Chart: typeof import('./src/components/icons/Chart.vue')['default']
+    CheckCircleIcon: typeof import('./src/components/icons/CheckCircleIcon.vue')['default']
     CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
+    CheckMarkIcon: typeof import('./src/components/icons/CheckMarkIcon.vue')['default']
+    ClientOnly: typeof import('./src/components/ClientOnly.tsx')['default']
+    CoinsIcon: typeof import('./src/components/icons/CoinsIcon.vue')['default']
+    copy: typeof import('./src/components/icons/UserIcon copy.vue')['default']
     Credit: typeof import('./src/components/icons/Credit.vue')['default']
+    CreditCardIcon: typeof import('./src/components/icons/CreditCardIcon.vue')['default']
     DashboardLayout: typeof import('./src/components/DashboardLayout.vue')['default']
+    DashboardNav: typeof import('./src/components/DashboardNav.vue')['default']
+    DownloadIcon: typeof import('./src/components/icons/DownloadIcon.vue')['default']
+    EllipsisVerticalIcon: typeof import('./src/components/icons/EllipsisVerticalIcon.vue')['default']
+    EmptyState: typeof import('./src/components/dashboard/EmptyState.vue')['default']
+    FileUploadType: typeof import('./src/components/icons/FileUploadType.vue')['default']
+    GlobalUploadIndicator: typeof import('./src/components/GlobalUploadIndicator.vue')['default']
+    Globe: typeof import('./src/components/icons/Globe.vue')['default']
+    GlobeIcon: typeof import('./src/components/icons/GlobeIcon.vue')['default']
+    HardDrive: typeof import('./src/components/icons/hard-drive.vue')['default']
+    HardDriveUpload: typeof import('./src/components/icons/HardDriveUpload.vue')['default']
+    HeartIcon: typeof import('./src/components/icons/HeartIcon.vue')['default']
     Home: typeof import('./src/components/icons/Home.vue')['default']
-    HomeFilled: typeof import('./src/components/icons/HomeFilled.vue')['default']
-    InputText: typeof import('primevue/inputtext')['default']
+    ImageIcon: typeof import('./src/components/icons/ImageIcon.vue')['default']
+    Inbox: typeof import('./src/components/icons/Inbox.vue')['default']
+    InfoIcon: typeof import('./src/components/icons/InfoIcon.vue')['default']
+    LanguageIcon: typeof import('./src/components/icons/LanguageIcon.vue')['default']
     Layout: typeof import('./src/components/icons/Layout.vue')['default']
-    LayoutFilled: typeof import('./src/components/icons/LayoutFilled.vue')['default']
-    Message: typeof import('primevue/message')['default']
-    Password: typeof import('primevue/password')['default']
+    LayoutDashboard: typeof import('./src/components/icons/LayoutDashboard.vue')['default']
+    LinkIcon: typeof import('./src/components/icons/LinkIcon.vue')['default']
+    ListIcon: typeof import('./src/components/icons/ListIcon.vue')['default']
+    LockIcon: typeof import('./src/components/icons/LockIcon.vue')['default']
+    MailIcon: typeof import('./src/components/icons/MailIcon.vue')['default']
+    MoneyCheck: typeof import('./src/components/icons/MoneyCheck.vue')['default']
+    MonitorIcon: typeof import('./src/components/icons/MonitorIcon.vue')['default']
+    NotificationDrawer: typeof import('./src/components/NotificationDrawer.vue')['default']
+    OfflineOverlay: typeof import('./src/components/OfflineOverlay.vue')['default']
+    PageHeader: typeof import('./src/components/dashboard/PageHeader.vue')['default']
+    PanelLeft: typeof import('./src/components/icons/PanelLeft.vue')['default']
+    PencilIcon: typeof import('./src/components/icons/PencilIcon.vue')['default']
+    PlayIcon: typeof import('./src/components/icons/PlayIcon.vue')['default']
+    PlusIcon: typeof import('./src/components/icons/PlusIcon.vue')['default']
+    PlusSquareIcon: typeof import('./src/components/icons/PlusSquareIcon.vue')['default']
+    PopupAdsRuntime: typeof import('./src/components/PopupAdsRuntime.vue')['default']
+    RepeatIcon: typeof import('./src/components/icons/RepeatIcon.vue')['default']
     RootLayout: typeof import('./src/components/RootLayout.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SendIcon: typeof import('./src/components/icons/SendIcon.vue')['default']
+    SettingsIcon: typeof import('./src/components/icons/SettingsIcon.vue')['default']
+    ShieldUser: typeof import('./src/components/icons/shield-user.vue')['default']
+    SlidersIcon: typeof import('./src/components/icons/SlidersIcon.vue')['default']
+    StatsCard: typeof import('./src/components/dashboard/StatsCard.vue')['default']
+    TelegramIcon: typeof import('./src/components/icons/TelegramIcon.vue')['default']
     TestIcon: typeof import('./src/components/icons/TestIcon.vue')['default']
-    Toast: typeof import('primevue/toast')['default']
+    TrashIcon: typeof import('./src/components/icons/TrashIcon.vue')['default']
     Upload: typeof import('./src/components/icons/Upload.vue')['default']
-    UploadFilled: typeof import('./src/components/icons/UploadFilled.vue')['default']
+    UploadIcon: typeof import('./src/components/icons/UploadIcon.vue')['default']
+    UserIcon: typeof import('./src/components/icons/UserIcon.vue')['default']
+    'UserIcon copy': typeof import('./src/components/icons/UserIcon copy.vue')['default']
     Video: typeof import('./src/components/icons/Video.vue')['default']
-    VideoFilled: typeof import('./src/components/icons/VideoFilled.vue')['default']
+    VideoIcon: typeof import('./src/components/icons/VideoIcon.vue')['default']
+    VideoPlayIcon: typeof import('./src/components/icons/VideoPlayIcon.vue')['default']
+    VolumeIcon: typeof import('./src/components/icons/VolumeIcon.vue')['default']
+    VolumeOffIcon: typeof import('./src/components/icons/VolumeOffIcon.vue')['default']
     VueHead: typeof import('./src/components/VueHead.tsx')['default']
+    WifiIcon: typeof import('./src/components/icons/WifiIcon.vue')['default']
+    Windows: typeof import('./src/components/icons/windows.vue')['default']
+    XCircleIcon: typeof import('./src/components/icons/XCircleIcon.vue')['default']
+    XIcon: typeof import('./src/components/icons/XIcon.vue')['default']
   }
 }
 
 // For TSX support
 declare global {
+  const ActivityIcon: typeof import('./src/components/icons/ActivityIcon.vue')['default']
   const Add: typeof import('./src/components/icons/Add.vue')['default']
-  const AddFilled: typeof import('./src/components/icons/AddFilled.vue')['default']
+  const AdvertisementIcon: typeof import('./src/components/icons/AdvertisementIcon.vue')['default']
+  const AlertTriangle: typeof import('./src/components/icons/AlertTriangle.vue')['default']
+  const AlertTriangleIcon: typeof import('./src/components/icons/AlertTriangleIcon.vue')['default']
+  const AppButton: typeof import('./src/components/ui/AppButton.vue')['default']
+  const AppConfirmHost: typeof import('./src/components/ui/AppConfirmHost.vue')['default']
+  const AppDialog: typeof import('./src/components/ui/AppDialog.vue')['default']
+  const AppInput: typeof import('./src/components/ui/AppInput.vue')['default']
+  const AppProgressBar: typeof import('./src/components/ui/AppProgressBar.vue')['default']
+  const AppSwitch: typeof import('./src/components/ui/AppSwitch.vue')['default']
+  const AppToastHost: typeof import('./src/components/ui/AppToastHost.vue')['default']
+  const AppTopLoadingBar: typeof import('./src/components/AppTopLoadingBar.vue')['default']
+  const ArrowDownTray: typeof import('./src/components/icons/ArrowDownTray.vue')['default']
+  const ArrowRightIcon: typeof import('./src/components/icons/ArrowRightIcon.vue')['default']
+  const AsyncSelect: typeof import('./src/components/ui/AsyncSelect.vue')['default']
+  const BaseTable: typeof import('./src/components/ui/BaseTable.vue')['default']
   const Bell: typeof import('./src/components/icons/Bell.vue')['default']
-  const BellFilled: typeof import('./src/components/icons/BellFilled.vue')['default']
-  const Button: typeof import('primevue/button')['default']
-  const Checkbox: typeof import('primevue/checkbox')['default']
+  const BellDot: typeof import('./src/components/icons/BellDot.vue')['default']
+  const BellOff: typeof import('./src/components/icons/BellOff.vue')['default']
+  const Chart: typeof import('./src/components/icons/Chart.vue')['default']
+  const CheckCircleIcon: typeof import('./src/components/icons/CheckCircleIcon.vue')['default']
   const CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
+  const CheckMarkIcon: typeof import('./src/components/icons/CheckMarkIcon.vue')['default']
+  const ClientOnly: typeof import('./src/components/ClientOnly.tsx')['default']
+  const CoinsIcon: typeof import('./src/components/icons/CoinsIcon.vue')['default']
+  const copy: typeof import('./src/components/icons/UserIcon copy.vue')['default']
   const Credit: typeof import('./src/components/icons/Credit.vue')['default']
+  const CreditCardIcon: typeof import('./src/components/icons/CreditCardIcon.vue')['default']
   const DashboardLayout: typeof import('./src/components/DashboardLayout.vue')['default']
+  const DashboardNav: typeof import('./src/components/DashboardNav.vue')['default']
+  const DownloadIcon: typeof import('./src/components/icons/DownloadIcon.vue')['default']
+  const EllipsisVerticalIcon: typeof import('./src/components/icons/EllipsisVerticalIcon.vue')['default']
+  const EmptyState: typeof import('./src/components/dashboard/EmptyState.vue')['default']
+  const FileUploadType: typeof import('./src/components/icons/FileUploadType.vue')['default']
+  const GlobalUploadIndicator: typeof import('./src/components/GlobalUploadIndicator.vue')['default']
+  const Globe: typeof import('./src/components/icons/Globe.vue')['default']
+  const GlobeIcon: typeof import('./src/components/icons/GlobeIcon.vue')['default']
+  const HardDrive: typeof import('./src/components/icons/hard-drive.vue')['default']
+  const HardDriveUpload: typeof import('./src/components/icons/HardDriveUpload.vue')['default']
+  const HeartIcon: typeof import('./src/components/icons/HeartIcon.vue')['default']
   const Home: typeof import('./src/components/icons/Home.vue')['default']
-  const HomeFilled: typeof import('./src/components/icons/HomeFilled.vue')['default']
-  const InputText: typeof import('primevue/inputtext')['default']
+  const ImageIcon: typeof import('./src/components/icons/ImageIcon.vue')['default']
+  const Inbox: typeof import('./src/components/icons/Inbox.vue')['default']
+  const InfoIcon: typeof import('./src/components/icons/InfoIcon.vue')['default']
+  const LanguageIcon: typeof import('./src/components/icons/LanguageIcon.vue')['default']
   const Layout: typeof import('./src/components/icons/Layout.vue')['default']
-  const LayoutFilled: typeof import('./src/components/icons/LayoutFilled.vue')['default']
-  const Message: typeof import('primevue/message')['default']
-  const Password: typeof import('primevue/password')['default']
+  const LayoutDashboard: typeof import('./src/components/icons/LayoutDashboard.vue')['default']
+  const LinkIcon: typeof import('./src/components/icons/LinkIcon.vue')['default']
+  const ListIcon: typeof import('./src/components/icons/ListIcon.vue')['default']
+  const LockIcon: typeof import('./src/components/icons/LockIcon.vue')['default']
+  const MailIcon: typeof import('./src/components/icons/MailIcon.vue')['default']
+  const MoneyCheck: typeof import('./src/components/icons/MoneyCheck.vue')['default']
+  const MonitorIcon: typeof import('./src/components/icons/MonitorIcon.vue')['default']
+  const NotificationDrawer: typeof import('./src/components/NotificationDrawer.vue')['default']
+  const OfflineOverlay: typeof import('./src/components/OfflineOverlay.vue')['default']
+  const PageHeader: typeof import('./src/components/dashboard/PageHeader.vue')['default']
+  const PanelLeft: typeof import('./src/components/icons/PanelLeft.vue')['default']
+  const PencilIcon: typeof import('./src/components/icons/PencilIcon.vue')['default']
+  const PlayIcon: typeof import('./src/components/icons/PlayIcon.vue')['default']
+  const PlusIcon: typeof import('./src/components/icons/PlusIcon.vue')['default']
+  const PlusSquareIcon: typeof import('./src/components/icons/PlusSquareIcon.vue')['default']
+  const PopupAdsRuntime: typeof import('./src/components/PopupAdsRuntime.vue')['default']
+  const RepeatIcon: typeof import('./src/components/icons/RepeatIcon.vue')['default']
   const RootLayout: typeof import('./src/components/RootLayout.vue')['default']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
+  const SendIcon: typeof import('./src/components/icons/SendIcon.vue')['default']
+  const SettingsIcon: typeof import('./src/components/icons/SettingsIcon.vue')['default']
+  const ShieldUser: typeof import('./src/components/icons/shield-user.vue')['default']
+  const SlidersIcon: typeof import('./src/components/icons/SlidersIcon.vue')['default']
+  const StatsCard: typeof import('./src/components/dashboard/StatsCard.vue')['default']
+  const TelegramIcon: typeof import('./src/components/icons/TelegramIcon.vue')['default']
   const TestIcon: typeof import('./src/components/icons/TestIcon.vue')['default']
-  const Toast: typeof import('primevue/toast')['default']
+  const TrashIcon: typeof import('./src/components/icons/TrashIcon.vue')['default']
   const Upload: typeof import('./src/components/icons/Upload.vue')['default']
-  const UploadFilled: typeof import('./src/components/icons/UploadFilled.vue')['default']
+  const UploadIcon: typeof import('./src/components/icons/UploadIcon.vue')['default']
+  const UserIcon: typeof import('./src/components/icons/UserIcon.vue')['default']
+  const 'UserIcon copy': typeof import('./src/components/icons/UserIcon copy.vue')['default']
   const Video: typeof import('./src/components/icons/Video.vue')['default']
-  const VideoFilled: typeof import('./src/components/icons/VideoFilled.vue')['default']
+  const VideoIcon: typeof import('./src/components/icons/VideoIcon.vue')['default']
+  const VideoPlayIcon: typeof import('./src/components/icons/VideoPlayIcon.vue')['default']
+  const VolumeIcon: typeof import('./src/components/icons/VolumeIcon.vue')['default']
+  const VolumeOffIcon: typeof import('./src/components/icons/VolumeOffIcon.vue')['default']
   const VueHead: typeof import('./src/components/VueHead.tsx')['default']
+  const WifiIcon: typeof import('./src/components/icons/WifiIcon.vue')['default']
+  const Windows: typeof import('./src/components/icons/windows.vue')['default']
+  const XCircleIcon: typeof import('./src/components/icons/XCircleIcon.vue')['default']
+  const XIcon: typeof import('./src/components/icons/XIcon.vue')['default']
 }
\ No newline at end of file
diff --git a/docs.json b/docs.json
new file mode 100644
index 0000000..419f386
--- /dev/null
+++ b/docs.json
@@ -0,0 +1,3731 @@
+{
+    "swagger": "2.0",
+    "info": {
+        "description": "This is the API server for Stream application.",
+        "title": "Stream API",
+        "termsOfService": "http://swagger.io/terms/",
+        "contact": {
+            "name": "API Support",
+            "url": "http://www.swagger.io/support",
+            "email": "support@swagger.io"
+        },
+        "license": {
+            "name": "Apache 2.0",
+            "url": "http://www.apache.org/licenses/LICENSE-2.0.html"
+        },
+        "version": "1.0"
+    },
+    "host": "localhost:8080",
+    "basePath": "/",
+    "paths": {
+        "/ad-templates": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get all VAST ad templates for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "ad-templates"
+                ],
+                "summary": "List Ad Templates",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/adtemplates.TemplateListPayload"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create a VAST ad template for the current user",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "ad-templates"
+                ],
+                "summary": "Create Ad Template",
+                "parameters": [
+                    {
+                        "description": "Ad template payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/adtemplates.SaveAdTemplateRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/adtemplates.TemplatePayload"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/ad-templates/{id}": {
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update a VAST ad template for the current user",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "ad-templates"
+                ],
+                "summary": "Update Ad Template",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Ad Template ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "Ad template payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/adtemplates.SaveAdTemplateRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/adtemplates.TemplatePayload"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete a VAST ad template for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "ad-templates"
+                ],
+                "summary": "Delete Ad Template",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Ad Template ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/ad-templates": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get paginated list of all ad templates across users (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "List All Ad Templates",
+                "parameters": [
+                    {
+                        "type": "integer",
+                        "default": 1,
+                        "description": "Page",
+                        "name": "page",
+                        "in": "query"
+                    },
+                    {
+                        "type": "integer",
+                        "default": 20,
+                        "description": "Limit",
+                        "name": "limit",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Filter by user ID",
+                        "name": "user_id",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Search by name",
+                        "name": "search",
+                        "in": "query"
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create an ad template for any user (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Create Ad Template",
+                "parameters": [
+                    {
+                        "description": "Ad template payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.SaveAdminAdTemplateRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/ad-templates/{id}": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get ad template detail (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Get Ad Template Detail",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Ad Template ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update an ad template for any user (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Update Ad Template",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Ad Template ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "Ad template payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.SaveAdminAdTemplateRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete any ad template by ID (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Delete Ad Template (Admin)",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Ad Template ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/dashboard": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get system-wide statistics for the admin dashboard",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Admin Dashboard",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/admin.DashboardPayload"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/payments": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get paginated list of all payments across users (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "List All Payments",
+                "parameters": [
+                    {
+                        "type": "integer",
+                        "default": 1,
+                        "description": "Page",
+                        "name": "page",
+                        "in": "query"
+                    },
+                    {
+                        "type": "integer",
+                        "default": 20,
+                        "description": "Limit",
+                        "name": "limit",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Filter by user ID",
+                        "name": "user_id",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Filter by status",
+                        "name": "status",
+                        "in": "query"
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create a manual subscription charge for a user (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Create Payment",
+                "parameters": [
+                    {
+                        "description": "Payment payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.CreateAdminPaymentRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/payments/{id}": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get payment detail (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Get Payment Detail",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Payment ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update payment status safely without hard delete (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Update Payment",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Payment ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "Payment update payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.UpdateAdminPaymentRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/plans": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get all plans with usage counts (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "List Plans",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create a plan (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Create Plan",
+                "parameters": [
+                    {
+                        "description": "Plan payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.SavePlanRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/plans/{id}": {
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update a plan (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Update Plan",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Plan ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "Plan payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.SavePlanRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete a plan, or deactivate it if already used (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Delete Plan",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Plan ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/users": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get paginated list of all users (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "List Users",
+                "parameters": [
+                    {
+                        "type": "integer",
+                        "default": 1,
+                        "description": "Page",
+                        "name": "page",
+                        "in": "query"
+                    },
+                    {
+                        "type": "integer",
+                        "default": 20,
+                        "description": "Limit",
+                        "name": "limit",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Search by email or username",
+                        "name": "search",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Filter by role",
+                        "name": "role",
+                        "in": "query"
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create a user from admin panel (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Create User",
+                "parameters": [
+                    {
+                        "description": "User payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.CreateAdminUserRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/users/{id}": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get detailed info about a single user (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Get User Detail",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "User ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update a user from admin panel (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Update User",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "User ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "User payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.UpdateAdminUserRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete a user and their data (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Delete User",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "User ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/users/{id}/role": {
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Change user role (admin only). Valid: USER, ADMIN, BLOCK",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Update User Role",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "User ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "Role payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.UpdateUserRoleRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/videos": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get paginated list of all videos across users (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "List All Videos",
+                "parameters": [
+                    {
+                        "type": "integer",
+                        "default": 1,
+                        "description": "Page",
+                        "name": "page",
+                        "in": "query"
+                    },
+                    {
+                        "type": "integer",
+                        "default": 20,
+                        "description": "Limit",
+                        "name": "limit",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Search by title",
+                        "name": "search",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Filter by user ID",
+                        "name": "user_id",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Filter by status",
+                        "name": "status",
+                        "in": "query"
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "403": {
+                        "description": "Forbidden",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create a manual video record for a user (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Create Video",
+                "parameters": [
+                    {
+                        "description": "Video payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.SaveAdminVideoRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/admin/videos/{id}": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get video detail by ID (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Get Video Detail",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Video ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update video metadata and status (admin only)",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Update Video",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Video ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "Video payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/admin.SaveAdminVideoRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete any video by ID (admin only)",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "admin"
+                ],
+                "summary": "Delete Video (Admin)",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Video ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/auth/change-password": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Change the authenticated user's local password",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Change Password",
+                "parameters": [
+                    {
+                        "description": "Password payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/auth.ChangePasswordRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/auth/forgot-password": {
+            "post": {
+                "description": "Request password reset link",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Forgot Password",
+                "parameters": [
+                    {
+                        "description": "Forgot password payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/auth.ForgotPasswordRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/auth/google/callback": {
+            "get": {
+                "description": "Callback for Google Login",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Google Callback",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/auth.UserPayload"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/auth/google/login": {
+            "get": {
+                "description": "Redirect to Google for Login",
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Google Login",
+                "responses": {}
+            }
+        },
+        "/auth/login": {
+            "post": {
+                "description": "Login with email and password",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Login",
+                "parameters": [
+                    {
+                        "description": "Login payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/auth.LoginRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/auth.UserPayload"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/auth/logout": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Logout user and clear cookies",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Logout",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/auth/register": {
+            "post": {
+                "description": "Register a new user",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Register",
+                "parameters": [
+                    {
+                        "description": "Registration payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/auth.RegisterRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/auth/reset-password": {
+            "post": {
+                "description": "Reset password using token",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Reset Password",
+                "parameters": [
+                    {
+                        "description": "Reset password payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/auth.ResetPasswordRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/domains": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get all whitelisted domains for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "domains"
+                ],
+                "summary": "List Domains",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Add a domain to the current user's whitelist",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "domains"
+                ],
+                "summary": "Create Domain",
+                "parameters": [
+                    {
+                        "description": "Domain payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/domains.CreateDomainRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/domains/{id}": {
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Remove a domain from the current user's whitelist",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "domains"
+                ],
+                "summary": "Delete Domain",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Domain ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/me": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get the authenticated user's profile payload",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Get Current User",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update the authenticated user's profile information",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Update Current User",
+                "parameters": [
+                    {
+                        "description": "Profile payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/auth.UpdateMeRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Permanently delete the authenticated user's account and related data",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Delete My Account",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/me/clear-data": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Remove videos and settings-related resources for the authenticated user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "auth"
+                ],
+                "summary": "Clear My Data",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/notifications": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get notifications for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "notifications"
+                ],
+                "summary": "List Notifications",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete all notifications for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "notifications"
+                ],
+                "summary": "Clear Notifications",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/notifications/read-all": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Mark all notifications as read for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "notifications"
+                ],
+                "summary": "Mark All Notifications Read",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/notifications/{id}": {
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete a single notification for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "notifications"
+                ],
+                "summary": "Delete Notification",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Notification ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/notifications/{id}/read": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Mark a single notification as read for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "notifications"
+                ],
+                "summary": "Mark Notification Read",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Notification ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/payments": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create a new payment for buying or renewing a plan",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "payment"
+                ],
+                "summary": "Create Payment",
+                "parameters": [
+                    {
+                        "description": "Payment Info",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/payment.CreatePaymentRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/payments/history": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get payment history for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "payment"
+                ],
+                "summary": "List Payment History",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/payments/{id}/invoice": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Download invoice text for a payment or wallet top-up",
+                "produces": [
+                    "text/plain"
+                ],
+                "tags": [
+                    "payment"
+                ],
+                "summary": "Download Invoice",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Payment ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/plans": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get all active plans",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "plan"
+                ],
+                "summary": "List Plans",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "type": "array",
+                                            "items": {
+                                                "$ref": "#/definitions/model.Plan"
+                                            }
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/settings/preferences": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get notification, player, and locale preferences for the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "settings"
+                ],
+                "summary": "Get Preferences",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update notification, player, and locale preferences for the current user",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "settings"
+                ],
+                "summary": "Update Preferences",
+                "parameters": [
+                    {
+                        "description": "Preferences payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/preferences.SettingsPreferencesRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/usage": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get the authenticated user's total video count and total storage usage",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "usage"
+                ],
+                "summary": "Get Usage",
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/usage.UsagePayload"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/videos": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get paginated videos",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "video"
+                ],
+                "summary": "List Videos",
+                "parameters": [
+                    {
+                        "type": "integer",
+                        "default": 1,
+                        "description": "Page number",
+                        "name": "page",
+                        "in": "query"
+                    },
+                    {
+                        "type": "integer",
+                        "default": 10,
+                        "description": "Page size",
+                        "name": "limit",
+                        "in": "query"
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Create video record after upload",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "video"
+                ],
+                "summary": "Create Video",
+                "parameters": [
+                    {
+                        "description": "Video Info",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/video.CreateVideoRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/model.Video"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/videos/upload-url": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Generate presigned URL for video upload",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "video"
+                ],
+                "summary": "Get Upload URL",
+                "parameters": [
+                    {
+                        "description": "File Info",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/video.UploadURLRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/videos/{id}": {
+            "get": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Get video details by ID",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "video"
+                ],
+                "summary": "Get Video",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Video ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "allOf": [
+                                {
+                                    "$ref": "#/definitions/response.Response"
+                                },
+                                {
+                                    "type": "object",
+                                    "properties": {
+                                        "data": {
+                                            "$ref": "#/definitions/model.Video"
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "put": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Update title and description for a video owned by the current user",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "video"
+                ],
+                "summary": "Update Video",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Video ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    },
+                    {
+                        "description": "Video payload",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/video.UpdateVideoRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            },
+            "delete": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Delete a video owned by the current user",
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "video"
+                ],
+                "summary": "Delete Video",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "Video ID",
+                        "name": "id",
+                        "in": "path",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "404": {
+                        "description": "Not Found",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        },
+        "/wallet/topups": {
+            "post": {
+                "security": [
+                    {
+                        "BearerAuth": []
+                    }
+                ],
+                "description": "Add funds to wallet balance for the current user",
+                "consumes": [
+                    "application/json"
+                ],
+                "produces": [
+                    "application/json"
+                ],
+                "tags": [
+                    "payment"
+                ],
+                "summary": "Top Up Wallet",
+                "parameters": [
+                    {
+                        "description": "Topup Info",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/payment.TopupWalletRequest"
+                        }
+                    }
+                ],
+                "responses": {
+                    "201": {
+                        "description": "Created",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "401": {
+                        "description": "Unauthorized",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "$ref": "#/definitions/response.Response"
+                        }
+                    }
+                }
+            }
+        }
+    },
+    "definitions": {
+        "admin.CreateAdminPaymentRequest": {
+            "type": "object",
+            "required": [
+                "payment_method",
+                "plan_id",
+                "term_months",
+                "user_id"
+            ],
+            "properties": {
+                "payment_method": {
+                    "type": "string"
+                },
+                "plan_id": {
+                    "type": "string"
+                },
+                "term_months": {
+                    "type": "integer"
+                },
+                "topup_amount": {
+                    "type": "number"
+                },
+                "user_id": {
+                    "type": "string"
+                }
+            }
+        },
+        "admin.CreateAdminUserRequest": {
+            "type": "object",
+            "required": [
+                "email",
+                "password"
+            ],
+            "properties": {
+                "email": {
+                    "type": "string"
+                },
+                "password": {
+                    "type": "string",
+                    "minLength": 6
+                },
+                "plan_id": {
+                    "type": "string"
+                },
+                "role": {
+                    "type": "string"
+                },
+                "username": {
+                    "type": "string"
+                }
+            }
+        },
+        "admin.DashboardPayload": {
+            "type": "object",
+            "properties": {
+                "active_subscriptions": {
+                    "type": "integer"
+                },
+                "new_users_today": {
+                    "type": "integer"
+                },
+                "new_videos_today": {
+                    "type": "integer"
+                },
+                "total_ad_templates": {
+                    "type": "integer"
+                },
+                "total_payments": {
+                    "type": "integer"
+                },
+                "total_revenue": {
+                    "type": "number"
+                },
+                "total_storage_used": {
+                    "type": "integer"
+                },
+                "total_users": {
+                    "type": "integer"
+                },
+                "total_videos": {
+                    "type": "integer"
+                }
+            }
+        },
+        "admin.SaveAdminAdTemplateRequest": {
+            "type": "object",
+            "required": [
+                "name",
+                "user_id",
+                "vast_tag_url"
+            ],
+            "properties": {
+                "ad_format": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "duration": {
+                    "type": "integer"
+                },
+                "is_active": {
+                    "type": "boolean"
+                },
+                "is_default": {
+                    "type": "boolean"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "user_id": {
+                    "type": "string"
+                },
+                "vast_tag_url": {
+                    "type": "string"
+                }
+            }
+        },
+        "admin.SaveAdminVideoRequest": {
+            "type": "object",
+            "required": [
+                "size",
+                "title",
+                "url",
+                "user_id"
+            ],
+            "properties": {
+                "ad_template_id": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "duration": {
+                    "type": "integer"
+                },
+                "format": {
+                    "type": "string"
+                },
+                "size": {
+                    "type": "integer"
+                },
+                "status": {
+                    "type": "string"
+                },
+                "title": {
+                    "type": "string"
+                },
+                "url": {
+                    "type": "string"
+                },
+                "user_id": {
+                    "type": "string"
+                }
+            }
+        },
+        "admin.SavePlanRequest": {
+            "type": "object",
+            "required": [
+                "cycle",
+                "name",
+                "price",
+                "storage_limit",
+                "upload_limit"
+            ],
+            "properties": {
+                "cycle": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "features": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
+                "is_active": {
+                    "type": "boolean"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "price": {
+                    "type": "number"
+                },
+                "storage_limit": {
+                    "type": "integer"
+                },
+                "upload_limit": {
+                    "type": "integer"
+                }
+            }
+        },
+        "admin.UpdateAdminPaymentRequest": {
+            "type": "object",
+            "required": [
+                "status"
+            ],
+            "properties": {
+                "status": {
+                    "type": "string"
+                }
+            }
+        },
+        "admin.UpdateAdminUserRequest": {
+            "type": "object",
+            "properties": {
+                "email": {
+                    "type": "string"
+                },
+                "password": {
+                    "type": "string"
+                },
+                "plan_id": {
+                    "type": "string"
+                },
+                "role": {
+                    "type": "string"
+                },
+                "username": {
+                    "type": "string"
+                }
+            }
+        },
+        "admin.UpdateUserRoleRequest": {
+            "type": "object",
+            "required": [
+                "role"
+            ],
+            "properties": {
+                "role": {
+                    "type": "string"
+                }
+            }
+        },
+        "adtemplates.SaveAdTemplateRequest": {
+            "type": "object",
+            "required": [
+                "name",
+                "vast_tag_url"
+            ],
+            "properties": {
+                "ad_format": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "duration": {
+                    "type": "integer"
+                },
+                "is_active": {
+                    "type": "boolean"
+                },
+                "is_default": {
+                    "type": "boolean"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "vast_tag_url": {
+                    "type": "string"
+                }
+            }
+        },
+        "adtemplates.TemplateListPayload": {
+            "type": "object",
+            "properties": {
+                "templates": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/manual.AdTemplate"
+                    }
+                }
+            }
+        },
+        "adtemplates.TemplatePayload": {
+            "type": "object",
+            "properties": {
+                "template": {
+                    "$ref": "#/definitions/manual.AdTemplate"
+                }
+            }
+        },
+        "auth.ChangePasswordRequest": {
+            "type": "object",
+            "required": [
+                "current_password",
+                "new_password"
+            ],
+            "properties": {
+                "current_password": {
+                    "type": "string"
+                },
+                "new_password": {
+                    "type": "string",
+                    "minLength": 6
+                }
+            }
+        },
+        "auth.ForgotPasswordRequest": {
+            "type": "object",
+            "required": [
+                "email"
+            ],
+            "properties": {
+                "email": {
+                    "type": "string"
+                }
+            }
+        },
+        "auth.LoginRequest": {
+            "type": "object",
+            "required": [
+                "email",
+                "password"
+            ],
+            "properties": {
+                "email": {
+                    "type": "string"
+                },
+                "password": {
+                    "type": "string"
+                }
+            }
+        },
+        "auth.RegisterRequest": {
+            "type": "object",
+            "required": [
+                "email",
+                "password",
+                "username"
+            ],
+            "properties": {
+                "email": {
+                    "type": "string"
+                },
+                "password": {
+                    "type": "string",
+                    "minLength": 6
+                },
+                "username": {
+                    "type": "string"
+                }
+            }
+        },
+        "auth.ResetPasswordRequest": {
+            "type": "object",
+            "required": [
+                "new_password",
+                "token"
+            ],
+            "properties": {
+                "new_password": {
+                    "type": "string",
+                    "minLength": 6
+                },
+                "token": {
+                    "type": "string"
+                }
+            }
+        },
+        "auth.UpdateMeRequest": {
+            "type": "object",
+            "properties": {
+                "email": {
+                    "type": "string"
+                },
+                "language": {
+                    "type": "string"
+                },
+                "locale": {
+                    "type": "string"
+                },
+                "username": {
+                    "type": "string"
+                }
+            }
+        },
+        "auth.UserPayload": {
+            "type": "object",
+            "properties": {
+                "avatar": {
+                    "type": "string"
+                },
+                "created_at": {
+                    "type": "string"
+                },
+                "email": {
+                    "type": "string"
+                },
+                "google_id": {
+                    "type": "string"
+                },
+                "id": {
+                    "type": "string"
+                },
+                "language": {
+                    "type": "string"
+                },
+                "locale": {
+                    "type": "string"
+                },
+                "plan_expires_at": {
+                    "type": "string"
+                },
+                "plan_expiring_soon": {
+                    "type": "boolean"
+                },
+                "plan_id": {
+                    "type": "string"
+                },
+                "plan_payment_method": {
+                    "type": "string"
+                },
+                "plan_started_at": {
+                    "type": "string"
+                },
+                "plan_term_months": {
+                    "type": "integer"
+                },
+                "role": {
+                    "type": "string"
+                },
+                "storage_used": {
+                    "type": "integer"
+                },
+                "updated_at": {
+                    "type": "string"
+                },
+                "username": {
+                    "type": "string"
+                },
+                "wallet_balance": {
+                    "type": "number"
+                }
+            }
+        },
+        "domains.CreateDomainRequest": {
+            "type": "object",
+            "required": [
+                "name"
+            ],
+            "properties": {
+                "name": {
+                    "type": "string"
+                }
+            }
+        },
+        "manual.AdTemplate": {
+            "type": "object",
+            "properties": {
+                "ad_format": {
+                    "type": "string"
+                },
+                "created_at": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "duration": {
+                    "type": "integer"
+                },
+                "id": {
+                    "type": "string"
+                },
+                "is_active": {
+                    "type": "boolean"
+                },
+                "is_default": {
+                    "type": "boolean"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "updated_at": {
+                    "type": "string"
+                },
+                "user_id": {
+                    "type": "string"
+                },
+                "vast_tag_url": {
+                    "type": "string"
+                }
+            }
+        },
+        "model.Plan": {
+            "type": "object",
+            "properties": {
+                "cycle": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "duration_limit": {
+                    "type": "integer"
+                },
+                "features": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
+                "id": {
+                    "type": "string"
+                },
+                "is_active": {
+                    "type": "boolean"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "price": {
+                    "type": "number"
+                },
+                "quality_limit": {
+                    "type": "string"
+                },
+                "storage_limit": {
+                    "type": "integer"
+                },
+                "upload_limit": {
+                    "type": "integer"
+                }
+            }
+        },
+        "model.Video": {
+            "type": "object",
+            "properties": {
+                "created_at": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "duration": {
+                    "type": "integer"
+                },
+                "format": {
+                    "type": "string"
+                },
+                "hls_path": {
+                    "type": "string"
+                },
+                "hls_token": {
+                    "type": "string"
+                },
+                "id": {
+                    "type": "string"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "processing_status": {
+                    "type": "string"
+                },
+                "size": {
+                    "type": "integer"
+                },
+                "status": {
+                    "type": "string"
+                },
+                "storage_type": {
+                    "type": "string"
+                },
+                "thumbnail": {
+                    "type": "string"
+                },
+                "title": {
+                    "type": "string"
+                },
+                "updated_at": {
+                    "type": "string"
+                },
+                "url": {
+                    "type": "string"
+                },
+                "user_id": {
+                    "type": "string"
+                },
+                "views": {
+                    "type": "integer"
+                }
+            }
+        },
+        "payment.CreatePaymentRequest": {
+            "type": "object",
+            "required": [
+                "payment_method",
+                "plan_id",
+                "term_months"
+            ],
+            "properties": {
+                "payment_method": {
+                    "type": "string"
+                },
+                "plan_id": {
+                    "type": "string"
+                },
+                "term_months": {
+                    "type": "integer"
+                },
+                "topup_amount": {
+                    "type": "number"
+                }
+            }
+        },
+        "payment.TopupWalletRequest": {
+            "type": "object",
+            "required": [
+                "amount"
+            ],
+            "properties": {
+                "amount": {
+                    "type": "number"
+                }
+            }
+        },
+        "preferences.SettingsPreferencesRequest": {
+            "type": "object",
+            "properties": {
+                "airplay": {
+                    "type": "boolean"
+                },
+                "autoplay": {
+                    "type": "boolean"
+                },
+                "chromecast": {
+                    "type": "boolean"
+                },
+                "email_notifications": {
+                    "type": "boolean"
+                },
+                "language": {
+                    "type": "string"
+                },
+                "locale": {
+                    "type": "string"
+                },
+                "loop": {
+                    "type": "boolean"
+                },
+                "marketing_notifications": {
+                    "type": "boolean"
+                },
+                "muted": {
+                    "type": "boolean"
+                },
+                "pip": {
+                    "type": "boolean"
+                },
+                "push_notifications": {
+                    "type": "boolean"
+                },
+                "show_controls": {
+                    "type": "boolean"
+                },
+                "telegram_notifications": {
+                    "type": "boolean"
+                }
+            }
+        },
+        "response.Response": {
+            "type": "object",
+            "properties": {
+                "code": {
+                    "type": "integer"
+                },
+                "data": {},
+                "message": {
+                    "type": "string"
+                }
+            }
+        },
+        "usage.UsagePayload": {
+            "type": "object",
+            "properties": {
+                "total_storage": {
+                    "type": "integer"
+                },
+                "total_videos": {
+                    "type": "integer"
+                },
+                "user_id": {
+                    "type": "string"
+                }
+            }
+        },
+        "video.CreateVideoRequest": {
+            "type": "object",
+            "required": [
+                "size",
+                "title",
+                "url"
+            ],
+            "properties": {
+                "description": {
+                    "type": "string"
+                },
+                "duration": {
+                    "description": "Maybe client knows, or we process later",
+                    "type": "integer"
+                },
+                "format": {
+                    "type": "string"
+                },
+                "size": {
+                    "type": "integer"
+                },
+                "title": {
+                    "type": "string"
+                },
+                "url": {
+                    "description": "The S3 Key or Full URL",
+                    "type": "string"
+                }
+            }
+        },
+        "video.UpdateVideoRequest": {
+            "type": "object",
+            "required": [
+                "title"
+            ],
+            "properties": {
+                "ad_template_id": {
+                    "type": "string"
+                },
+                "description": {
+                    "type": "string"
+                },
+                "title": {
+                    "type": "string"
+                }
+            }
+        },
+        "video.UploadURLRequest": {
+            "type": "object",
+            "required": [
+                "content_type",
+                "filename",
+                "size"
+            ],
+            "properties": {
+                "content_type": {
+                    "type": "string"
+                },
+                "filename": {
+                    "type": "string"
+                },
+                "size": {
+                    "type": "integer"
+                }
+            }
+        }
+    },
+    "securityDefinitions": {
+        "BearerAuth": {
+            "type": "apiKey",
+            "name": "Authorization",
+            "in": "header"
+        }
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 7476f95..9406e59 100644
--- a/package.json
+++ b/package.json
@@ -2,45 +2,47 @@
   "name": "holistream",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "deploy": "wrangler deploy",
-    "cf-typegen": "wrangler types --env-interface CloudflareBindings"
+    "dev": "bun x --bun vite",
+    "build": "bun x --bun vite build",
+    "preview": "bun x --bun vite preview"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.946.0",
-    "@aws-sdk/s3-presigned-post": "^3.946.0",
-    "@aws-sdk/s3-request-presigner": "^3.946.0",
+    "@bufbuild/protobuf": "^2.11.0",
+    "@grpc/grpc-js": "^1.14.3",
+    "@hattip/adapter-node": "^0.0.49",
     "@hiogawa/tiny-rpc": "^0.2.3-pre.18",
     "@hiogawa/utils": "^1.7.0",
-    "@primeuix/themes": "^2.0.2",
-    "@primevue/forms": "^4.5.4",
-    "@unhead/vue": "^2.1.1",
-    "@vueuse/core": "^14.1.0",
+    "@hono/node-server": "^1.19.12",
+    "@hono/zod-validator": "^0.7.6",
+    "@pinia/colada": "^1.1.0",
+    "@tanstack/vue-table": "^8.21.3",
+    "@unhead/vue": "^2.1.12",
+    "@vueuse/core": "^14.2.1",
+    "aws4fetch": "^1.0.20",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "firebase": "^12.8.0",
-    "firebase-admin": "^13.6.0",
-    "hono": "^4.11.3",
+    "hono": "^4.12.9",
+    "i18next": "^26.0.3",
+    "i18next-http-backend": "^3.0.4",
+    "i18next-vue": "^5.4.0",
     "is-mobile": "^5.0.0",
     "pinia": "^3.0.4",
-    "primevue": "^4.5.4",
-    "tailwind-merge": "^3.4.0",
-    "vue": "^3.5.26",
-    "vue-router": "^4.6.4",
-    "zod": "^4.3.2"
+    "superjson": "^2.2.6",
+    "tailwind-merge": "^3.5.0",
+    "tweetnacl": "^1.0.3",
+    "vue": "^3.5.31",
+    "vue-router": "^5.0.4",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@cloudflare/vite-plugin": "^1.17.1",
-    "@primevue/auto-import-resolver": "^4.5.4",
-    "@types/node": "^25.0.3",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitejs/plugin-vue-jsx": "^5.1.3",
-    "unocss": "^66.5.12",
-    "unplugin-auto-import": "^20.3.0",
-    "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.3.0",
-    "vite-ssr-components": "^0.5.2",
-    "wrangler": "^4.54.0"
+    "@types/bun": "^1.3.11",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "estree-walker": "3.0.3",
+    "unocss": "^66.6.7",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "^8.0.3",
+    "vite-ssr-components": "^0.5.2"
   }
 }
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
new file mode 100644
index 0000000..84aeff8
--- /dev/null
+++ b/public/locales/en/translation.json
@@ -0,0 +1,1355 @@
+{
+  "common": {
+    "save": "Save",
+    "close": "Close",
+    "cancel": "Cancel",
+    "connect": "Connect",
+    "disconnect": "Disconnect",
+    "upload": "Upload",
+    "loading": "Loading",
+    "actions": "Actions",
+    "status": "Status",
+    "videos": "Videos",
+    "selected": "{{count}} selected",
+    "copy": "Copy",
+    "rowsPerPage": "Rows per page",
+    "next": "Next",
+    "previous": "Previous",
+    "page": "Page {{current}} of {{total}}",
+    "records": "records"
+  },
+  "app": {
+    "name": "EcoStream"
+  },
+  "auth": {
+    "layout": {
+      "login": {
+        "headTitle": "Login to your account",
+        "title": "Sign in to your dashboard",
+        "subtitle": "Please enter your details to sign in."
+      },
+      "signup": {
+        "headTitle": "Create your account",
+        "title": "Create your account",
+        "subtitle": "Please fill in the information to create your account."
+      },
+      "forgot": {
+        "headTitle": "Reset your password",
+        "title": "Forgot your password?",
+        "subtitle": "Enter your email address and we'll send you a link to reset your password."
+      }
+    },
+    "login": {
+      "email": "Email",
+      "password": "Password",
+      "forgotPassword": "Forgot password?",
+      "signIn": "Sign in",
+      "google": "Google",
+      "noAccount": "Don't have an account?",
+      "signUp": "Sign up",
+      "errors": {
+        "emailRequired": "Email is required.",
+        "emailInvalid": "Invalid email address.",
+        "passwordRequired": "Password is required."
+      }
+    },
+    "signup": {
+      "fullName": "Full Name",
+      "email": "Email address",
+      "password": "Password",
+      "passwordHint": "Must be at least 8 characters.",
+      "createAccount": "Create Account",
+      "alreadyHave": "Already have an account?",
+      "signIn": "Sign in",
+      "placeholders": {
+        "name": "John Doe",
+        "email": "you@example.com",
+        "password": "Create a password"
+      },
+      "errors": {
+        "nameRequired": "Name is required.",
+        "emailRequired": "Email is required.",
+        "emailInvalid": "Invalid email address.",
+        "passwordMin": "Password must be at least 8 characters."
+      }
+    },
+    "forgot": {
+      "description": "Enter your email address and we'll send you a link to reset your password.",
+      "email": "Email address",
+      "sendResetLink": "Send Reset Link",
+      "backToSignIn": "Back to Sign in",
+      "placeholders": {
+        "email": "you@example.com"
+      },
+      "errors": {
+        "emailRequired": "Email is required.",
+        "emailInvalid": "Invalid email address."
+      },
+      "toast": {
+        "successSummary": "Success",
+        "successDetail": "Reset link sent",
+        "errorSummary": "Error",
+        "errorDetail": "An error occurred"
+      }
+    },
+    "errors": {
+      "loginNoUserData": "Login failed: No user data received",
+      "loginFailed": "Login failed: {error}",
+      "registrationFailedFallback": "Registration failed",
+      "registrationFailed": "Registration failed: {error}",
+      "updateProfileFailed": "Failed to update profile: {error}",
+      "changePasswordFailed": "Failed to change password: {error}",
+      "unknown": "Unknown error"
+    }
+  },
+  "nav": {
+    "overview": "Overview",
+    "videos": "Videos",
+    "notification": "Notification",
+    "settings": "Settings"
+  },
+  "settings": {
+    "menu": {
+      "securityGroup": "Security",
+      "preferencesGroup": "Preferences",
+      "integrationsGroup": "Integrations",
+      "dangerGroup": "Danger Zone",
+      "security": "Security",
+      "billing": "Billing & Plans",
+      "notifications": "Notifications",
+      "playerGroup": "Player",
+      "playerConfigs": "Player Configs",
+      "domains": "Allowed Domains",
+      "ads": "Ads & VAST",
+      "danger": "Danger Zone",
+      "popupAds": "Popup Ads"
+    },
+    "content": {
+      "fallbackTitle": "Settings",
+      "fallbackSubtitle": "Manage your account settings and preferences.",
+      "security": {
+        "title": "Security & Connected Apps",
+        "subtitle": "Manage your security settings and connected applications."
+      },
+      "notifications": {
+        "title": "Notifications",
+        "subtitle": "Choose how you want to receive notifications and updates."
+      },
+      "preferences": {
+        "title": "Preferences",
+        "subtitle": "Manage your account preferences and notification channels."
+      },
+      "billing": {
+        "title": "Billing & Plans",
+        "subtitle": "Your current subscription and billing information."
+      },
+      "domains": {
+        "title": "Allowed Domains",
+        "subtitle": "Add domains to your whitelist to allow embedding content via iframe."
+      },
+      "ads": {
+        "title": "Ads & VAST",
+        "subtitle": "Create and manage VAST ad templates for your videos."
+      },
+      "playerConfigs": {
+        "title": "Player Configs",
+        "subtitle": "Create and manage player configurations for your videos."
+      },
+      "danger": {
+        "title": "Danger Zone",
+        "subtitle": "Irreversible and destructive actions. Be careful!"
+      },
+      "popupAds": {
+        "title": "Popup Ads",
+        "subtitle": "Manage your popup ad settings and preferences."
+      }
+    },
+    "notificationSettings": {
+      "saveChanges": "Save Changes",
+      "types": {
+        "email": {
+          "title": "Email Notifications",
+          "description": "Receive updates and alerts via email"
+        },
+        "push": {
+          "title": "Push Notifications",
+          "description": "Get instant alerts in your browser"
+        },
+        "marketing": {
+          "title": "Marketing Emails",
+          "description": "Receive promotions and product updates"
+        },
+        "telegram": {
+          "title": "Telegram Notifications",
+          "description": "Receive updates via Telegram"
+        }
+      },
+      "toast": {
+        "savedSummary": "Settings Saved",
+        "savedDetail": "Your notification settings have been saved.",
+        "failedSummary": "Save Failed",
+        "failedDetail": "Failed to save settings."
+      }
+    },
+    "playerSettings": {
+      "toast": {
+        "savedSummary": "Settings Saved",
+        "savedDetail": "Your player settings have been saved.",
+        "failedSummary": "Save Failed",
+        "failedDetail": "Failed to save settings."
+      },
+      "items": {
+        "autoplay": {
+          "title": "Autoplay",
+          "description": "Automatically start videos when loaded"
+        },
+        "loop": {
+          "title": "Loop",
+          "description": "Repeat video when it ends"
+        },
+        "muted": {
+          "title": "Muted",
+          "description": "Start videos with sound muted"
+        },
+        "showControls": {
+          "title": "Show Controls",
+          "description": "Display player controls (play, pause, volume)"
+        },
+        "pip": {
+          "title": "Picture in Picture",
+          "description": "Enable Picture-in-Picture mode"
+        },
+        "airplay": {
+          "title": "AirPlay",
+          "description": "Allow streaming to Apple devices via AirPlay"
+        },
+        "chromecast": {
+          "title": "Chromecast",
+          "description": "Allow casting to Chromecast devices"
+        },
+         "encrytion_m3u8": {
+          "title": "HLS Encryption (m3u8)",
+          "description": "Enable encryption for HLS streams (Anti-download, VIP only)"
+        }
+      }
+    },
+    "dangerZone": {
+      "deleteAccount": {
+        "title": "Delete Account",
+        "description": "Permanently delete your account and all associated data.",
+        "button": "Delete Account"
+      },
+      "clearData": {
+        "title": "Clear All Data",
+        "description": "Remove all your videos, playlists, and activity history.",
+        "button": "Clear Data"
+      },
+      "warning": {
+        "title": "Warning",
+        "description": "These actions are permanent and cannot be undone. Make sure you have backed up any important data before proceeding."
+      },
+      "confirm": {
+        "deleteAccountMessage": "Are you sure you want to delete your account? This action cannot be undone.",
+        "deleteAccountHeader": "Delete Account",
+        "deleteAccountAccept": "Delete",
+        "deleteAccountReject": "Cancel",
+        "clearDataMessage": "Are you sure you want to clear all your data? This action cannot be undone.",
+        "clearDataHeader": "Clear All Data",
+        "clearDataAccept": "Clear",
+        "clearDataReject": "Cancel"
+      },
+      "toast": {
+        "deleteAccountSummary": "Account deleted",
+        "deleteAccountDetail": "Your account and associated data have been permanently deleted.",
+        "clearDataSummary": "Data cleared",
+        "clearDataDetail": "All your data has been permanently deleted.",
+        "failedSummary": "Action failed",
+        "failedDetail": "Failed to complete the requested action."
+      }
+    },
+    "domainsDns": {
+      "addDomain": "Add Domain",
+      "infoBanner": "Only domains in your whitelist can embed your content using iframe.",
+      "table": {
+        "domain": "Domain",
+        "addedDate": "Added Date"
+      },
+      "emptyTitle": "No domains in whitelist",
+      "emptySubtitle": "Add a domain to allow iframe embedding",
+      "embedCodeTitle": "Embed Code",
+      "copyCode": "Copy Code",
+      "embedCodeHint": "Use this iframe code to embed content on your whitelisted domains.",
+      "dialog": {
+        "title": "Add Domain to Whitelist",
+        "domainLabel": "Domain Name",
+        "domainPlaceholder": "example.com",
+        "domainHint": "Enter domain without www or https:// (e.g., example.com)",
+        "importantTitle": "Important",
+        "importantDetail": "Only add domains that you own and control."
+      },
+      "confirm": {
+        "removeMessage": "Are you sure you want to remove {domain} from your whitelist? Embedded iframes from this domain will no longer work.",
+        "removeHeader": "Remove Domain",
+        "removeAccept": "Remove",
+        "removeReject": "Cancel"
+      },
+      "toast": {
+        "invalidSummary": "Invalid Domain",
+        "invalidDetail": "Please enter a valid domain name.",
+        "duplicateSummary": "Domain Already Added",
+        "duplicateDetail": "This domain is already in your whitelist.",
+        "addedSummary": "Domain Added",
+        "addedDetail": "{domain} has been added to your whitelist.",
+        "removedSummary": "Domain Removed",
+        "removedDetail": "{domain} has been removed from your whitelist.",
+        "copiedSummary": "Copied",
+        "copiedDetail": "Embed code copied to clipboard.",
+        "failedSummary": "Action failed",
+        "failedDetail": "Failed to load or update domains."
+      }
+    },
+    "playerConfigs": {
+      "createConfig": "Create Config",
+      "infoBanner": "Player configs let you customize playback behavior such as autoplay, loop, controls, and casting features.",
+      "freePlanTitle": "Free plan limit",
+      "freePlanMessage": "Free accounts can create and manage 1 player config. After you create one, create is disabled until you delete it.",
+      "reconciliationTitle": "Too many configs for free plan",
+      "reconciliationMessage": "Your account still has more than 1 player config from a previous paid plan. Delete extra configs until only 1 remains to edit, enable, or set a default again.",
+      "readOnlyTitle": "Free plan limit",
+      "readOnlyMessage": "Free accounts can manage 1 player config. Delete extra configs after downgrade to continue editing.",
+      "defaultBadge": "Default",
+      "createdOn": "Created {{date}}",
+      "emptyTitle": "No player configs yet",
+      "emptySubtitle": "Create your first config to customize video playback",
+      "items": {
+        "autoplay": {
+          "title": "Autoplay",
+          "description": "Automatically start videos when loaded"
+        },
+        "loop": {
+          "title": "Loop",
+          "description": "Repeat video when it ends"
+        },
+        "muted": {
+          "title": "Muted",
+          "description": "Start videos with sound muted"
+        },
+        "showControls": {
+          "title": "Show Controls",
+          "description": "Display player controls during playback"
+        },
+        "pip": {
+          "title": "Picture in Picture",
+          "description": "Enable Picture-in-Picture mode"
+        },
+        "airplay": {
+          "title": "AirPlay",
+          "description": "Allow streaming to Apple devices via AirPlay"
+        },
+        "chromecast": {
+          "title": "Chromecast",
+          "description": "Allow casting to Chromecast devices"
+        },
+        "encrytionM3u8": {
+          "title": "HLS Encryption (m3u8)",
+          "description": "Enable encryption for HLS streams."
+        }
+      },
+      "badges": {
+        "autoplay": "Autoplay",
+        "loop": "Loop",
+        "muted": "Muted",
+        "controls": "Controls",
+        "pip": "PiP",
+        "airplay": "AirPlay",
+        "chromecast": "Chromecast",
+        "encrytionM3u8": "Encrypted HLS",
+        "logo": "Logo"
+      },
+      "state": {
+        "enabled": "enabled",
+        "disabled": "disabled"
+      },
+      "actions": {
+        "default": "Default",
+        "setDefault": "Set Default"
+      },
+      "table": {
+        "name": "Name",
+        "settings": "Settings"
+      },
+      "dialog": {
+        "editTitle": "Edit Config",
+        "createTitle": "Create Player Config",
+        "name": "Config Name",
+        "namePlaceholder": "e.g., Mobile Player, Desktop Player",
+        "description": "Description",
+        "descriptionPlaceholder": "Brief description for this config",
+        "playbackOptions": "Playback Options",
+        "castingOptions": "Casting Options",
+        "advancedOptions": "Advanced Options",
+        "logoUrl": "Logo URL",
+        "logoUrlPlaceholder": "https://example.com/logo.png",
+        "logoUrlHint": "Optional logo image shown in the player overlay.",
+        "defaultLabel": "Default Config",
+        "defaultCheckbox": "Use this config as default for new videos",
+        "defaultHint": "When enabled, newly created videos will automatically use this active config.",
+        "defaultDisabledHint": "Please enable this config before setting it as default.",
+        "update": "Update",
+        "create": "Create"
+      },
+      "confirm": {
+        "deleteMessage": "Are you sure you want to delete \"{{name}}\"?",
+        "deleteHeader": "Delete Config",
+        "deleteAccept": "Delete",
+        "deleteReject": "Cancel"
+      },
+      "toast": {
+        "nameRequiredSummary": "Name required",
+        "nameRequiredDetail": "Please enter a config name.",
+        "updatedSummary": "Config updated",
+        "updatedDetail": "Player config has been updated.",
+        "createdSummary": "Config created",
+        "createdDetail": "Player config has been created.",
+        "enabledSummary": "Config enabled",
+        "disabledSummary": "Config disabled",
+        "defaultUpdatedSummary": "Default updated",
+        "defaultUpdatedDetail": "{{name}} is now the default config for new videos.",
+        "upgradeRequiredSummary": "Config limit reached",
+        "upgradeRequiredDetail": "Free accounts can only have 1 player config.",
+        "limitSummary": "Config limit reached",
+        "limitDetail": "Free accounts can only have 1 player config.",
+        "reconciliationSummary": "Delete extra configs",
+        "reconciliationDetail": "Delete extra player configs until only 1 remains to continue managing them on the free plan.",
+        "toggleDetail": "{{name}} has been {state}.",
+        "deletedSummary": "Config deleted",
+        "deletedDetail": "Player config has been removed.",
+        "failedSummary": "Action failed",
+        "failedDetail": "Failed to load or update player configs."
+      }
+    },
+    "adsVast": {
+      "createTemplate": "Create Template",
+      "infoBanner": "VAST (Video Ad Serving Template) is an XML schema for serving ad tags to video players.",
+      "readOnlyTitle": "Upgrade required",
+      "readOnlyMessage": "Ads & VAST is read-only on the free plan. Upgrade your plan to create, edit, delete, enable, or set default templates.",
+      "defaultBadge": "Default",
+      "createdOn": "Created {{date}}",
+      "emptyTitle": "No VAST templates yet",
+      "emptySubtitle": "Create a template to start monetizing your videos",
+      "formats": {
+        "preRoll": "Pre-roll",
+        "midRoll": "Mid-roll",
+        "postRoll": "Post-roll"
+      },
+      "state": {
+        "enabled": "enabled",
+        "disabled": "disabled"
+      },
+      "actions": {
+        "default": "Default",
+        "setDefault": "Set default"
+      },
+      "table": {
+        "template": "Template",
+        "format": "Format",
+        "vastUrl": "VAST URL"
+      },
+      "dialog": {
+        "editTitle": "Edit Template",
+        "createTitle": "Create VAST Template",
+        "templateName": "Template Name",
+        "templateNamePlaceholder": "e.g., Main Pre-roll Ad",
+        "vastUrlLabel": "VAST Tag URL",
+        "vastUrlPlaceholder": "https://ads.example.com/vast/tag.xml",
+        "adFormat": "Ad Format",
+        "adInterval": "Ad Interval (seconds)",
+        "adIntervalPlaceholder": "30",
+        "defaultLabel": "Default template",
+        "defaultCheckbox": "Use this template by default for new videos",
+        "defaultHint": "When enabled, newly created videos automatically use this active template.",
+        "defaultDisabledHint": "Enable this template before setting it as default.",
+        "update": "Update",
+        "create": "Create"
+      },
+      "confirm": {
+        "deleteMessage": "Are you sure you want to delete \"{{name}}\"?",
+        "deleteHeader": "Delete Template",
+        "deleteAccept": "Delete",
+        "deleteReject": "Cancel"
+      },
+      "toast": {
+        "nameRequiredSummary": "Name Required",
+        "nameRequiredDetail": "Please enter a template name.",
+        "urlRequiredSummary": "VAST URL Required",
+        "urlRequiredDetail": "Please enter the VAST tag URL.",
+        "invalidUrlSummary": "Invalid URL",
+        "invalidUrlDetail": "Please enter a valid URL.",
+        "durationRequiredSummary": "Duration Required",
+        "durationRequiredDetail": "Mid-roll ads require a duration/interval.",
+        "updatedSummary": "Template Updated",
+        "updatedDetail": "VAST template has been updated.",
+        "createdSummary": "Template Created",
+        "createdDetail": "VAST template has been created.",
+        "enabledSummary": "Template Enabled",
+        "disabledSummary": "Template Disabled",
+        "defaultUpdatedSummary": "Default Updated",
+        "defaultUpdatedDetail": "{{name}} is now the default template for new videos.",
+        "upgradeRequiredSummary": "Upgrade required",
+        "upgradeRequiredDetail": "Upgrade your plan to manage Ads & VAST.",
+        "toggleDetail": "{{name}} has been {state}.",
+        "deletedSummary": "Template Deleted",
+        "deletedDetail": "VAST template has been removed.",
+        "copiedSummary": "Copied",
+        "copiedDetail": "URL copied to clipboard.",
+        "failedSummary": "Action failed",
+        "failedDetail": "Failed to load or update VAST templates."
+      }
+    },
+    "popupAds": {
+      "createItem": "Add Popup Ad",
+      "maxTriggersLabel": "Highest URL trigger limit per session ({{count}})",
+      "emptyTitle": "No popup ads yet",
+      "emptySubtitle": "Create a popup ad to start opening URLs or injecting scripts.",
+      "types": {
+        "url": "URL",
+        "script": "Script"
+      },
+      "table": {
+        "label": "Label",
+        "type": "Type",
+        "target": "Target",
+        "maxTriggersPerSession": "Max triggers/session"
+      },
+      "dialog": {
+        "createTitle": "Create Popup Ad",
+        "editTitle": "Edit Popup Ad",
+        "type": "Type",
+        "label": "Label",
+        "labelPlaceholder": "e.g., Ad Network 1",
+        "url": "Destination URL",
+        "urlPlaceholder": "https://example.com/landing-page",
+        "script": "Script snippet",
+        "scriptPlaceholder": "<script async src=\"//example.com/ad.js\"></script>",
+        "maxTriggersPerSession": "Max popup triggers per session",
+        "activeTitle": "Item status",
+        "activeDescription": "Disable an item to keep it in the table without serving it.",
+        "update": "Update",
+        "create": "Create"
+      },
+      "info": {
+        "urlTitle": "URL:",
+        "urlDescription": "Opens in a new tab when viewer clicks.",
+        "scriptTitle": "Script:",
+        "scriptDescription": "Injects the script tag into the page (popunder networks, etc)."
+      },
+      "confirm": {
+        "deleteMessage": "Are you sure you want to delete \"{{name}}\"?",
+        "deleteHeader": "Delete Popup Ad",
+        "deleteAccept": "Delete",
+        "deleteReject": "Cancel"
+      },
+      "toast": {
+        "labelRequiredSummary": "Label required",
+        "labelRequiredDetail": "Please enter a label for this popup ad.",
+        "valueRequiredSummary": "Value required",
+        "valueRequiredDetail": "Please enter a URL or script snippet.",
+        "maxTriggersRequiredSummary": "Trigger limit required",
+        "maxTriggersRequiredDetail": "Please enter a max trigger count greater than 0 for URL popup ads.",
+        "invalidUrlSummary": "Invalid URL",
+        "invalidUrlDetail": "Please enter a valid URL.",
+        "createdSummary": "Popup ad created",
+        "createdDetail": "The popup ad has been added.",
+        "updatedSummary": "Popup ad updated",
+        "updatedDetail": "The popup ad has been updated.",
+        "deletedSummary": "Popup ad deleted",
+        "deletedDetail": "The popup ad has been removed.",
+        "failedSummary": "Action failed",
+        "failedDetail": "Failed to load or update popup ads."
+      }
+    },
+    "profile": {
+      "title": "Profile Information",
+      "subtitle": "Manage your personal information and account details.",
+      "userFallback": "User",
+      "username": "Username",
+      "email": "Email Address",
+      "storageUsage": "Storage Usage",
+      "storageUsedOfLimit": "{{used}} used",
+      "editProfile": "Edit Profile",
+      "changePassword": "Change Password"
+    },
+    "connectedAccounts": {
+      "title": "Connected Accounts",
+      "email": {
+        "label": "Email",
+        "connected": "Connected",
+        "notConnected": "Not connected",
+        "disconnected": "Disconnected"
+      },
+      "telegram": {
+        "label": "Telegram",
+        "hint": "Get notified via Telegram",
+        "connectedFallback": "Connected"
+      }
+    },
+    "billing": {
+      "walletBalance": "Wallet Balance",
+      "currentBalance": "Current balance: {{balance}}",
+      "topUp": "Top Up",
+      "availablePlans": "Available Plans",
+      "availablePlansHint": "Choose the plan that best fits your needs",
+      "planStorage": "{{storage}} Storage",
+      "planDuration": "{{duration}} Max Duration",
+      "planUploads": "{{count}} Uploads / day",
+      "currentPlan": "Current Plan",
+      "processing": "Processing...",
+      "upgrade": "Upgrade",
+      "storage": "Storage",
+      "storageUsedOfLimit": "{{used}} used",
+      "totalVideos": "Total videos",
+      "totalVideosUsedOfLimit": "{{used}} videos",
+      "paymentHistory": "Payment History",
+      "paymentHistorySubtitle": "Your past payments and invoices",
+      "noPaymentHistory": "No payment history found.",
+      "download": "Download",
+      "durationMinutes": "{{minutes}} mins",
+      "unknownPlan": "Unknown",
+      "walletTopup": "Wallet Top-up",
+      "termOption": "{{months}} month",
+      "termOption_other": "{{months}} months",
+      "paymentMethod": {
+        "wallet": "Wallet balance",
+        "topup": "Top up and pay"
+      },
+      "subscription": {
+        "activeTitle": "Plan active",
+        "activeDescription": " Active until {{date}}",
+        "expiringTitle": "Expiring soon",
+        "expiringDescription": " Expires on {{date}}",
+        "expiredTitle": "Plan expired",
+        "expiredDescription": "Your last subscription ended on {{date}}",
+        "freeTitle": "Free access",
+        "freeDescription": "You are currently using the free plan."
+      },
+      "history": {
+        "validUntil": "Valid until {{date}}"
+      },
+      "cycle": {
+          "MONTHLY": "Monthly",
+          "QUARTERLY": "Quarterly",
+          "YEARLY": "Yearly"
+      },
+      "table": {
+        "date": "Date",
+        "amount": "Amount",
+        "plan": "Plan",
+        "status": "Status",
+        "invoice": "Invoice"
+      },
+      "status": {
+        "success": "Success",
+        "failed": "Failed",
+        "pending": "Pending"
+      },
+      "upgradeDialog": {
+        "title": "Upgrade or renew plan",
+        "selectedPlan": "Selected plan",
+        "basePrice": "Base monthly price",
+        "perMonthBase": "Used as the monthly base for the selected term",
+        "termTitle": "Billing term",
+        "termHint": "Choose how long you want to activate or extend this plan.",
+        "totalLabel": "Total",
+        "walletBalanceLabel": "Wallet balance",
+        "shortfallLabel": "Shortfall",
+        "paymentMethodTitle": "How do you want to pay?",
+        "paymentMethodHint": "If your wallet is short, you can top up the difference and complete the plan purchase in one flow.",
+        "walletOptionDescription": "Try using your current wallet balance first.",
+        "topupOptionDescription": "Top up at least {{shortfall}} to complete the purchase.",
+        "walletCoveredHint": "Your wallet balance already covers this purchase.",
+        "walletInsufficientHint": "Your wallet is short by {{shortfall}}. Switch to the top-up option to complete the purchase.",
+        "topupAmountLabel": "Top-up amount",
+        "topupAmountPlaceholder": "Enter top-up amount",
+        "topupAmountHint": "Any amount above {{shortfall}} will stay in your wallet after the upgrade.",
+        "payWithWallet": "Pay with wallet",
+        "topupAndUpgrade": "Top up and upgrade",
+        "choosePlan": "Choose plan",
+        "selecting": "Opening...",
+        "footerHint": "The new term will be added from your current expiry if your subscription is still active."
+      },
+      "topupDialog": {
+        "title": "Top Up Wallet",
+        "subtitle": "Select an amount or enter a custom amount to add to your wallet.",
+        "customAmount": "Custom Amount",
+        "enterAmount": "Enter amount",
+        "hint": "Minimum top-up amount is $1. Funds will be added to your wallet immediately after payment.",
+        "proceed": "Proceed to Payment"
+      },
+      "toast": {
+        "subscriptionSuccessSummary": "Subscription Successful",
+        "subscriptionSuccessDetail": "Successfully activated {{plan}} for  {{term}}",
+        "subscriptionFailedSummary": "Subscription Failed",
+        "subscriptionFailedDetail": "Failed to subscribe",
+        "topupSuccessSummary": "Top-up Successful",
+        "topupSuccessDetail": "{{amount}} has been added to your wallet.",
+        "topupFailedSummary": "Top-up Failed",
+        "topupFailedDetail": "Failed to process top-up.",
+        "downloadingSummary": "Downloading",
+        "downloadingDetail": "Downloading invoice #{invoiceId}...",
+        "downloadedSummary": "Downloaded",
+        "downloadedDetail": "Invoice #{invoiceId} downloaded successfully",
+        "downloadFailedSummary": "Download Failed",
+        "downloadFailedDetail": "Failed to download invoice."
+      }
+    },
+    "securityConnected": {
+      "header": {
+        "title": "Security & Connected Accounts",
+        "subtitle": "Manage your security settings and connected services."
+      },
+      "accountStatus": {
+        "label": "Account Status",
+        "detail": "Your account is in good standing",
+        "badge": "Active"
+      },
+      "language": {
+        "label": "Language",
+        "detail": "Choose your preferred display language",
+        "save": "Save Language",
+        "options": {
+          "en": "English",
+          "vi": "Tiếng Việt"
+        },
+        "toast": {
+          "successSummary": "Language Saved",
+          "successDetail": "Language has been updated.",
+          "errorSummary": "Save Failed",
+          "errorDetail": "Failed to save language on server. Applied from cookie fallback."
+        }
+      },
+      "twoFactor": {
+        "label": "Two-Factor Authentication",
+        "enabled": "2FA is enabled",
+        "disabled": "Add an extra layer of security"
+      },
+      "changePassword": {
+        "label": "Change Password",
+        "detail": "Update your account password",
+        "button": "Change Password",
+        "dialog": {
+          "title": "Change Password",
+          "subtitle": "Enter your current password and choose a new password.",
+          "current": "Current Password",
+          "new": "New Password",
+          "confirm": "Confirm New Password",
+          "currentPlaceholder": "Enter current password",
+          "newPlaceholder": "Enter new password",
+          "confirmPlaceholder": "Confirm new password",
+          "submit": "Change Password",
+          "cancel": "Cancel",
+          "errors": {
+            "mismatch": "Passwords do not match",
+            "minLength": "Password must be at least 6 characters",
+            "default": "Failed to change password"
+          }
+        },
+        "toast": {
+          "successSummary": "Password Changed",
+          "successDetail": "Your password has been changed successfully."
+        }
+      },
+      "logout": {
+        "label": "Logout",
+        "detail": "Sign out of your account on this device.",
+        "button": "Logout",
+        "confirm": {
+          "message": "Are you sure you want to log out of your account?",
+          "header": "Log Out",
+          "accept": "Log Out",
+          "reject": "Cancel"
+        }
+      },
+      "email": {
+        "label": "Email",
+        "connected": "Connected",
+        "disconnected": "Not connected",
+        "badgeConnected": "Connected",
+        "badgeDisconnected": "Disconnected"
+      },
+      "telegram": {
+        "label": "Telegram",
+        "detailDisconnected": "Get notified via Telegram",
+        "connectedFallback": "Connected",
+        "connect": "Connect",
+        "disconnect": "Disconnect"
+      },
+      "twoFactorDialog": {
+        "title": "Enable Two-Factor Authentication",
+        "subtitle": "Scan the QR code below with your authenticator app (Google Authenticator, Authy, etc.)",
+        "secret": "Secret Key:",
+        "codeLabel": "Verification Code",
+        "codePlaceholder": "Enter 6-digit code",
+        "cancel": "Cancel",
+        "verify": "Verify & Enable"
+      },
+      "toast": {
+        "twoFactorEnabledSummary": "2FA Enabled",
+        "twoFactorEnabledDetail": "Two-factor authentication has been enabled successfully.",
+        "twoFactorEnableFailedSummary": "Enable 2FA Failed",
+        "twoFactorEnableFailedDetail": "Failed to enable two-factor authentication.",
+        "twoFactorDisableFailedSummary": "Disable 2FA Failed",
+        "twoFactorDisableFailedDetail": "Failed to disable two-factor authentication.",
+        "twoFactorDisabledSummary": "2FA Disabled",
+        "twoFactorDisabledDetail": "Two-factor authentication has been disabled.",
+        "twoFactorInvalidCodeSummary": "Enable 2FA Failed",
+        "twoFactorInvalidCodeDetail": "Invalid verification code. Please try again.",
+        "telegramConnectedSummary": "Telegram Connected",
+        "telegramConnectedDetail": "Connected to {username}",
+        "telegramConnectFailedSummary": "Connection Failed",
+        "telegramConnectFailedDetail": "Failed to connect Telegram account.",
+        "telegramDisconnectedSummary": "Telegram Disconnected",
+        "telegramDisconnectedDetail": "Your Telegram account has been disconnected.",
+        "telegramDisconnectFailedSummary": "Disconnect Failed",
+        "telegramDisconnectFailedDetail": "Failed to disconnect Telegram account."
+      }
+    }
+  },
+  "pageHeader": {
+    "dashboard": "Dashboard",
+    "settings": "Settings"
+  },
+  "confirm": {
+    "defaultHeader": "Confirm",
+    "defaultAccept": "OK",
+    "defaultReject": "Cancel"
+  },
+  "toast": {
+    "dismissAria": "Dismiss"
+  },
+  "network": {
+    "offline": {
+      "title": "You're offline",
+      "description": "Your internet connection appears to be unavailable. Check your network and we'll reconnect automatically when you're back online.",
+      "action": "Try again"
+    }
+  },
+  "overview": {
+    "welcome": {
+      "title": "Hello, {{name}}",
+      "subtitle": "Here's what's happening with your content today."
+    },
+    "stats": {
+      "totalVideos": "Total Videos",
+      "totalViews": "Total Views",
+      "storageUsed": "Storage Used",
+      "trendVsLastMonth": "vs last month",
+      "unlimited": "Unlimited"
+    },
+    "admin-quickActions": {
+      "title": "Admin Quick Actions",
+      "manageUsers": {
+        "title": "Manage Users",
+        "description": "View and manage all user accounts"
+      },
+      "viewReports": {
+        "title": "View Reports",
+        "description": "Access detailed analytics and reports"
+      },
+      "systemSettings": {
+        "title": "System Settings",
+        "description": "Configure system-wide settings and preferences"
+      },
+      "billingOverview": {
+        "title": "Billing Overview",
+        "description": "Monitor billing and subscription details"
+      }
+    },
+    "quickActions": {
+      "title": "Quick Actions",
+      "uploadVideo": {
+        "title": "Upload Video",
+        "description": "Upload a new video to your library"
+      },
+      "videoLibrary": {
+        "title": "Video Library",
+        "description": "Browse all your videos"
+      },
+      "analytics": {
+        "title": "Analytics",
+        "description": "Track performance & insights"
+      },
+      "managePlan": {
+        "title": "Manage Plan",
+        "description": "Upgrade or change your plan"
+      }
+    },
+    "referral": {
+      "title": "Referral Link",
+      "subtitle": "Share your referral link and earn commissions from referred users!"
+    },
+    "recentVideos": {
+      "title": "Recent Videos",
+      "viewAll": "View all",
+      "emptyTitle": "No videos found",
+      "emptyDescription": "You haven't uploaded any videos yet. Start by uploading your first video!",
+      "emptyAction": "Upload Video",
+      "table": {
+        "video": "Video",
+        "status": "Status",
+        "duration": "Duration",
+        "uploadDate": "Upload Date",
+        "actions": "Actions"
+      },
+      "noDescription": "No description",
+      "unknownStatus": "Unknown",
+      "actionEdit": "Edit",
+      "actionShare": "Share",
+      "actionDelete": "Delete"
+    },
+    "storage": {
+      "title": "Storage Usage",
+      "usedOfLimit": "{{used}} of {{limit}} used",
+      "breakdown": {
+        "videos": "Videos",
+        "thumbnails": "Thumbnails & Assets",
+        "other": "Other Files"
+      },
+      "lowStorage": {
+        "title": "Storage running low",
+        "message": "Consider upgrading your plan to get more storage.",
+        "viewPlans": "View plans"
+      }
+    }
+  },
+  "video": {
+    "page": {
+      "title": "My Videos",
+      "description": "Manage and organize your video library",
+      "uploadAction": "Upload Video",
+      "uploadDropTitle": "Drop to upload",
+      "uploadDropSubtitle": "Files will be added to the upload queue",
+      "deleteSelectedConfirm": "Delete {{count}} videos?",
+      "deleteSingleConfirm": "Are you sure you want to delete this video?",
+      "retry": "Try Again",
+      "emptyTitle": "No videos found",
+      "emptyDescription": "You haven't uploaded any videos yet. Start by uploading your first video!",
+      "emptyAction": "Upload Video",
+      "duplicateSummary": "Duplicate files skipped",
+      "duplicateDetailOne": "{{count}} file is already in the queue.",
+      "duplicateDetailOther": "{{count}} files are already in the queue."
+    },
+    "filters": {
+      "searchPlaceholder": "Search videos...",
+      "rangeOfTotal": "{{first}}–{{last}} of {{total}}",
+      "previousPageAria": "Previous page",
+      "nextPageAria": "Next page",
+      "allStatus": "All Status",
+      "ready": "Ready",
+      "processing": "Processing",
+      "failed": "Failed"
+    },
+    "table": {
+      "video": "Video",
+      "status": "Status",
+      "size": "Size",
+      "created": "Created",
+      "actions": "Actions",
+      "noDescription": "No description",
+      "copyLink": "Copy link",
+      "edit": "Edit",
+      "delete": "Delete"
+    },
+    "bulk": {
+      "selected": "{{count}} selected",
+      "delete": "Delete"
+    },
+    "copyModal": {
+      "title": "Get sharing address",
+      "playerAddress": "Player address",
+      "embedPlayer": "Embed player (recommended)",
+      "thumbnail": "Thumbnail URL",
+      "hls": "HLS link (VIP only)",
+      "hlsPlaceholder": "HLS link available for VIP with whitelisted domain",
+      "hlsHint": "This link redirects to a signed HLS URL and only works on whitelisted domains.",
+      "warningTitle": "Warning",
+      "warningDetail": "Make sure shared files comply with local laws and confirm you understand the responsibilities involved when distributing content.",
+      "reminderTitle": "Reminder",
+      "reminderDetail": "The embed player can auto switch fallback nodes and works well on mobile. Raw HLS links rely on your own player and must be used only on whitelisted domains.",
+      "toastCopiedSummary": "Copied",
+      "toastCopiedDetail": "Copied to clipboard",
+      "toastErrorSummary": "Error",
+      "toastErrorDetail": "Failed to load video details"
+    },
+    "detailModal": {
+      "title": "Edit video",
+      "titleLabel": "Title",
+      "titlePlaceholder": "Enter video title",
+      "adTemplateLabel": "Ad Template",
+      "adTemplateNone": "No ads",
+      "adTemplateDefault": "Default",
+      "adTemplateUpgradeHint": "Upgrade your plan to customize ad templates for this video.",
+      "adTemplateNoAdsHint": "No ad template selected. This video will play without ads.",
+      "subtitlesTitle": "Subtitles",
+      "subtitleTracks": "{{count}} tracks",
+      "noSubtitles": "No subtitles uploaded yet",
+      "uploadSubtitle": "Upload Subtitle",
+      "subtitleFile": "Subtitle File (VTT, SRT, ASS, SSA)",
+      "languageCode": "Language Code *",
+      "languagePlaceholder": "en, vi, etc.",
+      "displayName": "Display Name (Optional)",
+      "displayNamePlaceholder": "English, Tiếng Việt, etc.",
+      "uploadSubtitleButton": "Upload Subtitle",
+      "cancel": "Cancel",
+      "saveChanges": "Save Changes",
+      "errors": {
+        "titleRequired": "Title is required."
+      },
+      "toast": {
+        "loadErrorSummary": "Error",
+        "loadErrorDetail": "Failed to load video details",
+        "saveSuccessSummary": "Success",
+        "saveSuccessDetail": "Video updated successfully",
+        "saveErrorSummary": "Error",
+        "saveErrorDetail": "Failed to save changes",
+        "subtitleInfoSummary": "Info",
+        "subtitleInfoDetail": "Subtitle upload not yet implemented"
+      }
+    },
+    "detailPage": {
+      "title": "Video Detail",
+      "description": "View and manage video details",
+      "loadingBreadcrumb": "Loading...",
+      "detailsTitle": "Video Details",
+      "copyValueTitle": "Copy value",
+      "videoTagFallback": "Your browser does not support the video tag.",
+      "saving": "Saving...",
+      "cancelEditTitle": "Cancel editing",
+      "reloadTitle": "Reload video",
+      "reloadButton": "Reload",
+      "confirmDelete": {
+        "message": "Are you sure you want to delete this video? This action cannot be undone.",
+        "header": "Confirm Delete",
+        "accept": "Delete",
+        "reject": "Cancel"
+      },
+      "toast": {
+        "reloadSummary": "Info",
+        "reloadDetail": "Reloading video...",
+        "deleteSuccessSummary": "Success",
+        "deleteSuccessDetail": "Video deleted successfully",
+        "deleteErrorSummary": "Error",
+        "deleteErrorDetail": "Failed to delete video",
+        "copySummary": "Copied",
+        "copyDetail": "{label} copied to clipboard"
+      },
+      "videoInfo": {
+        "videoId": "Video ID",
+        "thumbnailUrl": "Thumbnail URL",
+        "embedUrl": "Embed URL",
+        "iframeCode": "Iframe Code",
+        "shareLink": "Share Link"
+      }
+    },
+    "cardPopover": {
+      "download": "Download",
+      "copyLink": "Copy link",
+      "edit": "Edit",
+      "delete": "Delete",
+      "toast": {
+        "copySuccessSummary": "Success",
+        "copySuccessDetail": "Video link copied",
+        "copyErrorSummary": "Error",
+        "copyErrorDetail": "Failed to copy link",
+        "downloadSuccessSummary": "Success",
+        "downloadSuccessDetail": "Downloading video...",
+        "downloadErrorSummary": "Error",
+        "downloadErrorDetail": "Video file not found"
+      }
+    }
+  },
+  "notification": {
+    "title": "Notifications",
+    "subtitle": "Stay updated with your latest activities and alerts.",
+    "tabs": {
+      "all": "All",
+      "unread": "Unread",
+      "videos": "Videos",
+      "payments": "Payments"
+    },
+    "stats": {
+      "total": "{{count}} notifications",
+      "unread": "{{count}} unread"
+    },
+    "actions": {
+      "markAllRead": "Mark all read",
+      "clearAll": "Clear all",
+      "viewAll": "View all notifications",
+      "viewVideo": "View video",
+      "viewReceipt": "View receipt",
+      "upgradePlan": "Upgrade plan",
+      "tryNow": "Try it now"
+    },
+    "item": {
+      "viewDetails": "View Details",
+      "markAsRead": "Mark as read",
+      "delete": "Delete"
+    },
+    "empty": {
+      "title": "No notifications",
+      "subtitle": "You're all caught up! Check back later."
+    },
+    "time": {
+      "minutesAgo": "{{count}} minutes ago",
+      "hoursAgo": "{{count}} hours ago",
+      "daysAgo": "{{count}} days ago"
+    },
+    "mocks": {
+      "videoProcessed": {
+        "title": "Video processing complete",
+        "message": "Your video \"Summer Vacation 2024\" has been successfully processed and is now ready to stream."
+      },
+      "paymentSuccess": {
+        "title": "Payment successful",
+        "message": "Your subscription to Pro Plan has been renewed successfully. Next billing date: Feb 25, 2026."
+      },
+      "storageWarning": {
+        "title": "Storage almost full",
+        "message": "You have used 85% of your storage quota. Consider upgrading your plan for more space."
+      },
+      "uploadSuccess": {
+        "title": "Upload successful",
+        "message": "Your video \"Product Demo v2\" has been uploaded successfully."
+      },
+      "maintenance": {
+        "title": "Scheduled maintenance",
+        "message": "We will perform scheduled maintenance on Jan 30, 2026 from 2:00 AM to 4:00 AM UTC."
+      },
+      "newFeature": {
+        "title": "New feature available",
+        "message": "We just launched video analytics! Track your video performance with detailed insights."
+      }
+    }
+  },
+  "upload": {
+    "dialog": {
+      "title": "Upload Videos",
+      "subtitle": "Add up to {{maxItems}} videos per batch",
+      "mode": {
+        "local": "Local",
+        "remote": "Remote URL"
+      },
+      "queueFullTitle": "Queue is full",
+      "queueFullDescription": "Maximum {{maxItems}} videos per batch. Start or clear the current queue first.",
+      "slotsRemaining": "{{remaining}} / {{maxItems}} slots remaining",
+      "formatsHint": "MP4, MOV, MKV · max 10 GB per file",
+      "close": "Close",
+      "startUpload": "Start Upload ({{count}})",
+      "duplicateFilesSummary": "Duplicate files skipped",
+      "duplicateFilesDetailOne": "{{count}} file is already in the queue.",
+      "duplicateFilesDetailOther": "{{count}} files are already in the queue.",
+      "duplicateUrlsSummary": "Duplicate URLs skipped",
+      "duplicateUrlsDetailOne": "{{count}} URL is already in the queue.",
+      "duplicateUrlsDetailOther": "{{count}} URLs are already in the queue."
+    },
+    "dropzone": {
+      "releaseToAdd": "Release to add",
+      "dropHere": "Drop videos here",
+      "browse": "or click anywhere to browse"
+    },
+    "remote": {
+      "placeholder": "Paste video URLs here, one per line\n\nhttps://example.com/video.mp4\nhttps://drive.google.com/...",
+      "providersHint": "Google Drive, Dropbox supported",
+      "addUrls": "Add URLs"
+    },
+    "queue": {
+      "empty": "Empty queue!",
+      "totalSize": "Total size:",
+      "zeroSize": "0 MB"
+    },
+    "queueItem": {
+      "remoteFileName": "Remote File",
+      "unknownSize": "Unknown",
+      "status": {
+        "pending": "Pending",
+        "uploading": "Uploading...",
+        "uploadingThreads": "Uploading · {{threads}} threads",
+        "processing": "Processing...",
+        "complete": "Done",
+        "error": "Failed",
+        "fetching": "Fetching..."
+      }
+    },
+    "infoTip": {
+      "title": "Tip: For fastest processing",
+      "description": "Upload videos in H.264 video codec + AAC audio codec format (e.g., MP4 with H.264/AAC). Videos in this format will be processed much faster (seconds instead of minutes) because they do not need re-encoding."
+    },
+    "bulkActions": {
+      "title": "Quick Settings",
+      "applyToPending": "Apply to {{count}} pending files",
+      "selectCategory": "Select category...",
+      "category": {
+        "learning": "Learning",
+        "entertainment": "Entertainment"
+      },
+      "visibility": {
+        "public": "Public",
+        "private": "Private"
+      }
+    },
+    "indicator": {
+      "allDone": "All done",
+      "uploading": "Uploading {{count}} files...",
+      "waiting": "{{count}} files waiting",
+      "completeProgress": "{{complete}} of {{total}} complete",
+      "start": "Start",
+      "viewVideos": "View Videos",
+      "addMoreFiles": "Add more files"
+    },
+    "errors": {
+      "chunkUploadFailed": "Failed to upload chunk {{index}}",
+      "mergeFailed": "Merge failed"
+    }
+  },
+  "home": {
+    "nav": {
+      "features": "Features",
+      "pricing": "Pricing",
+      "login": "Log in",
+      "startFree": "Start for free"
+    },
+    "hero": {
+      "titleLine1": "Video infrastructure for",
+      "titleLine2": "modern internet.",
+      "subtitle": "Seamlessly host, encode, and stream video with our developer-first API. Optimized for speed, built for scale.",
+      "getStarted": "Get Started",
+      "uploadVideo": "Upload video"
+    },
+    "features": {
+      "heading": "Everything you need to ship video",
+      "subtitle": "Focus on building your product. We'll handle the complex video infrastructure.",
+      "global": {
+        "title": "Global Edge Network",
+        "description": "Content delivered from 200+ PoPs worldwide. Automatic region selection ensures the lowest latency for every viewer."
+      },
+      "live": {
+        "title": "Streaming API",
+        "description": "Scale to millions of concurrent viewers with ultra-low latency. RTMP ingest and HLS playback supported natively.",
+        "status": "Live Status",
+        "onAir": "On Air",
+        "bitrate": "Bitrate:",
+        "fps": "FPS:",
+        "latency": "Latency:",
+        "bitrateValue": "6000 kbps",
+        "fpsValue": "60",
+        "latencyValue": "~2s"
+      },
+      "encoding": {
+        "title": "Instant Encoding",
+        "description": "Upload raw files and get optimized HLS/DASH streams in seconds."
+      },
+      "analytics": {
+        "title": "Deep Analytics",
+        "description": "Session-level insights, quality of experience (QoE) metrics, and more."
+      }
+    },
+    "pricing": {
+      "title": "Simple, transparent pricing",
+      "subtitle": "Choose the plan that fits your needs. No hidden fees.",
+      "perMonth": "/mo",
+      "hobby": {
+        "name": "Hobby",
+        "features": [
+          "Unlimited upload",
+          "1 Hour of Storage",
+          "Standard Support"
+        ],
+        "button": "Start Free"
+      },
+      "pro": {
+        "name": "Pro",
+        "features": [
+          "Ads free player",
+          "Support M3U8",
+          "Unlimited upload",
+          "Custom ads"
+        ],
+        "button": "Get Started",
+        "tag": "POPULAR"
+      },
+      "scale": {
+        "name": "Scale",
+        "features": ["5 TB Bandwidth", "500 Hours Storage", "Priority Support"],
+        "button": "Contact Sales",
+        "tag": "Best Value"
+      }
+    },
+    "footer": {
+      "description": "Building the video layer of the internet. Designed for developers.",
+      "product": "Product",
+      "productFeatures": "Features",
+      "productPricing": "Pricing",
+      "productShowcase": "Showcase",
+      "company": "Company",
+      "companyAbout": "About",
+      "companyBlog": "Blog",
+      "companyCareers": "Careers",
+      "legal": "Legal",
+      "privacy": "Privacy",
+      "terms": "Terms",
+      "copyright": "© {year} EcoStream Inc. All rights reserved."
+    },
+    "head": {
+      "title": "EcoStream - Video infrastructure for modern internet",
+      "description": "Seamlessly host, encode, and stream video with our developer-first API. Optimized for speed, built for scale."
+    }
+  },
+  "legal": {
+    "common": {
+      "heading": "Legal & Privacy Policy",
+      "subheading": "Legal & Privacy Policy",
+      "description": "Our legal and privacy policy."
+    },
+    "terms": {
+      "title": "Terms and Conditions - Ecostream",
+      "description": "Read Ecostream's terms and conditions for using our video hosting and streaming services.",
+      "pageHeading": "Terms and Conditions Details",
+      "pageSubheading": "Terms and Conditions",
+      "pageDescription": "Our terms and conditions set forth important guidelines and rules for using Ecostream's services.",
+      "sections": {
+        "acceptanceTitle": "1. Acceptance of Terms",
+        "acceptanceText": "By accessing and using Ecostream, you accept and agree to be bound by the terms and provision of this agreement.",
+        "usageTitle": "2. Service Usage",
+        "usageText": "You agree to use our service only for lawful purposes. You are prohibited from posting or transmitting any unlawful, threatening, libelous, defamatory, obscene, or profane material. We reserve the right to terminate accounts that violate these terms.",
+        "ownershipTitle": "3. Content Ownership",
+        "ownershipText": "You retain all rights and ownership of the content you upload to Ecostream. However, by uploading content, you grant us a license to host, store, and display the content as necessary to provide our services.",
+        "liabilityTitle": "4. Limitation of Liability",
+        "liabilityText": "Ecostream shall not be liable for any direct, indirect, incidental, special, or consequential damages resulting from the use or inability to use our service.",
+        "changesTitle": "5. Changes to Terms",
+        "changesText": "We reserve the right to modify these terms at any time. Your continued use of the service after any such changes constitutes your acceptance of the new terms."
+      }
+    },
+    "privacy": {
+      "title": "Privacy Policy - Ecostream",
+      "description": "Read about Ecostream's commitment to protecting your privacy and data security.",
+      "pageHeading": "Legal & Privacy Policy",
+      "pageSubheading": "Legal & Privacy Policy",
+      "pageDescription": "Our legal and privacy policy.",
+      "sections": {
+        "policyTitle": "1. Privacy Policy",
+        "policyText": "At Ecostream, we take your privacy seriously. This policy describes how we collect, use, and protect your personal information. We only collect information that is necessary for the operation of our service, including email addresses for account creation and payment information for subscription processing.",
+        "dataCollectionTitle": "2. Data Collection",
+        "dataCollectionText": "We collect data such as IP addresses, browser types, and access times to analyze trends and improve our service. Uploaded content is stored securely and is only accessed as required for the delivery of our hosting services.",
+        "cookieTitle": "3. Cookie Policy",
+        "cookieText": "We use cookies to maintain user sessions and preferences. By using our website, you consent to the use of cookies in accordance with this policy.",
+        "dmcaTitle": "4. DMCA & Copyright",
+        "dmcaText": "Ecostream respects the intellectual property rights of others. We respond to notices of alleged copyright infringement in accordance with the Digital Millennium Copyright Act (DMCA). Please report any copyright violations to our support team."
+      }
+    }
+  },
+  "notFound": {
+    "headTitle": "404 - Page Not Found",
+    "title": "404 - Page Not Found",
+    "description": "The page you are looking for does not exist.",
+    "backHome": "Go back to Home"
+  }
+}
diff --git a/public/locales/vi/translation.json b/public/locales/vi/translation.json
new file mode 100644
index 0000000..d3e14f6
--- /dev/null
+++ b/public/locales/vi/translation.json
@@ -0,0 +1,1350 @@
+{
+  "common": {
+    "save": "Lưu",
+    "close": "Đóng",
+    "cancel": "Hủy",
+    "connect": "Kết nối",
+    "disconnect": "Ngắt kết nối",
+    "upload": "Tải lên",
+    "loading": "Đang tải",
+    "actions": "Hành động",
+    "status": "Trạng thái",
+    "videos": "Video",
+    "selected": "{{count}} mục đã chọn",
+    "copy": "Sao chép",
+    "rowsPerPage": "Số hàng mỗi trang",
+    "next": "Tiếp",
+    "previous": "Trước",
+    "page": "Trang {{current}} trên {{total}}",
+    "records": "bản ghi"
+  },
+  "app": {
+    "name": "EcoStream"
+  },
+  "auth": {
+    "layout": {
+      "login": {
+        "headTitle": "Đăng nhập vào tài khoản",
+        "title": "Đăng nhập vào bảng điều khiển",
+        "subtitle": "Vui lòng nhập thông tin để đăng nhập."
+      },
+      "signup": {
+        "headTitle": "Tạo tài khoản",
+        "title": "Tạo tài khoản",
+        "subtitle": "Vui lòng điền thông tin để tạo tài khoản."
+      },
+      "forgot": {
+        "headTitle": "Đặt lại mật khẩu",
+        "title": "Quên mật khẩu?",
+        "subtitle": "Nhập email và chúng tôi sẽ gửi liên kết đặt lại mật khẩu."
+      }
+    },
+    "login": {
+      "email": "Email",
+      "password": "Mật khẩu",
+      "forgotPassword": "Quên mật khẩu?",
+      "signIn": "Đăng nhập",
+      "google": "Google",
+      "noAccount": "Chưa có tài khoản?",
+      "signUp": "Đăng ký",
+      "errors": {
+        "emailRequired": "Email là bắt buộc.",
+        "emailInvalid": "Địa chỉ email không hợp lệ.",
+        "passwordRequired": "Mật khẩu là bắt buộc."
+      }
+    },
+    "signup": {
+      "fullName": "Họ và tên",
+      "email": "Địa chỉ email",
+      "password": "Mật khẩu",
+      "passwordHint": "Tối thiểu 8 ký tự.",
+      "createAccount": "Tạo tài khoản",
+      "alreadyHave": "Đã có tài khoản?",
+      "signIn": "Đăng nhập",
+      "placeholders": {
+        "name": "Nguyễn Văn A",
+        "email": "ban@example.com",
+        "password": "Tạo mật khẩu"
+      },
+      "errors": {
+        "nameRequired": "Tên là bắt buộc.",
+        "emailRequired": "Email là bắt buộc.",
+        "emailInvalid": "Địa chỉ email không hợp lệ.",
+        "passwordMin": "Mật khẩu phải có ít nhất 8 ký tự."
+      }
+    },
+    "forgot": {
+      "description": "Nhập email và chúng tôi sẽ gửi liên kết đặt lại mật khẩu.",
+      "email": "Địa chỉ email",
+      "sendResetLink": "Gửi liên kết đặt lại",
+      "backToSignIn": "Quay lại đăng nhập",
+      "placeholders": {
+        "email": "ban@example.com"
+      },
+      "errors": {
+        "emailRequired": "Email là bắt buộc.",
+        "emailInvalid": "Địa chỉ email không hợp lệ."
+      },
+      "toast": {
+        "successSummary": "Thành công",
+        "successDetail": "Đã gửi liên kết đặt lại",
+        "errorSummary": "Lỗi",
+        "errorDetail": "Đã xảy ra lỗi"
+      }
+    },
+    "errors": {
+      "loginNoUserData": "Đăng nhập thất bại: Không nhận được dữ liệu người dùng",
+      "loginFailed": "Đăng nhập thất bại: {error}",
+      "registrationFailedFallback": "Đăng ký thất bại",
+      "registrationFailed": "Đăng ký thất bại: {error}",
+      "updateProfileFailed": "Cập nhật hồ sơ thất bại: {error}",
+      "changePasswordFailed": "Đổi mật khẩu thất bại: {error}",
+      "unknown": "Lỗi không xác định"
+    }
+  },
+  "nav": {
+    "overview": "Tổng quan",
+    "videos": "Video",
+    "notification": "Thông báo",
+    "settings": "Cài đặt"
+  },
+  "settings": {
+    "menu": {
+      "securityGroup": "Bảo mật",
+      "preferencesGroup": "Tùy chọn",
+      "integrationsGroup": "Tích hợp",
+      "dangerGroup": "Vùng nguy hiểm",
+      "security": "Bảo mật",
+      "billing": "Thanh toán & Gói",
+      "notifications": "Thông báo",
+      "playerGroup": "Trình phát",
+      "playerConfigs": "Cấu hình trình phát",
+      "domains": "Tên miền được phép",
+      "ads": "Quảng cáo & VAST",
+      "danger": "Vùng nguy hiểm",
+      "popupAds": "Popup Ads"
+    },
+    "content": {
+      "fallbackTitle": "Cài đặt",
+      "fallbackSubtitle": "Quản lý cài đặt và tùy chọn tài khoản của bạn.",
+      "security": {
+        "title": "Bảo mật & Tài khoản liên kết",
+        "subtitle": "Quản lý bảo mật và ứng dụng đã liên kết."
+      },
+      "notifications": {
+        "title": "Thông báo",
+        "subtitle": "Chọn cách bạn muốn nhận thông báo và cập nhật."
+      },
+      "preferences": {
+        "title": "Tùy chọn",
+        "subtitle": "Quản lý các tùy chọn tài khoản và kênh thông báo của bạn."
+      },
+      "billing": {
+        "title": "Thanh toán & Gói",
+        "subtitle": "Thông tin gói và thanh toán hiện tại của bạn."
+      },
+      "domains": {
+        "title": "Tên miền được phép",
+        "subtitle": "Thêm tên miền vào whitelist để cho phép nhúng nội dung qua iframe."
+      },
+      "ads": {
+        "title": "Quảng cáo & VAST",
+        "subtitle": "Tạo và quản lý mẫu quảng cáo VAST cho video."
+      },
+      "playerConfigs": {
+        "title": "Cấu hình trình phát",
+        "subtitle": "Tạo và quản lý cấu hình trình phát cho video."
+      },
+      "danger": {
+        "title": "Vùng nguy hiểm",
+        "subtitle": "Hành động không thể hoàn tác và có tính phá hủy. Hãy cẩn thận!"
+      },
+      "popupAds": {
+        "title": "Popup Ads",
+        "subtitle": "Quản lý cài đặt và tùy chọn quảng cáo popup của bạn."
+      }
+    },
+    "notificationSettings": {
+      "saveChanges": "Lưu thay đổi",
+      "types": {
+        "email": {
+          "title": "Thông báo Email",
+          "description": "Nhận cập nhật và cảnh báo qua email"
+        },
+        "push": {
+          "title": "Thông báo đẩy",
+          "description": "Nhận cảnh báo tức thì trên trình duyệt"
+        },
+        "marketing": {
+          "title": "Email marketing",
+          "description": "Nhận khuyến mãi và cập nhật sản phẩm"
+        },
+        "telegram": {
+          "title": "Thông báo Telegram",
+          "description": "Nhận cập nhật qua Telegram"
+        }
+      },
+      "toast": {
+        "savedSummary": "Đã lưu cài đặt",
+        "savedDetail": "Cài đặt thông báo của bạn đã được lưu.",
+        "failedSummary": "Lưu thất bại",
+        "failedDetail": "Không thể lưu cài đặt."
+      }
+    },
+    "playerSettings": {
+      "toast": {
+        "savedSummary": "Đã lưu cài đặt",
+        "savedDetail": "Cài đặt trình phát của bạn đã được lưu.",
+        "failedSummary": "Lưu thất bại",
+        "failedDetail": "Không thể lưu cài đặt."
+      },
+      "items": {
+        "autoplay": {
+          "title": "Tự phát",
+          "description": "Tự động phát video khi tải xong"
+        },
+        "loop": {
+          "title": "Lặp lại",
+          "description": "Phát lại video khi kết thúc"
+        },
+        "muted": {
+          "title": "Tắt tiếng",
+          "description": "Bắt đầu video với âm thanh tắt"
+        },
+        "showControls": {
+          "title": "Hiển thị điều khiển",
+          "description": "Hiển thị thanh điều khiển (phát, tạm dừng, âm lượng)"
+        },
+        "pip": {
+          "title": "Picture in Picture",
+          "description": "Bật chế độ Picture-in-Picture"
+        },
+        "airplay": {
+          "title": "AirPlay",
+          "description": "Cho phép phát tới thiết bị Apple qua AirPlay"
+        },
+        "chromecast": {
+          "title": "Chromecast",
+          "description": "Cho phép cast tới thiết bị Chromecast"
+        },
+        "encrytion_m3u8": {
+          "title": "Mã hóa HLS (m3u8)",
+          "description": "Bật mã hóa cho luồng HLS (Chống download trái phép, chỉ dành cho VIP)"
+        }
+      }
+    },
+    "dangerZone": {
+      "deleteAccount": {
+        "title": "Xóa tài khoản",
+        "description": "Xóa vĩnh viễn tài khoản và toàn bộ dữ liệu liên quan.",
+        "button": "Xóa tài khoản"
+      },
+      "clearData": {
+        "title": "Xóa toàn bộ dữ liệu",
+        "description": "Xóa tất cả video, danh sách phát và lịch sử hoạt động của bạn.",
+        "button": "Xóa dữ liệu"
+      },
+      "warning": {
+        "title": "Cảnh báo",
+        "description": "Các hành động này là vĩnh viễn và không thể hoàn tác. Hãy đảm bảo bạn đã sao lưu dữ liệu quan trọng trước khi tiếp tục."
+      },
+      "confirm": {
+        "deleteAccountMessage": "Bạn có chắc muốn xóa tài khoản? Hành động này không thể hoàn tác.",
+        "deleteAccountHeader": "Xóa tài khoản",
+        "deleteAccountAccept": "Xóa",
+        "deleteAccountReject": "Hủy",
+        "clearDataMessage": "Bạn có chắc muốn xóa toàn bộ dữ liệu? Hành động này không thể hoàn tác.",
+        "clearDataHeader": "Xóa toàn bộ dữ liệu",
+        "clearDataAccept": "Xóa",
+        "clearDataReject": "Hủy"
+      },
+      "toast": {
+        "deleteAccountSummary": "Đã xóa tài khoản",
+        "deleteAccountDetail": "Tài khoản và dữ liệu liên quan của bạn đã bị xóa vĩnh viễn.",
+        "clearDataSummary": "Đã xóa dữ liệu",
+        "clearDataDetail": "Toàn bộ dữ liệu của bạn đã bị xóa vĩnh viễn.",
+        "failedSummary": "Thao tác thất bại",
+        "failedDetail": "Không thể hoàn tất thao tác đã yêu cầu."
+      }
+    },
+    "domainsDns": {
+      "addDomain": "Thêm tên miền",
+      "infoBanner": "Chỉ các tên miền trong whitelist mới có thể nhúng nội dung của bạn qua iframe.",
+      "table": {
+        "domain": "Tên miền",
+        "addedDate": "Ngày thêm"
+      },
+      "emptyTitle": "Chưa có tên miền trong whitelist",
+      "emptySubtitle": "Thêm tên miền để cho phép nhúng iframe",
+      "embedCodeTitle": "Mã nhúng",
+      "copyCode": "Sao chép mã",
+      "embedCodeHint": "Dùng đoạn iframe này để nhúng nội dung trên các tên miền đã whitelist.",
+      "dialog": {
+        "title": "Thêm tên miền vào whitelist",
+        "domainLabel": "Tên miền",
+        "domainPlaceholder": "example.com",
+        "domainHint": "Nhập tên miền không kèm www hoặc https:// (ví dụ: example.com)",
+        "importantTitle": "Quan trọng",
+        "importantDetail": "Chỉ thêm những tên miền bạn sở hữu và kiểm soát."
+      },
+      "confirm": {
+        "removeMessage": "Bạn có chắc muốn xóa {domain} khỏi whitelist? Các iframe nhúng từ tên miền này sẽ không còn hoạt động.",
+        "removeHeader": "Xóa tên miền",
+        "removeAccept": "Xóa",
+        "removeReject": "Hủy"
+      },
+      "toast": {
+        "invalidSummary": "Tên miền không hợp lệ",
+        "invalidDetail": "Vui lòng nhập tên miền hợp lệ.",
+        "duplicateSummary": "Tên miền đã tồn tại",
+        "duplicateDetail": "Tên miền này đã có trong whitelist.",
+        "addedSummary": "Đã thêm tên miền",
+        "addedDetail": "{domain} đã được thêm vào whitelist.",
+        "removedSummary": "Đã xóa tên miền",
+        "removedDetail": "{domain} đã được xóa khỏi whitelist.",
+        "copiedSummary": "Đã sao chép",
+        "copiedDetail": "Đã sao chép mã nhúng vào clipboard.",
+        "failedSummary": "Thao tác thất bại",
+        "failedDetail": "Không thể tải hoặc cập nhật danh sách tên miền."
+      }
+    },
+    "playerConfigs": {
+      "createConfig": "Tạo cấu hình",
+      "infoBanner": "Cấu hình trình phát cho phép tùy chỉnh hành vi phát video như tự động phát, lặp, hiển thị điều khiển và các tính năng casting.",
+      "freePlanTitle": "Giới hạn gói free",
+      "freePlanMessage": "Tài khoản free có thể tạo và quản lý 1 player config. Sau khi đã có 1 config, bạn cần xóa nó trước khi tạo config mới.",
+      "reconciliationTitle": "Có quá nhiều config cho gói free",
+      "reconciliationMessage": "Tài khoản của bạn vẫn còn hơn 1 player config từ gói paid trước đó. Hãy xóa bớt cho đến khi chỉ còn 1 config để có thể sửa, bật/tắt hoặc đặt mặc định trở lại.",
+      "readOnlyTitle": "Giới hạn gói free",
+      "readOnlyMessage": "Tài khoản free có thể quản lý 1 player config. Sau khi downgrade, hãy xóa bớt config dư để tiếp tục chỉnh sửa.",
+      "defaultBadge": "Mặc định",
+      "createdOn": "Tạo ngày {{date}}",
+      "emptyTitle": "Chưa có cấu hình",
+      "emptySubtitle": "Tạo config đầu tiên để tùy chỉnh trải nghiệm phát video",
+      "items": {
+        "autoplay": {
+          "title": "Tự phát",
+          "description": "Tự động phát video khi tải xong"
+        },
+        "loop": {
+          "title": "Lặp lại",
+          "description": "Phát lại video khi kết thúc"
+        },
+        "muted": {
+          "title": "Tắt tiếng",
+          "description": "Bắt đầu video với âm thanh tắt"
+        },
+        "showControls": {
+          "title": "Hiển thị điều khiển",
+          "description": "Hiển thị thanh điều khiển phát video"
+        },
+        "pip": {
+          "title": "Picture in Picture",
+          "description": "Bật chế độ Picture-in-Picture"
+        },
+        "airplay": {
+          "title": "AirPlay",
+          "description": "Cho phép phát tới thiết bị Apple qua AirPlay"
+        },
+        "chromecast": {
+          "title": "Chromecast",
+          "description": "Cho phép cast tới thiết bị Chromecast"
+        },
+        "encrytionM3u8": {
+          "title": "Mã hóa HLS (m3u8)",
+          "description": "Bật mã hóa cho luồng HLS."
+        }
+      },
+      "badges": {
+        "autoplay": "Tự phát",
+        "loop": "Lặp",
+        "muted": "Tắt tiếng",
+        "controls": "Điều khiển",
+        "pip": "PiP",
+        "airplay": "AirPlay",
+        "chromecast": "Chromecast",
+        "encrytionM3u8": "HLS mã hóa",
+        "logo": "Logo"
+      },
+      "state": {
+        "enabled": "bật",
+        "disabled": "tắt"
+      },
+      "actions": {
+        "default": "Mặc định",
+        "setDefault": "Đặt mặc định"
+      },
+      "table": {
+        "name": "Tên",
+        "settings": "Cài đặt"
+      },
+      "dialog": {
+        "editTitle": "Sửa cấu hình",
+        "createTitle": "Tạo cấu hình trình phát",
+        "name": "Tên cấu hình",
+        "namePlaceholder": "ví dụ: Mobile Player, Desktop Player",
+        "description": "Mô tả",
+        "descriptionPlaceholder": "Mô tả ngắn cho cấu hình này",
+        "playbackOptions": "Tùy chọn phát lại",
+        "castingOptions": "Tùy chọn casting",
+        "advancedOptions": "Tùy chọn nâng cao",
+        "logoUrl": "URL logo",
+        "logoUrlPlaceholder": "https://example.com/logo.png",
+        "logoUrlHint": "Logo tùy chọn hiển thị trong lớp phủ của trình phát.",
+        "defaultLabel": "Cấu hình mặc định",
+        "defaultCheckbox": "Dùng cấu hình này mặc định cho video mới",
+        "defaultHint": "Khi bật, video mới tạo sẽ tự động dùng cấu hình đang active này.",
+        "defaultDisabledHint": "Hãy bật cấu hình này trước khi đặt làm mặc định.",
+        "update": "Cập nhật",
+        "create": "Tạo"
+      },
+      "confirm": {
+        "deleteMessage": "Bạn có chắc muốn xóa \"{{name}}\"?",
+        "deleteHeader": "Xóa cấu hình",
+        "deleteAccept": "Xóa",
+        "deleteReject": "Hủy"
+      },
+      "toast": {
+        "nameRequiredSummary": "Thiếu tên cấu hình",
+        "nameRequiredDetail": "Vui lòng nhập tên cấu hình.",
+        "updatedSummary": "Đã cập nhật cấu hình",
+        "updatedDetail": "Cấu hình trình phát đã được cập nhật.",
+        "createdSummary": "Đã tạo cấu hình",
+        "createdDetail": "Cấu hình trình phát đã được tạo.",
+        "enabledSummary": "Đã bật cấu hình",
+        "disabledSummary": "Đã tắt cấu hình",
+        "defaultUpdatedSummary": "Đã cập nhật mặc định",
+        "defaultUpdatedDetail": "{{name}} hiện là cấu hình mặc định cho video mới.",
+        "upgradeRequiredSummary": "Đã đạt giới hạn cấu hình",
+        "upgradeRequiredDetail": "Tài khoản free chỉ có thể có 1 player config.",
+        "limitSummary": "Đã đạt giới hạn cấu hình",
+        "limitDetail": "Tài khoản free chỉ có thể có 1 player config.",
+        "reconciliationSummary": "Hãy xóa bớt config",
+        "reconciliationDetail": "Hãy xóa các player config dư cho đến khi chỉ còn 1 config để tiếp tục quản lý trên gói free.",
+        "toggleDetail": "{{name}} đã được {state}.",
+        "deletedSummary": "Đã xóa cấu hình",
+        "deletedDetail": "Cấu hình trình phát đã được gỡ bỏ.",
+        "failedSummary": "Thao tác thất bại",
+        "failedDetail": "Không thể tải hoặc cập nhật cấu hình trình phát."
+      }
+    },
+    "adsVast": {
+      "createTemplate": "Tạo mẫu",
+      "infoBanner": "VAST (Video Ad Serving Template) là schema XML dùng để phân phối ad tags cho trình phát video.",
+      "readOnlyTitle": "Cần nâng cấp gói",
+      "readOnlyMessage": "Ads & VAST ở chế độ chỉ đọc với gói free. Hãy nâng cấp gói để tạo, sửa, xóa, bật/tắt hoặc đặt mẫu mặc định.",
+      "defaultBadge": "Mặc định",
+      "createdOn": "Tạo ngày {{date}}",
+      "emptyTitle": "Chưa có mẫu VAST",
+      "emptySubtitle": "Tạo mẫu để bắt đầu kiếm tiền từ video",
+      "formats": {
+        "preRoll": "Pre-roll",
+        "midRoll": "Mid-roll",
+        "postRoll": "Post-roll"
+      },
+      "state": {
+        "enabled": "bật",
+        "disabled": "tắt"
+      },
+      "actions": {
+        "default": "Mặc định",
+        "setDefault": "Đặt mặc định"
+      },
+      "table": {
+        "template": "Mẫu",
+        "format": "Định dạng",
+        "vastUrl": "VAST URL"
+      },
+      "dialog": {
+        "editTitle": "Sửa mẫu",
+        "createTitle": "Tạo mẫu VAST",
+        "templateName": "Tên mẫu",
+        "templateNamePlaceholder": "ví dụ: Main Pre-roll Ad",
+        "vastUrlLabel": "VAST Tag URL",
+        "vastUrlPlaceholder": "https://ads.example.com/vast/tag.xml",
+        "adFormat": "Định dạng quảng cáo",
+        "adInterval": "Khoảng cách quảng cáo (giây)",
+        "adIntervalPlaceholder": "30",
+        "defaultLabel": "Mẫu mặc định",
+        "defaultCheckbox": "Dùng mẫu này mặc định cho video mới",
+        "defaultHint": "Khi bật, video mới tạo sẽ tự động dùng mẫu đang active này.",
+        "defaultDisabledHint": "Hãy bật mẫu này trước khi đặt làm mặc định.",
+        "update": "Cập nhật",
+        "create": "Tạo"
+      },
+      "confirm": {
+        "deleteMessage": "Bạn có chắc muốn xóa \"{{name}}\"?",
+        "deleteHeader": "Xóa mẫu",
+        "deleteAccept": "Xóa",
+        "deleteReject": "Hủy"
+      },
+      "toast": {
+        "nameRequiredSummary": "Thiếu tên mẫu",
+        "nameRequiredDetail": "Vui lòng nhập tên mẫu.",
+        "urlRequiredSummary": "Thiếu VAST URL",
+        "urlRequiredDetail": "Vui lòng nhập VAST tag URL.",
+        "invalidUrlSummary": "URL không hợp lệ",
+        "invalidUrlDetail": "Vui lòng nhập URL hợp lệ.",
+        "durationRequiredSummary": "Thiếu thời lượng",
+        "durationRequiredDetail": "Quảng cáo mid-roll yêu cầu thời lượng/khoảng cách.",
+        "updatedSummary": "Đã cập nhật mẫu",
+        "updatedDetail": "Mẫu VAST đã được cập nhật.",
+        "createdSummary": "Đã tạo mẫu",
+        "createdDetail": "Mẫu VAST đã được tạo.",
+        "enabledSummary": "Đã bật mẫu",
+        "disabledSummary": "Đã tắt mẫu",
+        "defaultUpdatedSummary": "Đã cập nhật mặc định",
+        "defaultUpdatedDetail": "{{name}} hiện là mẫu mặc định cho video mới.",
+        "upgradeRequiredSummary": "Cần nâng cấp gói",
+        "upgradeRequiredDetail": "Hãy nâng cấp gói để quản lý Ads & VAST.",
+        "toggleDetail": "{{name}} đã được {state}.",
+        "deletedSummary": "Đã xóa mẫu",
+        "deletedDetail": "Mẫu VAST đã được gỡ bỏ.",
+        "copiedSummary": "Đã sao chép",
+        "copiedDetail": "Đã sao chép URL vào clipboard.",
+        "failedSummary": "Thao tác thất bại",
+        "failedDetail": "Không thể tải hoặc cập nhật mẫu VAST."
+      }
+    },
+    "popupAds": {
+      "createItem": "Thêm popup ad",
+      "maxTriggersLabel": "Giới hạn trigger URL cao nhất mỗi phiên ({{count}})",
+      "emptyTitle": "Chưa có popup ad",
+      "emptySubtitle": "Tạo popup ad để bắt đầu mở URL hoặc inject script.",
+      "types": {
+        "url": "URL",
+        "script": "Script"
+      },
+      "table": {
+        "label": "Nhãn",
+        "type": "Loại",
+        "target": "Đích",
+        "maxTriggersPerSession": "Số trigger tối đa/phiên"
+      },
+      "dialog": {
+        "createTitle": "Tạo popup ad",
+        "editTitle": "Sửa popup ad",
+        "type": "Loại",
+        "label": "Nhãn",
+        "labelPlaceholder": "ví dụ: Ad Network 1",
+        "url": "URL đích",
+        "urlPlaceholder": "https://example.com/landing-page",
+        "script": "Đoạn script",
+        "scriptPlaceholder": "<script async src=\"//example.com/ad.js\"></script>",
+        "maxTriggersPerSession": "Số lần popup tối đa mỗi phiên",
+        "activeTitle": "Trạng thái mục",
+        "activeDescription": "Tắt một mục để giữ nó trong bảng mà không phân phối nó.",
+        "update": "Cập nhật",
+        "create": "Tạo"
+      },
+      "info": {
+        "urlTitle": "URL:",
+        "urlDescription": "Mở tab mới khi người xem nhấp.",
+        "scriptTitle": "Script:",
+        "scriptDescription": "Inject script tag vào trang cho các mạng popup/popunder."
+      },
+      "confirm": {
+        "deleteMessage": "Bạn có chắc muốn xóa \"{{name}}\"?",
+        "deleteHeader": "Xóa popup ad",
+        "deleteAccept": "Xóa",
+        "deleteReject": "Hủy"
+      },
+      "toast": {
+        "labelRequiredSummary": "Thiếu nhãn",
+        "labelRequiredDetail": "Vui lòng nhập nhãn cho popup ad này.",
+        "valueRequiredSummary": "Thiếu giá trị",
+        "valueRequiredDetail": "Vui lòng nhập URL hoặc đoạn script.",
+        "maxTriggersRequiredSummary": "Thiếu giới hạn trigger",
+        "maxTriggersRequiredDetail": "Vui lòng nhập số trigger lớn hơn 0 cho popup ad loại URL.",
+        "invalidUrlSummary": "URL không hợp lệ",
+        "invalidUrlDetail": "Vui lòng nhập URL hợp lệ.",
+        "createdSummary": "Đã tạo popup ad",
+        "createdDetail": "Popup ad đã được thêm.",
+        "updatedSummary": "Đã cập nhật popup ad",
+        "updatedDetail": "Popup ad đã được cập nhật.",
+        "deletedSummary": "Đã xóa popup ad",
+        "deletedDetail": "Popup ad đã được gỡ bỏ.",
+        "failedSummary": "Thao tác thất bại",
+        "failedDetail": "Không thể tải hoặc cập nhật popup ads."
+      }
+    },
+    "profile": {
+      "title": "Thông tin hồ sơ",
+      "subtitle": "Quản lý thông tin cá nhân và chi tiết tài khoản của bạn.",
+      "userFallback": "Người dùng",
+      "username": "Tên người dùng",
+      "email": "Địa chỉ email",
+      "storageUsage": "Dung lượng sử dụng",
+      "storageUsedOfLimit": "Đã dùng {{used}}",
+      "editProfile": "Chỉnh sửa hồ sơ",
+      "changePassword": "Đổi mật khẩu"
+    },
+    "connectedAccounts": {
+      "title": "Tài khoản liên kết",
+      "email": {
+        "label": "Email",
+        "connected": "Đã kết nối",
+        "notConnected": "Chưa kết nối",
+        "disconnected": "Đã ngắt kết nối"
+      },
+      "telegram": {
+        "label": "Telegram",
+        "hint": "Nhận thông báo qua Telegram",
+        "connectedFallback": "Đã kết nối"
+      }
+    },
+    "billing": {
+      "walletBalance": "Số dư ví",
+      "currentBalance": "Số dư hiện tại: {{balance}}",
+      "topUp": "Nạp tiền",
+      "availablePlans": "Các gói khả dụng",
+      "availablePlansHint": "Chọn gói phù hợp nhất với nhu cầu của bạn",
+      "planStorage": "{{storage}} dung lượng",
+      "planDuration": "{{duration}} thời lượng tối đa",
+      "planUploads": "{{count}} lượt tải / ngày",
+      "currentPlan": "Gói hiện tại",
+      "processing": "Đang xử lý...",
+      "upgrade": "Nâng cấp",
+      "storage": "Dung lượng",
+      "storageUsedOfLimit": "Đã dùng {{used}}",
+      "totalVideos": "Tổng video",
+      "totalVideosUsedOfLimit": "{{used}} video",
+      "paymentHistory": "Lịch sử thanh toán",
+      "paymentHistorySubtitle": "Các khoản thanh toán và hóa đơn trước đây của bạn",
+      "noPaymentHistory": "Không tìm thấy lịch sử thanh toán.",
+      "download": "Tải xuống",
+      "durationMinutes": "{{minutes}} phút",
+      "unknownPlan": "Không xác định",
+      "walletTopup": "Nạp tiền ví",
+      "termOption": "{{months}} tháng",
+      "paymentMethod": {
+        "wallet": "Dùng số dư ví",
+        "topup": "Nạp thêm và thanh toán"
+      },
+      "subscription": {
+        "activeTitle": "Gói đang hoạt động",
+        "activeDescription": " Hiệu lực đến {{date}}",
+        "expiringTitle": "Sắp hết hạn",
+        "expiringDescription": "Hết hạn vào {{date}}",
+        "expiredTitle": "Gói đã hết hạn",
+        "expiredDescription": "Gói gần nhất của bạn đã kết thúc vào {{date}}",
+        "freeTitle": "Gói miễn phí",
+        "freeDescription": "Bạn hiện đang sử dụng gói miễn phí."
+      },
+      "history": {
+        "validUntil": "Hiệu lực đến {{date}}"
+      },
+      "cycle": {
+          "MONTHLY": "Tháng",
+          "QUARTERLY": "Quý",
+          "YEARLY": "Năm"
+      },
+      "table": {
+        "date": "Ngày",
+        "amount": "Số tiền",
+        "plan": "Gói",
+        "status": "Trạng thái",
+        "invoice": "Hóa đơn"
+      },
+      "status": {
+        "success": "Thành công",
+        "failed": "Thất bại",
+        "pending": "Đang chờ"
+      },
+      "upgradeDialog": {
+        "title": "Nâng cấp hoặc gia hạn gói",
+        "selectedPlan": "Gói đã chọn",
+        "basePrice": "Giá cơ bản mỗi tháng",
+        "perMonthBase": "Được dùng làm giá cơ sở cho kỳ hạn bạn chọn",
+        "termTitle": "Kỳ hạn thanh toán",
+        "termHint": "Chọn thời gian bạn muốn kích hoạt hoặc gia hạn gói này.",
+        "totalLabel": "Tổng tiền",
+        "walletBalanceLabel": "Số dư ví",
+        "shortfallLabel": "Còn thiếu",
+        "paymentMethodTitle": "Bạn muốn thanh toán theo cách nào?",
+        "paymentMethodHint": "Nếu ví chưa đủ, bạn có thể nạp phần thiếu và hoàn tất mua gói trong cùng một flow.",
+        "walletOptionDescription": "Thử dùng số dư ví hiện tại trước.",
+        "topupOptionDescription": "Nạp ít nhất {{shortfall}} để hoàn tất giao dịch.",
+        "walletCoveredHint": "Số dư ví hiện tại đã đủ để thanh toán gói này.",
+        "walletInsufficientHint": "Ví của bạn còn thiếu {{shortfall}}. Hãy chuyển sang phương án nạp thêm để hoàn tất giao dịch.",
+        "topupAmountLabel": "Số tiền nạp thêm",
+        "topupAmountPlaceholder": "Nhập số tiền muốn nạp",
+        "topupAmountHint": "Phần tiền nạp vượt quá {{shortfall}} sẽ được giữ lại trong ví sau khi nâng cấp.",
+        "payWithWallet": "Thanh toán bằng ví",
+        "topupAndUpgrade": "Nạp thêm và nâng cấp",
+        "choosePlan": "Chọn gói này",
+        "selecting": "Đang mở...",
+        "footerHint": "Nếu gói hiện tại vẫn còn hạn, kỳ hạn mới sẽ được cộng tiếp từ ngày hết hạn hiện tại."
+      },
+      "topupDialog": {
+        "title": "Nạp tiền vào ví",
+        "subtitle": "Chọn số tiền hoặc nhập số tiền tùy chỉnh để nạp vào ví.",
+        "customAmount": "Số tiền tùy chỉnh",
+        "enterAmount": "Nhập số tiền",
+        "hint": "Số tiền nạp tối thiểu là $1. Tiền sẽ được cộng vào ví ngay sau khi thanh toán.",
+        "proceed": "Tiếp tục thanh toán"
+      },
+      "toast": {
+        "subscriptionSuccessSummary": "Đăng ký thành công",
+        "subscriptionSuccessDetail": "Đã kích hoạt {{plan}} trong  {{term}}",
+        "subscriptionFailedSummary": "Đăng ký thất bại",
+        "subscriptionFailedDetail": "Không thể đăng ký gói",
+        "topupSuccessSummary": "Nạp tiền thành công",
+        "topupSuccessDetail": "{{amount}} đã được cộng vào ví của bạn.",
+        "topupFailedSummary": "Nạp tiền thất bại",
+        "topupFailedDetail": "Không thể xử lý nạp tiền.",
+        "downloadingSummary": "Đang tải",
+        "downloadingDetail": "Đang tải hóa đơn #{invoiceId}...",
+        "downloadedSummary": "Đã tải xong",
+        "downloadedDetail": "Hóa đơn #{invoiceId} đã được tải thành công",
+        "downloadFailedSummary": "Tải xuống thất bại",
+        "downloadFailedDetail": "Không thể tải hóa đơn."
+      }
+    },
+    "securityConnected": {
+      "header": {
+        "title": "Bảo mật & Tài khoản liên kết",
+        "subtitle": "Quản lý cài đặt bảo mật và dịch vụ đã kết nối."
+      },
+      "accountStatus": {
+        "label": "Trạng thái tài khoản",
+        "detail": "Tài khoản của bạn đang hoạt động tốt",
+        "badge": "Đang hoạt động"
+      },
+      "language": {
+        "label": "Ngôn ngữ",
+        "detail": "Chọn ngôn ngữ hiển thị ưu tiên",
+        "save": "Lưu ngôn ngữ",
+        "options": {
+          "en": "English",
+          "vi": "Tiếng Việt"
+        },
+        "toast": {
+          "successSummary": "Đã lưu ngôn ngữ",
+          "successDetail": "Ngôn ngữ đã được cập nhật.",
+          "errorSummary": "Lưu thất bại",
+          "errorDetail": "Không thể lưu ngôn ngữ lên server. Đã áp dụng theo cookie dự phòng."
+        }
+      },
+      "twoFactor": {
+        "label": "Xác thực hai lớp",
+        "enabled": "2FA đã bật",
+        "disabled": "Thêm một lớp bảo mật"
+      },
+      "changePassword": {
+        "label": "Đổi mật khẩu",
+        "detail": "Cập nhật mật khẩu tài khoản",
+        "button": "Đổi mật khẩu",
+        "dialog": {
+          "title": "Đổi mật khẩu",
+          "subtitle": "Nhập mật khẩu hiện tại và chọn mật khẩu mới.",
+          "current": "Mật khẩu hiện tại",
+          "new": "Mật khẩu mới",
+          "confirm": "Xác nhận mật khẩu mới",
+          "currentPlaceholder": "Nhập mật khẩu hiện tại",
+          "newPlaceholder": "Nhập mật khẩu mới",
+          "confirmPlaceholder": "Xác nhận mật khẩu mới",
+          "submit": "Đổi mật khẩu",
+          "cancel": "Hủy",
+          "errors": {
+            "mismatch": "Mật khẩu xác nhận không khớp",
+            "minLength": "Mật khẩu phải có ít nhất 6 ký tự",
+            "default": "Không thể đổi mật khẩu"
+          }
+        },
+        "toast": {
+          "successSummary": "Đổi mật khẩu thành công",
+          "successDetail": "Mật khẩu của bạn đã được cập nhật."
+        }
+      },
+      "logout": {
+        "label": "Đăng xuất",
+        "detail": "Đăng xuất khỏi thiết bị này.",
+        "button": "Đăng xuất",
+        "confirm": {
+          "message": "Bạn có chắc muốn đăng xuất?",
+          "header": "Đăng xuất",
+          "accept": "Đăng xuất",
+          "reject": "Hủy"
+        }
+      },
+      "email": {
+        "label": "Email",
+        "connected": "Đã kết nối",
+        "disconnected": "Chưa kết nối",
+        "badgeConnected": "Đã kết nối",
+        "badgeDisconnected": "Đã ngắt kết nối"
+      },
+      "telegram": {
+        "label": "Telegram",
+        "detailDisconnected": "Nhận thông báo qua Telegram",
+        "connectedFallback": "Đã kết nối",
+        "connect": "Kết nối",
+        "disconnect": "Ngắt kết nối"
+      },
+      "twoFactorDialog": {
+        "title": "Bật xác thực hai lớp",
+        "subtitle": "Quét mã QR bằng ứng dụng xác thực (Google Authenticator, Authy, v.v.)",
+        "secret": "Khóa bí mật:",
+        "codeLabel": "Mã xác thực",
+        "codePlaceholder": "Nhập mã 6 chữ số",
+        "cancel": "Hủy",
+        "verify": "Xác minh & Bật"
+      },
+      "toast": {
+        "twoFactorEnabledSummary": "Đã bật 2FA",
+        "twoFactorEnabledDetail": "Xác thực hai lớp đã được bật thành công.",
+        "twoFactorEnableFailedSummary": "Bật 2FA thất bại",
+        "twoFactorEnableFailedDetail": "Không thể bật xác thực hai lớp.",
+        "twoFactorDisableFailedSummary": "Tắt 2FA thất bại",
+        "twoFactorDisableFailedDetail": "Không thể tắt xác thực hai lớp.",
+        "twoFactorDisabledSummary": "Đã tắt 2FA",
+        "twoFactorDisabledDetail": "Xác thực hai lớp đã bị tắt.",
+        "twoFactorInvalidCodeSummary": "Bật 2FA thất bại",
+        "twoFactorInvalidCodeDetail": "Mã xác thực không hợp lệ. Vui lòng thử lại.",
+        "telegramConnectedSummary": "Đã kết nối Telegram",
+        "telegramConnectedDetail": "Đã kết nối với {username}",
+        "telegramConnectFailedSummary": "Kết nối thất bại",
+        "telegramConnectFailedDetail": "Không thể kết nối tài khoản Telegram.",
+        "telegramDisconnectedSummary": "Đã ngắt Telegram",
+        "telegramDisconnectedDetail": "Tài khoản Telegram đã được ngắt.",
+        "telegramDisconnectFailedSummary": "Ngắt kết nối thất bại",
+        "telegramDisconnectFailedDetail": "Không thể ngắt kết nối Telegram."
+      }
+    }
+  },
+  "pageHeader": {
+    "dashboard": "Bảng điều khiển",
+    "settings": "Cài đặt"
+  },
+  "confirm": {
+    "defaultHeader": "Xác nhận",
+    "defaultAccept": "Đồng ý",
+    "defaultReject": "Hủy"
+  },
+  "toast": {
+    "dismissAria": "Đóng"
+  },
+  "network": {
+    "offline": {
+      "title": "Bạn đang ngoại tuyến",
+      "description": "Có vẻ như kết nối internet đã bị ngắt. Hãy kiểm tra mạng, ứng dụng sẽ tự kết nối lại khi bạn có mạng trở lại.",
+      "action": "Thử lại"
+    }
+  },
+  "overview": {
+    "welcome": {
+      "title": "Xin chào, {{name}}",
+      "subtitle": "Đây là tình hình nội dung của bạn hôm nay."
+    },
+    "stats": {
+      "totalVideos": "Tổng số video",
+      "totalViews": "Tổng lượt xem",
+      "storageUsed": "Dung lượng đã dùng",
+      "trendVsLastMonth": "so với tháng trước",
+      "unlimited": "Không giới hạn"
+    },
+    "admin-quickActions": {
+      "title": "Thao tác nhanh cho quản trị viên",
+      "manageUsers": {
+        "title": "Quản lý người dùng",
+        "description": "Xem và quản lý tất cả người dùng"
+      },
+      "viewReports": {
+        "title": "Xem báo cáo",
+        "description": "Phân tích hiệu suất hệ thống và hoạt động của người dùng"
+      },
+      "systemSettings": {
+        "title": "Cài đặt hệ thống",
+        "description": "Cấu hình cài đặt và tùy chọn của hệ thống"
+      }
+    },
+    "quickActions": {
+      "title": "Thao tác nhanh",
+      "uploadVideo": {
+        "title": "Tải video lên",
+        "description": "Tải video mới vào thư viện"
+      },
+      "videoLibrary": {
+        "title": "Thư viện video",
+        "description": "Duyệt tất cả video của bạn"
+      },
+      "analytics": {
+        "title": "Phân tích",
+        "description": "Theo dõi hiệu suất & thông tin chi tiết"
+      },
+      "managePlan": {
+        "title": "Quản lý gói",
+        "description": "Nâng cấp hoặc thay đổi gói"
+      }
+    },
+    "referral": {
+      "title": "Liên kết giới thiệu",
+      "subtitle": "Chia sẻ liên kết giới thiệu và nhận hoa hồng từ người dùng được giới thiệu!"
+    },
+    "recentVideos": {
+      "title": "Video gần đây",
+      "viewAll": "Xem tất cả",
+      "emptyTitle": "Không có video",
+      "emptyDescription": "Bạn chưa tải video nào. Hãy bắt đầu với video đầu tiên!",
+      "emptyAction": "Tải video lên",
+      "table": {
+        "video": "Video",
+        "status": "Trạng thái",
+        "duration": "Thời lượng",
+        "uploadDate": "Ngày tải lên",
+        "actions": "Hành động"
+      },
+      "noDescription": "Không có mô tả",
+      "unknownStatus": "Không xác định",
+      "actionEdit": "Sửa",
+      "actionShare": "Chia sẻ",
+      "actionDelete": "Xóa"
+    },
+    "storage": {
+      "title": "Sử dụng dung lượng",
+      "usedOfLimit": "Đã dùng {{used}} trên {{limit}}",
+      "breakdown": {
+        "videos": "Video",
+        "thumbnails": "Thumbnail & tài nguyên",
+        "other": "Tệp khác"
+      },
+      "lowStorage": {
+        "title": "Dung lượng sắp đầy",
+        "message": "Hãy cân nhắc nâng cấp gói để có thêm dung lượng.",
+        "viewPlans": "Xem các gói"
+      }
+    }
+  },
+  "video": {
+    "page": {
+      "title": "Video của tôi",
+      "description": "Quản lý và sắp xếp thư viện video",
+      "uploadAction": "Tải video lên",
+      "uploadDropTitle": "Thả để tải lên",
+      "uploadDropSubtitle": "Tệp sẽ được thêm vào hàng đợi tải lên",
+      "deleteSelectedConfirm": "Xóa {{count}} video?",
+      "deleteSingleConfirm": "Bạn có chắc muốn xóa video này?",
+      "retry": "Thử lại",
+      "emptyTitle": "Không có video",
+      "emptyDescription": "Bạn chưa tải video nào. Hãy bắt đầu với video đầu tiên!",
+      "emptyAction": "Tải video lên",
+      "duplicateSummary": "Đã bỏ qua tệp trùng lặp",
+      "duplicateDetailOne": "{{count}} tệp đã có trong hàng đợi.",
+      "duplicateDetailOther": "{{count}} tệp đã có trong hàng đợi."
+    },
+    "filters": {
+      "searchPlaceholder": "Tìm kiếm video...",
+      "rangeOfTotal": "{{first}}–{{last}} / {{total}}",
+      "previousPageAria": "Trang trước",
+      "nextPageAria": "Trang sau",
+      "allStatus": "Tất cả trạng thái",
+      "ready": "Sẵn sàng",
+      "processing": "Đang xử lý",
+      "failed": "Thất bại"
+    },
+    "table": {
+      "video": "Video",
+      "status": "Trạng thái",
+      "size": "Dung lượng",
+      "created": "Ngày tạo",
+      "actions": "Hành động",
+      "noDescription": "Không có mô tả",
+      "copyLink": "Sao chép liên kết",
+      "edit": "Chỉnh sửa",
+      "delete": "Xóa"
+    },
+    "bulk": {
+      "selected": "{{count}} mục đã chọn",
+      "delete": "Xóa"
+    },
+    "copyModal": {
+      "title": "Lấy địa chỉ chia sẻ",
+      "playerAddress": "Địa chỉ phát",
+      "embedPlayer": "Nhúng trình phát (khuyến nghị)",
+      "thumbnail": "URL thumbnail",
+      "hls": "Liên kết HLS (chỉ VIP)",
+      "hlsPlaceholder": "Liên kết HLS cho VIP với domain được whitelist",
+      "hlsHint": "Liên kết này chuyển hướng tới URL HLS đã ký và chỉ hoạt động trên domain đã whitelist.",
+      "warningTitle": "Cảnh báo",
+      "warningDetail": "Hãy đảm bảo tệp chia sẻ tuân thủ pháp luật địa phương và bạn hiểu rõ trách nhiệm khi phân phối nội dung.",
+      "reminderTitle": "Lưu ý",
+      "reminderDetail": "Trình phát nhúng có thể tự chuyển node dự phòng và hoạt động tốt trên di động. Liên kết HLS thô phụ thuộc vào trình phát riêng của bạn và chỉ dùng trên domain đã whitelist.",
+      "toastCopiedSummary": "Đã sao chép",
+      "toastCopiedDetail": "Đã sao chép vào clipboard",
+      "toastErrorSummary": "Lỗi",
+      "toastErrorDetail": "Không thể tải chi tiết video"
+    },
+    "detailModal": {
+      "title": "Chỉnh sửa video",
+      "titleLabel": "Tiêu đề",
+      "titlePlaceholder": "Nhập tiêu đề video",
+      "adTemplateLabel": "Mẫu quảng cáo",
+      "adTemplateNone": "Không có quảng cáo",
+      "adTemplateDefault": "Mặc định",
+      "adTemplateUpgradeHint": "Nâng cấp gói để tùy chỉnh mẫu quảng cáo cho video này.",
+      "adTemplateNoAdsHint": "Chưa chọn mẫu quảng cáo. Video này sẽ phát không có quảng cáo.",
+      "subtitlesTitle": "Phụ đề",
+      "subtitleTracks": "{{count}} track",
+      "noSubtitles": "Chưa có phụ đề",
+      "uploadSubtitle": "Tải phụ đề",
+      "subtitleFile": "Tệp phụ đề (VTT, SRT, ASS, SSA)",
+      "languageCode": "Mã ngôn ngữ *",
+      "languagePlaceholder": "en, vi, v.v.",
+      "displayName": "Tên hiển thị (Tùy chọn)",
+      "displayNamePlaceholder": "English, Tiếng Việt, v.v.",
+      "uploadSubtitleButton": "Tải phụ đề",
+      "cancel": "Hủy",
+      "saveChanges": "Lưu thay đổi",
+      "errors": {
+        "titleRequired": "Tiêu đề là bắt buộc."
+      },
+      "toast": {
+        "loadErrorSummary": "Lỗi",
+        "loadErrorDetail": "Không thể tải chi tiết video",
+        "saveSuccessSummary": "Thành công",
+        "saveSuccessDetail": "Cập nhật video thành công",
+        "saveErrorSummary": "Lỗi",
+        "saveErrorDetail": "Không thể lưu thay đổi",
+        "subtitleInfoSummary": "Thông tin",
+        "subtitleInfoDetail": "Tải phụ đề chưa được hỗ trợ"
+      }
+    },
+    "detailPage": {
+      "title": "Chi tiết video",
+      "description": "Xem và quản lý thông tin video",
+      "loadingBreadcrumb": "Đang tải...",
+      "detailsTitle": "Thông tin video",
+      "copyValueTitle": "Sao chép giá trị",
+      "videoTagFallback": "Trình duyệt của bạn không hỗ trợ thẻ video.",
+      "saving": "Đang lưu...",
+      "cancelEditTitle": "Hủy chỉnh sửa",
+      "reloadTitle": "Tải lại video",
+      "reloadButton": "Tải lại",
+      "confirmDelete": {
+        "message": "Bạn có chắc muốn xóa video này? Hành động này không thể hoàn tác.",
+        "header": "Xác nhận xóa",
+        "accept": "Xóa",
+        "reject": "Hủy"
+      },
+      "toast": {
+        "reloadSummary": "Thông tin",
+        "reloadDetail": "Đang tải lại video...",
+        "deleteSuccessSummary": "Thành công",
+        "deleteSuccessDetail": "Xóa video thành công",
+        "deleteErrorSummary": "Lỗi",
+        "deleteErrorDetail": "Không thể xóa video",
+        "copySummary": "Đã sao chép",
+        "copyDetail": "Đã sao chép {label} vào clipboard"
+      },
+      "videoInfo": {
+        "videoId": "ID video",
+        "thumbnailUrl": "URL thumbnail",
+        "embedUrl": "URL nhúng",
+        "iframeCode": "Mã iframe",
+        "shareLink": "Liên kết chia sẻ"
+      }
+    },
+    "cardPopover": {
+      "download": "Tải xuống",
+      "copyLink": "Sao chép liên kết",
+      "edit": "Chỉnh sửa",
+      "delete": "Xóa",
+      "toast": {
+        "copySuccessSummary": "Thành công",
+        "copySuccessDetail": "Đã sao chép liên kết video",
+        "copyErrorSummary": "Lỗi",
+        "copyErrorDetail": "Không thể sao chép liên kết",
+        "downloadSuccessSummary": "Thành công",
+        "downloadSuccessDetail": "Đang tải xuống video...",
+        "downloadErrorSummary": "Lỗi",
+        "downloadErrorDetail": "Không tìm thấy tệp video"
+      }
+    }
+  },
+  "notification": {
+    "title": "Thông báo",
+    "subtitle": "Luôn cập nhật các hoạt động và cảnh báo mới nhất của bạn.",
+    "tabs": {
+      "all": "Tất cả",
+      "unread": "Chưa đọc",
+      "videos": "Video",
+      "payments": "Thanh toán"
+    },
+    "stats": {
+      "total": "{{count}} thông báo",
+      "unread": "{{count}} chưa đọc"
+    },
+    "actions": {
+      "markAllRead": "Đánh dấu đã đọc tất cả",
+      "clearAll": "Xóa tất cả",
+      "viewAll": "Xem tất cả thông báo",
+      "viewVideo": "Xem video",
+      "viewReceipt": "Xem biên lai",
+      "upgradePlan": "Nâng cấp gói",
+      "tryNow": "Dùng thử ngay"
+    },
+    "item": {
+      "viewDetails": "Xem chi tiết",
+      "markAsRead": "Đánh dấu đã đọc",
+      "delete": "Xóa"
+    },
+    "empty": {
+      "title": "Không có thông báo",
+      "subtitle": "Bạn đã xem hết! Hãy quay lại sau."
+    },
+    "time": {
+      "minutesAgo": "{{count}} phút trước",
+      "hoursAgo": "{{count}} giờ trước",
+      "daysAgo": "{{count}} ngày trước"
+    },
+    "mocks": {
+      "videoProcessed": {
+        "title": "Xử lý video hoàn tất",
+        "message": "Video \"Summer Vacation 2024\" của bạn đã được xử lý thành công và sẵn sàng phát."
+      },
+      "paymentSuccess": {
+        "title": "Thanh toán thành công",
+        "message": "Gói Pro Plan của bạn đã được gia hạn thành công. Kỳ thanh toán tiếp theo: 25/02/2026."
+      },
+      "storageWarning": {
+        "title": "Dung lượng sắp đầy",
+        "message": "Bạn đã sử dụng 85% hạn mức lưu trữ. Hãy cân nhắc nâng cấp gói để có thêm dung lượng."
+      },
+      "uploadSuccess": {
+        "title": "Tải lên thành công",
+        "message": "Video \"Product Demo v2\" của bạn đã được tải lên thành công."
+      },
+      "maintenance": {
+        "title": "Bảo trì định kỳ",
+        "message": "Chúng tôi sẽ bảo trì hệ thống vào ngày 30/01/2026 từ 02:00 đến 04:00 UTC."
+      },
+      "newFeature": {
+        "title": "Tính năng mới",
+        "message": "Chúng tôi vừa ra mắt phân tích video! Theo dõi hiệu suất video với dữ liệu chi tiết."
+      }
+    }
+  },
+  "upload": {
+    "dialog": {
+      "title": "Tải video lên",
+      "subtitle": "Thêm tối đa {{maxItems}} video mỗi đợt",
+      "mode": {
+        "local": "Tệp cục bộ",
+        "remote": "URL từ xa"
+      },
+      "queueFullTitle": "Hàng đợi đã đầy",
+      "queueFullDescription": "Tối đa {{maxItems}} video mỗi đợt. Hãy bắt đầu hoặc xóa hàng đợi hiện tại trước.",
+      "slotsRemaining": "Còn {{remaining}} / {{maxItems}} vị trí",
+      "formatsHint": "MP4, MOV, MKV · tối đa 10 GB mỗi tệp",
+      "close": "Đóng",
+      "startUpload": "Bắt đầu tải ({{count}})",
+      "duplicateFilesSummary": "Đã bỏ qua tệp trùng lặp",
+      "duplicateFilesDetailOne": "{{count}} tệp đã có trong hàng đợi.",
+      "duplicateFilesDetailOther": "{{count}} tệp đã có trong hàng đợi.",
+      "duplicateUrlsSummary": "Đã bỏ qua URL trùng lặp",
+      "duplicateUrlsDetailOne": "{{count}} URL đã có trong hàng đợi.",
+      "duplicateUrlsDetailOther": "{{count}} URL đã có trong hàng đợi."
+    },
+    "dropzone": {
+      "releaseToAdd": "Thả để thêm",
+      "dropHere": "Thả video vào đây",
+      "browse": "hoặc bấm để chọn tệp"
+    },
+    "remote": {
+      "placeholder": "Dán URL video, mỗi dòng một URL\n\nhttps://example.com/video.mp4\nhttps://drive.google.com/...",
+      "providersHint": "Hỗ trợ Google Drive, Dropbox",
+      "addUrls": "Thêm URL"
+    },
+    "queue": {
+      "empty": "Hàng đợi trống!",
+      "totalSize": "Tổng dung lượng:",
+      "zeroSize": "0 MB"
+    },
+    "queueItem": {
+      "remoteFileName": "Tệp từ URL",
+      "unknownSize": "Không xác định",
+      "status": {
+        "pending": "Chờ tải",
+        "uploading": "Đang tải lên...",
+        "uploadingThreads": "Đang tải · {{threads}} luồng",
+        "processing": "Đang xử lý...",
+        "complete": "Hoàn tất",
+        "error": "Thất bại",
+        "fetching": "Đang lấy dữ liệu..."
+      }
+    },
+    "infoTip": {
+      "title": "Mẹo: Để xử lý nhanh nhất",
+      "description": "Hãy tải video với codec H.264 + codec âm thanh AAC (ví dụ MP4 dùng H.264/AAC). Video theo định dạng này sẽ được xử lý nhanh hơn nhiều (giây thay vì phút) vì không cần encode lại."
+    },
+    "bulkActions": {
+      "title": "Thiết lập nhanh",
+      "applyToPending": "Áp dụng cho {{count}} tệp đang chờ",
+      "selectCategory": "Chọn danh mục...",
+      "category": {
+        "learning": "Học tập",
+        "entertainment": "Giải trí"
+      },
+      "visibility": {
+        "public": "Công khai",
+        "private": "Riêng tư"
+      }
+    },
+    "indicator": {
+      "allDone": "Hoàn tất",
+      "uploading": "Đang tải lên {{count}} tệp...",
+      "waiting": "{{count}} tệp đang chờ",
+      "completeProgress": "Hoàn tất {{complete}} / {{total}}",
+      "start": "Bắt đầu",
+      "viewVideos": "Xem video",
+      "addMoreFiles": "Thêm tệp"
+    },
+    "errors": {
+      "chunkUploadFailed": "Không thể tải phần {{index}}",
+      "mergeFailed": "Gộp tệp thất bại"
+    }
+  },
+  "home": {
+    "nav": {
+      "features": "Tính năng",
+      "pricing": "Bảng giá",
+      "login": "Đăng nhập",
+      "startFree": "Dùng thử miễn phí"
+    },
+    "hero": {
+      "titleLine1": "Hạ tầng video cho",
+      "titleLine2": "internet hiện đại.",
+      "subtitle": "Lưu trữ, mã hóa và phát video mượt mà với API ưu tiên cho developer. Tối ưu tốc độ, sẵn sàng mở rộng.",
+      "getStarted": "Bắt đầu",
+      "uploadVideo": "Tải video"
+    },
+    "features": {
+      "heading": "Mọi thứ bạn cần để triển khai video",
+      "subtitle": "Tập trung xây dựng sản phẩm. Chúng tôi lo phần hạ tầng video phức tạp.",
+      "global": {
+        "title": "Mạng edge toàn cầu",
+        "description": "Nội dung được phân phối từ hơn 200 PoP trên toàn thế giới. Tự động chọn vùng để có độ trễ thấp nhất cho mọi người xem."
+      },
+      "live": {
+        "title": "Streaming API",
+        "description": "Mở rộng tới hàng triệu người xem đồng thời với độ trễ cực thấp. Hỗ trợ RTMP ingest và HLS playback sẵn có.",
+        "status": "Trạng thái trực tiếp",
+        "onAir": "Đang phát",
+        "bitrate": "Bitrate:",
+        "fps": "FPS:",
+        "latency": "Độ trễ:",
+        "bitrateValue": "6000 kbps",
+        "fpsValue": "60",
+        "latencyValue": "~2 giây"
+      },
+      "encoding": {
+        "title": "Mã hóa tức thì",
+        "description": "Tải tệp thô và nhận luồng HLS/DASH tối ưu chỉ trong vài giây."
+      },
+      "analytics": {
+        "title": "Phân tích chuyên sâu",
+        "description": "Insight theo phiên, chỉ số chất lượng trải nghiệm (QoE), và nhiều hơn nữa."
+      }
+    },
+    "pricing": {
+      "title": "Bảng giá đơn giản, minh bạch",
+      "subtitle": "Chọn gói phù hợp với nhu cầu. Không phí ẩn.",
+      "perMonth": "/tháng",
+      "hobby": {
+        "name": "Hobby",
+        "features": [
+          "Tải lên không giới hạn",
+          "1 giờ lưu trữ",
+          "Hỗ trợ tiêu chuẩn"
+        ],
+        "button": "Bắt đầu miễn phí"
+      },
+      "pro": {
+        "name": "Pro",
+        "features": [
+          "Trình phát không quảng cáo",
+          "Hỗ trợ M3U8",
+          "Tải lên không giới hạn",
+          "Quảng cáo tùy chỉnh"
+        ],
+        "button": "Bắt đầu ngay",
+        "tag": "PHỔ BIẾN"
+      },
+      "scale": {
+        "name": "Scale",
+        "features": ["5 TB băng thông", "500 giờ lưu trữ", "Hỗ trợ ưu tiên"],
+        "button": "Liên hệ kinh doanh",
+        "tag": "Giá trị cao"
+      }
+    },
+    "footer": {
+      "description": "Xây dựng lớp hạ tầng video cho internet. Thiết kế cho developer.",
+      "product": "Sản phẩm",
+      "productFeatures": "Tính năng",
+      "productPricing": "Bảng giá",
+      "productShowcase": "Trình diễn",
+      "company": "Công ty",
+      "companyAbout": "Giới thiệu",
+      "companyBlog": "Blog",
+      "companyCareers": "Tuyển dụng",
+      "legal": "Pháp lý",
+      "privacy": "Quyền riêng tư",
+      "terms": "Điều khoản",
+      "copyright": "© {year} EcoStream Inc. Bảo lưu mọi quyền."
+    },
+    "head": {
+      "title": "EcoStream - Hạ tầng video cho internet hiện đại",
+      "description": "Lưu trữ, mã hóa và phát video mượt mà với API ưu tiên cho developer. Tối ưu tốc độ, sẵn sàng mở rộng."
+    }
+  },
+  "legal": {
+    "common": {
+      "heading": "Chính sách pháp lý & quyền riêng tư",
+      "subheading": "Pháp lý & quyền riêng tư",
+      "description": "Chính sách pháp lý và quyền riêng tư của chúng tôi."
+    },
+    "terms": {
+      "title": "Điều khoản và điều kiện - Ecostream",
+      "description": "Đọc điều khoản và điều kiện sử dụng dịch vụ lưu trữ và phát video của Ecostream.",
+      "pageHeading": "Chi tiết điều khoản và điều kiện",
+      "pageSubheading": "Điều khoản và điều kiện",
+      "pageDescription": "Điều khoản của chúng tôi nêu rõ các hướng dẫn và quy định quan trọng khi sử dụng dịch vụ Ecostream.",
+      "sections": {
+        "acceptanceTitle": "1. Chấp nhận điều khoản",
+        "acceptanceText": "Bằng việc truy cập và sử dụng Ecostream, bạn đồng ý bị ràng buộc bởi các điều khoản trong thỏa thuận này.",
+        "usageTitle": "2. Sử dụng dịch vụ",
+        "usageText": "Bạn đồng ý chỉ sử dụng dịch vụ cho mục đích hợp pháp. Nghiêm cấm đăng hoặc truyền nội dung bất hợp pháp, đe dọa, phỉ báng, tục tĩu hoặc phản cảm. Chúng tôi có quyền chấm dứt tài khoản vi phạm điều khoản.",
+        "ownershipTitle": "3. Quyền sở hữu nội dung",
+        "ownershipText": "Bạn giữ toàn bộ quyền sở hữu đối với nội dung tải lên Ecostream. Tuy nhiên, khi tải lên, bạn cấp cho chúng tôi quyền lưu trữ, lưu giữ và hiển thị nội dung cần thiết để cung cấp dịch vụ.",
+        "liabilityTitle": "4. Giới hạn trách nhiệm",
+        "liabilityText": "Ecostream không chịu trách nhiệm cho bất kỳ thiệt hại trực tiếp, gián tiếp, ngẫu nhiên, đặc biệt hoặc hệ quả do việc sử dụng hoặc không thể sử dụng dịch vụ.",
+        "changesTitle": "5. Thay đổi điều khoản",
+        "changesText": "Chúng tôi có quyền sửa đổi điều khoản bất kỳ lúc nào. Việc bạn tiếp tục sử dụng dịch vụ sau khi có thay đổi đồng nghĩa với việc chấp nhận điều khoản mới."
+      }
+    },
+    "privacy": {
+      "title": "Chính sách quyền riêng tư - Ecostream",
+      "description": "Tìm hiểu cam kết của Ecostream trong việc bảo vệ quyền riêng tư và dữ liệu của bạn.",
+      "pageHeading": "Chính sách pháp lý & quyền riêng tư",
+      "pageSubheading": "Pháp lý & quyền riêng tư",
+      "pageDescription": "Chính sách pháp lý và quyền riêng tư của chúng tôi.",
+      "sections": {
+        "policyTitle": "1. Chính sách quyền riêng tư",
+        "policyText": "Tại Ecostream, chúng tôi coi trọng quyền riêng tư của bạn. Chính sách này mô tả cách chúng tôi thu thập, sử dụng và bảo vệ thông tin cá nhân. Chúng tôi chỉ thu thập thông tin cần thiết để vận hành dịch vụ, bao gồm email tạo tài khoản và thông tin thanh toán xử lý gói dịch vụ.",
+        "dataCollectionTitle": "2. Thu thập dữ liệu",
+        "dataCollectionText": "Chúng tôi thu thập dữ liệu như địa chỉ IP, loại trình duyệt và thời gian truy cập để phân tích xu hướng và cải thiện dịch vụ. Nội dung tải lên được lưu trữ an toàn và chỉ truy cập khi cần cho việc cung cấp dịch vụ lưu trữ.",
+        "cookieTitle": "3. Chính sách cookie",
+        "cookieText": "Chúng tôi sử dụng cookie để duy trì phiên đăng nhập và tùy chọn người dùng. Khi sử dụng website, bạn đồng ý với việc sử dụng cookie theo chính sách này.",
+        "dmcaTitle": "4. DMCA & bản quyền",
+        "dmcaText": "Ecostream tôn trọng quyền sở hữu trí tuệ của người khác. Chúng tôi phản hồi các thông báo vi phạm bản quyền theo Đạo luật DMCA. Vui lòng báo cáo vi phạm bản quyền tới bộ phận hỗ trợ."
+      }
+    }
+  },
+  "notFound": {
+    "headTitle": "404 - Không tìm thấy trang",
+    "title": "404 - Không tìm thấy trang",
+    "description": "Trang bạn đang tìm không tồn tại.",
+    "backHome": "Quay về trang chủ"
+  }
+}
diff --git a/scripts/gen-nacl-keys.ts b/scripts/gen-nacl-keys.ts
new file mode 100644
index 0000000..f770d98
--- /dev/null
+++ b/scripts/gen-nacl-keys.ts
@@ -0,0 +1,7 @@
+// scripts/gen-nacl-keys.ts
+import nacl from "tweetnacl";
+
+const kp = nacl.box.keyPair();
+
+console.log("PUBLIC_KEY_BASE64=", Buffer.from(kp.publicKey).toString("base64"));
+console.log("SECRET_KEY_BASE64=", Buffer.from(kp.secretKey).toString("base64"));
\ No newline at end of file
diff --git a/src/api/httpClientAdapter.client.ts b/src/api/httpClientAdapter.client.ts
index 6431b06..7a252c0 100644
--- a/src/api/httpClientAdapter.client.ts
+++ b/src/api/httpClientAdapter.client.ts
@@ -6,18 +6,28 @@ const GET_PAYLOAD_PARAM = "payload";
 export function httpClientAdapter(opts: {
 	url: string;
 	pathsForGET?: string[];
+	JSON?: Partial<JsonTransformer>;
 	headers?: () => Promise<Record<string, string>> | Record<string, string>;
 }): TinyRpcClientAdapter {
+	const JSON: JsonTransformer = {
+    parse: globalThis.JSON.parse,
+    stringify: globalThis.JSON.stringify as JsonTransformer["stringify"],
+    ...opts.JSON,
+  };
 	return {
 		send: async (data) => {
 			const url = [opts.url, data.path].join("/");
-			const payload = JSON.stringify(data.args);
+			const extraHeaders = opts.headers ? await opts.headers() : {};
+			const payload = JSON.stringify(data.args, (headerObj) => {
+				if (headerObj) {
+					Object.assign(extraHeaders, headerObj);
+				}
+			});
+			
 			const method = opts.pathsForGET?.includes(data.path)
 				? "GET"
 				: "POST";
 
-			const extraHeaders = opts.headers ? await opts.headers() : {};
-
 			let req: Request;
 			if (method === "GET") {
 				req = new Request(
@@ -40,6 +50,7 @@ export function httpClientAdapter(opts: {
 				});
 			}
 			let res: Response;
+			
 			res = await fetch(req);
 			if (!res.ok) {
 				// throw new Error(`HTTP error: ${res.status}`);
@@ -53,8 +64,10 @@ export function httpClientAdapter(opts: {
 				);
 				// throw TinyRpcError.deserialize(res.status);
 			}
+
 			const result: Result<unknown, unknown> = JSON.parse(
-				await res.text()
+				await res.text(),
+				() => Object.fromEntries((res.headers as any).entries() ?? [])
 			);
 			if (!result.ok) {
 				throw TinyRpcError.deserialize(result.value);
diff --git a/src/api/httpClientAdapter.server.ts b/src/api/httpClientAdapter.server.ts
index 5ac17f6..0acf2cd 100644
--- a/src/api/httpClientAdapter.server.ts
+++ b/src/api/httpClientAdapter.server.ts
@@ -3,16 +3,28 @@ import { Result } from "@hiogawa/utils";
 import { tryGetContext } from "hono/context-storage";
 
 const GET_PAYLOAD_PARAM = "payload";
+export const baseAPIURL = "https://api.pipic.fun";
 
 export function httpClientAdapter(opts: {
 	url: string;
 	pathsForGET?: string[];
+	JSON?: Partial<JsonTransformer>;
 	headers?: () => Promise<Record<string, string>> | Record<string, string>;
 }): TinyRpcClientAdapter {
+	const JSON: JsonTransformer = {
+    parse: globalThis.JSON.parse,
+    stringify: globalThis.JSON.stringify as JsonTransformer["stringify"],
+    ...opts.JSON,
+  };
 	return {
 		send: async (data) => {
 			const url = [opts.url, data.path].join("/");
-			const payload = JSON.stringify(data.args);
+			const extraHeaders = opts.headers ? await opts.headers() : {};
+			const payload = JSON.stringify(data.args, (headerObj) => {
+				if (headerObj) {
+					Object.assign(extraHeaders, headerObj);
+				}
+			});
 			const method = opts.pathsForGET?.includes(data.path)
 				? "GET"
 				: "POST";
@@ -21,7 +33,10 @@ export function httpClientAdapter(opts: {
 				req = new Request(
 					url +
 					"?" +
-					new URLSearchParams({ [GET_PAYLOAD_PARAM]: payload })
+					new URLSearchParams({ [GET_PAYLOAD_PARAM]: payload }),
+					{
+						headers: extraHeaders
+					}
 				);
 			} else {
 				req = new Request(url, {
@@ -29,6 +44,7 @@ export function httpClientAdapter(opts: {
 					body: payload,
 					headers: {
 						"content-type": "application/json; charset=utf-8",
+						...extraHeaders,
 					},
 					credentials: "include",
 				});
@@ -46,6 +62,7 @@ export function httpClientAdapter(opts: {
 			} else {
 				res = await fetch(req);
 			}
+
 			if (!res.ok) {
 				// throw new Error(`HTTP error: ${res.status}`);
 				throw new Error(
@@ -59,7 +76,8 @@ export function httpClientAdapter(opts: {
 				// throw TinyRpcError.deserialize(res.status);
 			}
 			const result: Result<unknown, unknown> = JSON.parse(
-				await res.text()
+				await res.text(),
+				() => Object.fromEntries((res.headers as any).entries() ?? [])
 			);
 			if (!result.ok) {
 				throw TinyRpcError.deserialize(result.value);
diff --git a/src/api/rpc/auth.ts b/src/api/rpc/auth.ts
deleted file mode 100644
index f9ea234..0000000
--- a/src/api/rpc/auth.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { getContext } from "hono/context-storage";
-import { HonoVarTypes } from "types";
-
-// We can keep checkAuth to return the current user profile from the context
-// which is populated by the firebaseAuthMiddleware
-async function checkAuth() {
-    const context = getContext<HonoVarTypes>();
-    const user = context.get('user');
-
-    if (!user) {
-        return { authenticated: false, user: null };
-    }
-
-    return {
-        authenticated: true,
-        user: user
-    };
-}
-
-export const authMethods = {
-    checkAuth,
-};
\ No newline at end of file
diff --git a/src/api/rpc/commom.ts b/src/api/rpc/commom.ts
deleted file mode 100644
index 5e1a417..0000000
--- a/src/api/rpc/commom.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const secret = "123_it-is-very-secret_123";
\ No newline at end of file
diff --git a/src/api/rpc/index.ts b/src/api/rpc/index.ts
deleted file mode 100644
index 909fe9e..0000000
--- a/src/api/rpc/index.ts
+++ /dev/null
@@ -1,344 +0,0 @@
-import {
-	exposeTinyRpc,
-	httpServerAdapter,
-	validateFn,
-} from "@hiogawa/tiny-rpc";
-import { tinyassert } from "@hiogawa/utils";
-import { MiddlewareHandler, type Context, type Next } from "hono";
-import { getContext } from "hono/context-storage";
-// import { adminAuth } from "../../lib/firebaseAdmin";
-import { z } from "zod";
-import { authMethods } from "./auth";
-import { abortChunk, chunkedUpload, completeChunk, createPresignedUrls, imageContentTypes, nanoid, presignedPut, videoContentTypes } from "./s3_handle";
-// import { createElement } from "react";
-
-let counter = 0;
-const listCourses = [
-	{
-		id: 1,
-		title: "Lập trình Web Fullstack",
-		description:
-			"Học cách xây dựng ứng dụng web hoàn chỉnh từ frontend đến backend. Khóa học bao gồm HTML, CSS, JavaScript, React, Node.js và MongoDB.",
-		category: "Lập trình",
-		rating: 4.9,
-		price: "1.200.000 VNĐ",
-		icon: "fas fa-code",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Web%20Fullstack",
-		slug: "lap-trinh-web-fullstack",
-	},
-	{
-		id: 2,
-		title: "Phân tích dữ liệu với Python",
-		description:
-			"Khám phá sức mạnh của Python trong việc phân tích và trực quan hóa dữ liệu. Sử dụng Pandas, NumPy, Matplotlib và Seaborn.",
-		category: "Phân tích dữ liệu",
-		rating: 4.8,
-		price: "900.000 VNĐ",
-		icon: "fas fa-chart-bar",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Data%20Analysis",
-		slug: "phan-tich-du-lieu-voi-python",
-	},
-	{
-		id: 3,
-		title: "Thiết kế UI/UX chuyên nghiệp",
-		description:
-			"Học các nguyên tắc thiết kế giao diện và trải nghiệm người dùng hiện đại. Sử dụng Figma và Adobe XD.",
-		category: "Thiết kế",
-		rating: 4.7,
-		price: "800.000 VNĐ",
-		icon: "fas fa-paint-brush",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=UI/UX%20Design",
-		slug: "thiet-ke-ui-ux-chuyen-nghiep",
-	},
-	{
-		id: 4,
-		title: "Machine Learning cơ bản",
-		description:
-			"Nhập môn Machine Learning với Python. Tìm hiểu về các thuật toán học máy cơ bản như Linear Regression, Logistic Regression, Decision Trees.",
-		category: "AI/ML",
-		rating: 4.6,
-		price: "1.500.000 VNĐ",
-		icon: "fas fa-brain",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Machine%20Learning",
-		slug: "machine-learning-co-ban",
-	},
-	{
-		id: 5,
-		title: "Digital Marketing toàn diện",
-		description:
-			"Chiến lược Marketing trên các nền tảng số. SEO, Google Ads, Facebook Ads và Content Marketing.",
-		category: "Marketing",
-		rating: 4.5,
-		price: "700.000 VNĐ",
-		icon: "fas fa-bullhorn",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Digital%20Marketing",
-		slug: "digital-marketing-toan-dien",
-	},
-	{
-		id: 6,
-		title: "Lập trình Mobile với Flutter",
-		description:
-			"Xây dựng ứng dụng di động đa nền tảng (iOS & Android) với Flutter và Dart.",
-		category: "Lập trình",
-		rating: 4.8,
-		price: "1.100.000 VNĐ",
-		icon: "fas fa-mobile-alt",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Flutter%20Mobile",
-		slug: "lap-trinh-mobile-voi-flutter",
-	},
-	{
-		id: 7,
-		title: "Tiếng Anh giao tiếp công sở",
-		description:
-			"Cải thiện kỹ năng giao tiếp tiếng Anh trong môi trường làm việc chuyên nghiệp.",
-		category: "Ngoại ngữ",
-		rating: 4.4,
-		price: "600.000 VNĐ",
-		icon: "fas fa-language",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Business%20English",
-		slug: "tieng-anh-giao-tiep-cong-so",
-	},
-	{
-		id: 8,
-		title: "Quản trị dự án Agile/Scrum",
-		description:
-			"Phương pháp quản lý dự án linh hoạt Agile và khung làm việc Scrum.",
-		category: "Kỹ năng mềm",
-		rating: 4.7,
-		price: "950.000 VNĐ",
-		icon: "fas fa-tasks",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Agile%20Scrum",
-		slug: "quan-tri-du-an-agile-scrum",
-	},
-	{
-		id: 9,
-		title: "Nhiếp ảnh cơ bản",
-		description:
-			"Làm chủ máy ảnh và nghệ thuật nhiếp ảnh. Bố cục, ánh sáng và chỉnh sửa ảnh.",
-		category: "Nghệ thuật",
-		rating: 4.9,
-		price: "500.000 VNĐ",
-		icon: "fas fa-camera",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Photography",
-		slug: "nhiep-anh-co-ban",
-	},
-	{
-		id: 10,
-		title: "Blockchain 101",
-		description:
-			"Hiểu về công nghệ Blockchain, Bitcoin, Ethereum và Smart Contracts.",
-		category: "Công nghệ",
-		rating: 4.6,
-		price: "1.300.000 VNĐ",
-		icon: "fas fa-link",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Blockchain",
-		slug: "blockchain-101",
-	},
-	{
-		id: 11,
-		title: "ReactJS Nâng cao",
-		description:
-			"Các kỹ thuật nâng cao trong React: Hooks, Context, Redux, Performance Optimization.",
-		category: "Lập trình",
-		rating: 4.9,
-		price: "1.000.000 VNĐ",
-		icon: "fas fa-code",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Advanced%20React",
-		slug: "reactjs-nang-cao",
-	},
-	{
-		id: 12,
-		title: "Viết Content Marketing thu hút",
-		description:
-			"Kỹ thuật viết bài chuẩn SEO, thu hút người đọc và tăng tỷ lệ chuyển đổi.",
-		category: "Marketing",
-		rating: 4.5,
-		price: "550.000 VNĐ",
-		icon: "fas fa-pen-nib",
-		bgImg: "https://placehold.co/600x400/EEE/31343C?font=playfair-display&text=Content%20Marketing",
-		slug: "viet-content-marketing",
-	}
-];
-
-const courseContent = [
-	{
-		id: 1,
-		title: "Giới thiệu khóa học",
-		type: "video",
-		duration: "5:00",
-		completed: true,
-	},
-	{
-		id: 2,
-		title: "Cài đặt môi trường",
-		type: "video",
-		duration: "15:00",
-		completed: false,
-	},
-	{
-		id: 3,
-		title: "Kiến thức cơ bản",
-		type: "video",
-		duration: "25:00",
-		completed: false,
-	},
-	{
-		id: 4,
-		title: "Bài tập thực hành 1",
-		type: "quiz",
-		duration: "10:00",
-		completed: false,
-	},
-];
-
-const routes = {
-	// define as a bare function
-	checkId: (id: string) => {
-		const context = getContext();
-		console.log(context.req.raw.headers);
-		return id === "good";
-	},
-
-	checkIdThrow: (id: string) => {
-		tinyassert(id === "good", "Invalid ID");
-		return null;
-	},
-
-	getCounter: () => {
-		const context = getContext();
-		console.log(context.get("jwtPayload"));
-		return counter;
-	},
-
-	// define with zod validation + input type inference
-	incrementCounter: validateFn(z.object({ delta: z.number().default(1) }))(
-		(input) => {
-			// expectTypeOf(input).toEqualTypeOf<{ delta: number }>();
-			counter += input.delta;
-			return counter;
-		}
-	),
-
-	// access context
-	components: async () => { },
-	getHomeCourses: async () => {
-		return listCourses.slice(0, 3);
-	},
-	getCourses: validateFn(
-		z.object({
-			page: z.number().default(1),
-			limit: z.number().default(6),
-			search: z.string().optional(),
-			category: z.string().optional(),
-		})
-	)(async ({ page, limit, search, category }) => {
-		let filtered = listCourses;
-
-		if (search) {
-			const lowerSearch = search.toLowerCase();
-			filtered = filtered.filter(
-				(c) =>
-					c.title.toLowerCase().includes(lowerSearch) ||
-					c.description.toLowerCase().includes(lowerSearch)
-			);
-		}
-
-		if (category && category !== "All") {
-			filtered = filtered.filter((c) => c.category === category);
-		}
-
-		const start = (page - 1) * limit;
-		const end = start + limit;
-		const paginated = filtered.slice(start, end);
-
-		return {
-			data: paginated,
-			total: filtered.length,
-			page,
-			totalPages: Math.ceil(filtered.length / limit),
-		};
-	}),
-	getCourseBySlug: validateFn(z.object({ slug: z.string() }))(async ({ slug }) => {
-		const course = listCourses.find((c) => c.slug === slug);
-		if (!course) {
-			throw new Error("Course not found");
-		}
-		return course;
-	}),
-	getCourseContent: validateFn(z.object({ slug: z.string() }))(async ({ slug }) => {
-		// In a real app, we would fetch content specific to the course
-		return courseContent;
-	}),
-	presignedPut: validateFn(z.object({ fileName: z.string(), contentType: z.string().refine((val) => imageContentTypes.includes(val), { message: "Invalid content type" }) }))(async ({ fileName, contentType }) => {
-		return await presignedPut(fileName, contentType);
-	}),
-	chunkedUpload: validateFn(z.object({ fileName: z.string(), contentType: z.string().refine((val) => videoContentTypes.includes(val), { message: "Invalid content type" }), fileSize: z.number().min(1024 * 10).max(3 * 1024 * 1024 * 1024).default(1024 * 256) }))(async ({ fileName, contentType, fileSize }) => {
-		const key = nanoid() + "_" + fileName;
-		const { UploadId } = await chunkedUpload(key, contentType, fileSize);
-		const chunkSize = 1024 * 1024 * 20; // 20MB
-		const presignedUrls = await createPresignedUrls({
-			key,
-			uploadId: UploadId!,
-			totalParts: Math.ceil(fileSize / chunkSize),
-		});
-		return { uploadId: UploadId!, presignedUrls, chunkSize, key, totalParts: presignedUrls.length };
-	}),
-	completeChunk: validateFn(z.object({ key: z.string(), uploadId: z.string(), parts: z.array(z.object({ PartNumber: z.number(), ETag: z.string() })) }))(async ({ key, uploadId, parts }) => {
-		await completeChunk(key, uploadId, parts);
-		return { success: true };
-	}),
-	abortChunk: validateFn(z.object({ key: z.string(), uploadId: z.string() }))(async ({ key, uploadId }) => {
-		await abortChunk(key, uploadId);
-		return { success: true };
-	}),
-	...authMethods
-};
-export type RpcRoutes = typeof routes;
-export const endpoint = "/rpc";
-export const pathsForGET: (keyof typeof routes)[] = ["getCounter"];
-
-export const firebaseAuthMiddleware: MiddlewareHandler = async (c, next) => {
-	const publicPaths: (keyof typeof routes)[] = ["getHomeCourses", "getCourses", "getCourseBySlug", "getCourseContent"];
-	const isPublic = publicPaths.some((path) => c.req.path.split("/").includes(path));
-	c.set("isPublic", isPublic);
-
-	if (c.req.path !== endpoint && !c.req.path.startsWith(endpoint + "/") || isPublic) {
-		return await next();
-	}
-
-	const authHeader = c.req.header("Authorization");
-	if (!authHeader || !authHeader.startsWith("Bearer ")) {
-		// Option: return 401 or let it pass with no user?
-		// Old logic seemed to require it for non-public paths.
-		return c.json({ error: "Unauthorized" }, 401);
-	}
-
-	const token = authHeader.split("Bearer ")[1];
-	try {
-		// const decodedToken = await adminAuth.verifyIdToken(token);
-		// c.set("user", decodedToken);
-	} catch (error) {
-		console.error("Firebase Auth Error:", error);
-		return c.json({ error: "Unauthorized" }, 401);
-	}
-
-	return await next();
-}
-
-export const rpcServer = async (c: Context, next: Next) => {
-	if (c.req.path !== endpoint && !c.req.path.startsWith(endpoint + "/")) {
-		return await next();
-	}
-	const cert = c.req.header()
-	console.log("RPC Request Path:", c.req.raw.cf);
-	// if (!cert) return c.text('Forbidden', 403)
-	const handler = exposeTinyRpc({
-		routes,
-		adapter: httpServerAdapter({ endpoint }),
-	});
-	const res = await handler({ request: c.req.raw });
-	if (res) {
-		return res;
-	}
-	return await next();
-};
diff --git a/src/api/rpc/s3_handle.ts b/src/api/rpc/s3_handle.ts
deleted file mode 100644
index ede32c3..0000000
--- a/src/api/rpc/s3_handle.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import {
-  S3Client,
-  ListBucketsCommand,
-  ListObjectsV2Command,
-  GetObjectCommand,
-  PutObjectCommand,
-  DeleteObjectCommand,
-  CreateMultipartUploadCommand,
-  UploadPartCommand,
-  AbortMultipartUploadCommand,
-  CompleteMultipartUploadCommand,
-  ListPartsCommand,
-} from "@aws-sdk/client-s3";
-import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
- import { createPresignedPost } from "@aws-sdk/s3-presigned-post";
-import { randomBytes } from "crypto";
- const urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-export function nanoid(size = 21) {
-  let id = '';
-  const bytes = randomBytes(size); // Node.js specific method
-  
-  for (let i = 0; i < size; i++) {
-    id += urlAlphabet[bytes[i] & 63];
-  }
-  
-  return id;
-}
-// createPresignedPost
-const S3 = new S3Client({
-  region: "auto", // Required by SDK but not used by R2
-  endpoint: `https://s3.cloudfly.vn`,
-  credentials: {
-    // accessKeyId: "Q3AM3UQ867SPQQA43P2F",
-    // secretAccessKey: "Ik7nlCaUUCFOKDJAeSgFcbF5MEBGh9sVGBUrsUOp",
-    accessKeyId: "BD707P5W8J5DHFPUKYZ6",
-    secretAccessKey: "LTX7IizSDn28XGeQaHNID2fOtagfLc6L2henrP6P",
-  },
-  forcePathStyle: true,
-});
-// const S3 = new S3Client({
-//   region: "auto", // Required by SDK but not used by R2
-//   endpoint: `https://u.pipic.fun`,
-//   credentials: {
-//     // accessKeyId: "Q3AM3UQ867SPQQA43P2F",
-//     // secretAccessKey: "Ik7nlCaUUCFOKDJAeSgFcbF5MEBGh9sVGBUrsUOp",
-//     accessKeyId: "cdnadmin",
-//     secretAccessKey: "D@tkhong9",
-//   },
-//   forcePathStyle: true,
-// });
-export const imageContentTypes = ["image/png", "image/jpg", "image/jpeg", "image/webp"];
-export const videoContentTypes = ["video/mp4", "video/webm", "video/ogg", "video/*"];
-const nanoId = () => {
-  // return crypto.randomUUID().replace(/-/g, "").slice(0, 10);
-  return ""
-}
-export async function presignedPut(fileName: string, contentType: string){
-  if (!imageContentTypes.includes(contentType)) {
-    throw new Error("Invalid content type");
-  }
-  const key = nanoId()+"_"+fileName;
-  const url = await getSignedUrl(
-    S3,
-    new PutObjectCommand({
-      Bucket: "tmp",
-      Key: key,
-      ContentType: contentType,
-      CacheControl: "public, max-age=31536000, immutable",
-      // ContentLength: 31457280, // Max 30MB
-      // ACL: "public-read", // Uncomment if you want the object to be publicly readable
-    }),
-    { expiresIn: 600 } // URL valid for 10 minutes
-  );
-  return { url, key };
-}
-export async function createPresignedUrls({
-  key,
-  uploadId,
-  totalParts,
-  expiresIn = 60 * 15, // 15 phút
-}: {
-  key: string;
-  uploadId: string;
-  totalParts: number;
-  expiresIn?: number;
-}) {
-  const urls = [];
-
-  for (let partNumber = 1; partNumber <= totalParts; partNumber++) {
-    const command = new UploadPartCommand({
-      Bucket: "tmp",
-      Key: key,
-      UploadId: uploadId,
-      PartNumber: partNumber,
-    });
-
-    const url = await getSignedUrl(S3, command, {
-      expiresIn,
-    });
-
-    urls.push({
-      partNumber,
-      url,
-    });
-  }
-
-  return urls;
-}
-export async function chunkedUpload(Key: string, contentType: string, fileSize: number) {
-  // lớn hơn 3gb thì cút
-  if (fileSize > 3 * 1024 * 1024 * 1024) {
-    throw new Error("File size exceeds 3GB");
-  }
-  // CreateMultipartUploadCommand
-  const uploadParams = {
-    Bucket: "tmp",
-    Key,
-    ContentType: contentType,
-    CacheControl: "public, max-age=31536000, immutable",
-  };
-  let data = await S3.send(new CreateMultipartUploadCommand(uploadParams));
-  return data;
-}
-export async function abortChunk(key: string, uploadId: string) {
-  await S3.send(
-    new AbortMultipartUploadCommand({
-      Bucket: "tmp",
-      Key: key,
-      UploadId: uploadId,
-    })
-  );
-}
-export async function completeChunk(key: string, uploadId: string, parts: { ETag: string; PartNumber: number }[]) {
-  const listed = await S3.send(
-    new ListPartsCommand({
-      Bucket: "tmp",
-      Key: key,
-      UploadId: uploadId,
-    })
-  );
-  if (!listed.Parts || listed.Parts.length !== parts.length) {
-    throw new Error("Not all parts have been uploaded");
-  }
-  await S3.send(
-    new CompleteMultipartUploadCommand({
-      Bucket: "tmp",
-      Key: key,
-      UploadId: uploadId,
-      MultipartUpload: {
-        Parts: parts.sort((a, b) => a.PartNumber - b.PartNumber),
-      },
-    })
-  );
-}
-export async function deleteObject(bucketName: string, objectKey: string) {
-  await S3.send(
-    new DeleteObjectCommand({
-      Bucket: bucketName,
-      Key: objectKey,
-    })
-  );
-}
-export async function listBuckets() {
-  const data = await S3.send(new ListBucketsCommand({}));
-  return data.Buckets;
-}
-export async function listObjects(bucketName: string) {
-  const data = await S3.send(
-    new ListObjectsV2Command({
-      Bucket: bucketName,
-    })
-  );
-  return data.Contents;
-}
-export async function generateUploadForm(fileName: string, contentType: string) {
-      if (!imageContentTypes.includes(contentType)) {
-        throw new Error("Invalid content type");
-      }
-      return await createPresignedPost(S3, {
-        Bucket: "tmp",
-        Key: nanoId()+"_"+fileName,
-        Expires: 10 * 60, // URL valid for 10 minutes
-        Conditions: [
-          ["starts-with", "$Content-Type", contentType],
-          ["content-length-range", 0, 31457280], // Max 30MB
-        ],
-      });
-    }
-// generateUploadUrl("tmp", "cat.png", "image/png").then(console.log);
-export async function createDownloadUrl(key: string): Promise<string> {
-  const url = await getSignedUrl(
-    S3,
-    new GetObjectCommand({ Bucket: "tmp", Key: key }),
-    { expiresIn: 600 } // 600 giây = 10 phút
-  );
-  return url;
-}
\ No newline at end of file
diff --git a/src/api/rpcclient.ts b/src/api/rpcclient.ts
index 608bc4d..561b174 100644
--- a/src/api/rpcclient.ts
+++ b/src/api/rpcclient.ts
@@ -1,30 +1,39 @@
-import {
-	proxyTinyRpc,
-	TinyRpcClientAdapter,
-	TinyRpcError,
-} from "@hiogawa/tiny-rpc";
-import type { RpcRoutes } from "./rpc";
-import { Result } from "@hiogawa/utils";
+import type { RpcRoutes } from "@/server/routes/rpc";
+import { proxyTinyRpc } from "@hiogawa/tiny-rpc";
 import { httpClientAdapter } from "@httpClientAdapter";
-// console.log("httpClientAdapter module:", httpClientAdapter.toString());
-declare let __host__: string;
-const endpoint = "/rpc";
-const url = import.meta.env.SSR ? "http://localhost" : "";
-import { auth } from "../lib/firebase";
 
+const endpoint = "/rpc";
+const publicEndpoint = "/rpc-public";
+const url = import.meta.env.SSR ? "http://localhost" : "";
+const publicMethods = ["login", "register", "forgotPassword", "resetPassword", "getGoogleLoginUrl"];
+// src/client/trpc-client-transformer.ts
+import {
+  clientJSON
+} from "@/shared/secure-json-transformer";
+
+
+// export function createTrpcClientTransformer(cfg: ServerPublicKeyConfig) {
+//   return {
+//     input: ,
+//     output: superjson,
+//   };
+// }
+// const secureConfig = await fetch("/trpc-secure-config").then((r) => r.json());
 export const client = proxyTinyRpc<RpcRoutes>({
-	adapter: httpClientAdapter({
-		url: url + endpoint,
-		pathsForGET: [],
-		headers: async () => {
-			if (import.meta.env.SSR) return {}; // No client auth on server for now
-			const user = auth.currentUser;
-			if (user) {
-				// Force refresh if needed or just get token
-				const token = await user.getIdToken();
-				return { Authorization: `Bearer ${token}` };
-			}
-			return {};
-		}
-	}),
+  adapter: {
+    send: async (data) => {
+      const targetEndpoint = publicMethods.includes(data.path) ? publicEndpoint : endpoint;
+      return await httpClientAdapter({
+        url: `${url}${targetEndpoint}`,
+        pathsForGET: ["health"],
+        JSON: {
+          // parse: clientJSON.parse,
+          parse: (v, fn) => JSON.parse(v),
+          // stringify: clientJSON.stringify,
+          stringify: (v, fn) => JSON.stringify(v),
+        },
+        headers: () => Promise.resolve({})
+      }).send(data);
+    },
+  },
 });
diff --git a/src/client.ts b/src/client.ts
index 35ba2ae..e528ec8 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -1,11 +1,22 @@
-import { createApp } from './main';
+import { hydrateQueryCache } from '@pinia/colada';
 import 'uno.css';
+import PiniaSharedState from './lib/PiniaSharedState';
+import { createApp } from './main';
+
+const readAppData = () => {
+    return JSON.parse(document.getElementById('__APP_DATA__')?.innerText || '{}') as Record<string, any>;
+};
+
 async function render() {
-    const { app, router } = createApp();
-    router.isReady().then(() => {
-        app.mount('body', true)
-    })
+    const appData = readAppData();
+    const { app, router, queryCache, pinia } = await createApp(appData.$locale);
+    pinia.use(PiniaSharedState({ enable: true, initialize: true }));
+    hydrateQueryCache(queryCache, appData.$colada || {});
+
+    await router.isReady();
+    app.mount('body', true);
 }
+
 render().catch((error) => {
-    console.error('Error during app initialization:', error)
-})
+    console.error('Error during app initialization:', error);
+});
diff --git a/src/components/AppTopLoadingBar.vue b/src/components/AppTopLoadingBar.vue
new file mode 100644
index 0000000..1d54745
--- /dev/null
+++ b/src/components/AppTopLoadingBar.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useRouteLoading } from '@/composables/useRouteLoading';
+import { computed } from 'vue';
+
+const { visible, progress } = useRouteLoading()
+
+const barStyle = computed(() => ({
+  transform: `scaleX(${progress.value / 100})`,
+  opacity: visible.value ? '1' : '0',
+}))
+</script>
+
+<template>
+  <div
+    class="pointer-events-none fixed inset-x-0 top-0 z-[9999] h-0.75"
+    aria-hidden="true"
+  >
+    <div
+      class="h-full origin-left rounded-r-full bg-primary/50 transition-[transform,opacity] duration-200 ease-out"
+      :style="barStyle"
+    />
+  </div>
+</template>
diff --git a/src/components/ClientOnly.tsx b/src/components/ClientOnly.tsx
new file mode 100644
index 0000000..0d2baa7
--- /dev/null
+++ b/src/components/ClientOnly.tsx
@@ -0,0 +1,25 @@
+// export default defineComponent((props, context) => {
+//     if (typeof window === 'undefined') {
+//         return () => context.slots.default ? context.slots.default() : null;
+//     }
+//     return () => null;
+// });
+
+import { defineComponent, onMounted, ref } from "vue";
+const ClientOnly = defineComponent({
+  name: "ClientOnly",
+  setup(_p, { slots }) {
+    const isClient = ref(false);
+
+    onMounted(() => {
+      isClient.value = true;
+    });
+    return () => {
+      if (isClient.value) {
+        return slots.default ? slots.default() : null;
+      }
+      return null;
+    };
+  },
+});
+export default ClientOnly;
diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue
index 194bff9..5ce8c9d 100644
--- a/src/components/DashboardLayout.vue
+++ b/src/components/DashboardLayout.vue
@@ -1,44 +1,15 @@
 <script lang="ts" setup>
-import Add from "@/components/icons/Add.vue";
-import Bell from "@/components/icons/Bell.vue";
-import Home from "@/components/icons/Home.vue";
-import Video from "@/components/icons/Video.vue";
-import Credit from "@/components/icons/Credit.vue";
-import Upload from "./icons/Upload.vue";
-import { cn } from "@/lib/utils";
-import { useAuthStore } from "@/stores/auth";
-import { createStaticVNode } from "vue";
+import Upload from "@/routes/upload/Upload.vue";
+import DashboardNav from "./DashboardNav.vue";
+import GlobalUploadIndicator from "./GlobalUploadIndicator.vue";
+import PopupAdsRuntime from "./PopupAdsRuntime.vue";
 
-const auth = useAuthStore();
-
-const className = ":uno: w-12 h-12 p-2 rounded-2xl hover:bg-primary/15 flex press-animated items-center justify-center";
-const homeHoist = createStaticVNode(`<img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />`, 1);
-const links = [
-    { href: "/fdsfsd", label: "app", icon: homeHoist, type: "btn" },
-    { href: "/", label: "Home", icon: Home, type: "a" },
-    { href: "/upload", label: "Upload", icon: Upload, type: "a" },
-    { href: "/video", label: "Video", icon: Video, type: "a" },
-    { href: "/plans", label: "Plans", icon: Credit, type: "a" },
-    { href: "/notification", label: "Notification", icon: Bell, type: "a" },
-];
 </script>
+
 <template>
-    <header
-        class=":uno: fixed left-0 w-18 flex flex-col items-center pt-4 gap-6 z-41 max-h-screen h-screen border-r border-gray-200 bg-white">
-        <component :is="i.type === 'a' ? 'router-link' : 'div'" v-for="i in links" :key="i.label"
-            v-bind="i.type === 'a' ? { to: i.href } : {}" v-tooltip="i.label"
-            :class="cn(className, $route.path === i.href && 'bg-primary/15')">
-            <component :is="i.icon" :filled="$route.path === i.href" />
-        </component>
-        <div class="w-12 h-12 rounded-2xl hover:bg-primary/15 flex">
-            <button class="h-[38px] w-[38px] rounded-full m-a ring-2 ring flex press-animated" @click="auth.logout()">
-                <img class="h-8 w-8 rounded-full m-a ring-1 ring-white"
-                    src="https://picsum.photos/seed/user123/40/40.jpg" alt="User avatar" />
-            </button>
-        </div>
-    </header>
-    <main class="flex flex-1 overflow-hidden md:ps-18">
-        <div class="flex-1 overflow-auto p-4 bg-white rounded-lg md:(mr-2 mb-2) min-h-[calc(100vh-8rem)]">
+    <DashboardNav />
+    <main class="flex flex-1 flex-col transition-all duration-300 ease-in-out bg-white md:ps-18">
+        <div class=":uno: flex-1 overflow-auto p-4 bg-white rounded-lg md:(mr-2 mb-2) min-h-[calc(100vh-8rem)]">
             <router-view v-slot="{ Component }">
                 <Transition enter-active-class="transition-all duration-300 ease-in-out"
                     enter-from-class="opacity-0 transform translate-y-4"
@@ -50,5 +21,8 @@ const links = [
                 </Transition>
             </router-view>
         </div>
+        <GlobalUploadIndicator />
+        <Upload />
+        <PopupAdsRuntime />
     </main>
 </template>
diff --git a/src/components/DashboardNav.vue b/src/components/DashboardNav.vue
new file mode 100644
index 0000000..e3b67a2
--- /dev/null
+++ b/src/components/DashboardNav.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import Bell from "@/components/icons/Bell.vue";
+import Home from "@/components/icons/Home.vue";
+import SettingsIcon from "@/components/icons/SettingsIcon.vue";
+import Video from "@/components/icons/Video.vue";
+import { cn } from "@/lib/utils";
+import { useNotifications } from "@/composables/useNotifications";
+import { useAuthStore } from "@/stores/auth";
+import { useTranslation } from "i18next-vue";
+import { computed, createStaticVNode, h, ref } from "vue";
+import NotificationDrawer from "./NotificationDrawer.vue";
+import Chart from "./icons/Chart.vue";
+
+const className = ":uno: w-12 h-12 p-2 rounded-2xl hover:bg-primary/15 flex press-animated items-center justify-center shrink-0";
+const homeHoist = createStaticVNode(`<img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />`, 1);
+const notificationPopover = ref<InstanceType<typeof NotificationDrawer>>();
+const isNotificationOpen = ref(false);
+const { t } = useTranslation();
+const notificationStore = useNotifications();
+const unreadCount = computed(() => notificationStore.unreadCount.value);
+
+const handleNotificationClick = (event: Event) => {
+  notificationPopover.value?.toggle(event);
+};
+
+const links = computed<Record<string, any>>(() => {
+  const baseLinks = [
+    {
+      id: "home",
+      href: "/#home", label: "app", icon: homeHoist, action: () => { }, className
+    },
+    {
+      id: "overview",
+      href: "/", label: t("nav.overview"), icon: Home, action: null, className
+    },
+    {
+      id: "videos",
+      href: "/videos", label: t("nav.videos"), icon: Video, action: null, className
+    },
+    {
+      id: "analytics",
+      href: "/analytics", label: t("nav.analytics"), icon: Chart, action: null, className
+    },
+    {
+      id: "notification",
+      href: "/notification",
+      label: t("nav.notification"),
+      icon: Bell,
+      className: cn(
+        className,
+        isNotificationOpen.value && "bg-primary/15",
+      ),
+      action: handleNotificationClick,
+      isActive: isNotificationOpen,
+      expandComponent: unreadCount.value > 0 ? () => h('span', {
+        class: 'absolute -top-2 -right-2 min-w-4 h-4 text-xs font-bold text-white bg-red rounded-full flex items-center justify-center'
+      }, [unreadCount.value > 9 ? '9+' : unreadCount.value]) : undefined
+    },
+    {
+      id: "settings",
+      href: "/settings", label: t("nav.settings"), icon: SettingsIcon, action: null, className
+    },
+  ] as const;
+  return baseLinks;
+});
+</script>
+
+<template>
+  <header
+    class=":uno: fixed left-0 flex flex-col items-center pt-4 gap-6 z-41 max-h-screen h-screen bg-header transition-all duration-300 ease-in-out w-18 items-center border-r border-border text-foreground/60">
+    <template v-for="i in links" :key="i.href">
+      <component :name="i.label" :is="i.action ? 'div' : 'router-link'" v-bind="i.action ? {} : { to: i.href }"
+        @click="i.action && i.action($event)" :class="cn(
+          i.className,
+          ($route.path === i.href || $route.path.startsWith(i.href + '/') || i.isActive?.value) && 'bg-primary/15 text-primary',
+        )">
+        <div class="relative">
+          <component :is="i.icon" class="w-6 h-6 shrink-0"
+            :filled="$route.path === i.href || $route.path.startsWith(i.href + '/') || i.isActive?.value" />
+          <component v-if="i.expandComponent" :is="i.expandComponent" />
+        </div>
+      </component>
+    </template>
+  </header>
+  <NotificationDrawer ref="notificationPopover" @change="(val) => (isNotificationOpen = val)" />
+</template>
diff --git a/src/components/GlobalUploadIndicator.vue b/src/components/GlobalUploadIndicator.vue
new file mode 100644
index 0000000..a5a09e3
--- /dev/null
+++ b/src/components/GlobalUploadIndicator.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { useUploadQueue } from '@/composables/useUploadQueue';
+import UploadQueueItem from '@/routes/upload/components/UploadQueueItem.vue';
+import { useUIState } from '@/stores/uiState';
+import { useTranslation } from 'i18next-vue';
+import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const { items, completeCount, pendingCount, startQueue, removeItem, cancelItem, removeAll } = useUploadQueue();
+const uiState = useUIState();
+const { t } = useTranslation();
+
+const isCollapsed = ref(false);
+
+const isVisible = computed(() => items.value.length > 0);
+
+const overallProgress = computed(() => {
+    if (items.value.length === 0) return 0;
+    const total = items.value.reduce((acc, item) => acc + (item.progress || 0), 0);
+    return Math.round(total / items.value.length);
+});
+
+const isUploading = computed(() =>
+    items.value.some(i => i.status === 'uploading' || i.status === 'fetching' || i.status === 'processing')
+);
+
+const isAllDone = computed(() =>
+    items.value.length > 0 && items.value.every(i => i.status === 'complete' || i.status === 'error')
+);
+
+const statusText = computed(() => {
+    if (isAllDone.value) return t('upload.indicator.allDone');
+    if (isUploading.value) {
+        const count = items.value.filter(i => i.status === 'uploading' || i.status === 'fetching').length;
+        return t('upload.indicator.uploading', { count });
+    }
+    if (pendingCount.value > 0) return t('upload.indicator.waiting', { count: pendingCount.value });
+    return t('upload.queueItem.status.processing');
+});
+const isDoneWithErrors = computed(() =>
+    isAllDone.value &&
+    items.value.some(i => i.status === 'error') && items.value.every(i => i.status === 'complete' || i.status === 'error')
+);
+const doneUpload = () => {
+    router.push({ name: 'videos', query: { uploaded: 'true' } });
+    removeAll();
+}
+watch(isAllDone, (newItems) => {
+    if (newItems && items.value.every(i => i.status === 'complete')) {
+        const timeout = setTimeout(() => {
+            doneUpload();
+            clearTimeout(timeout);
+        }, 3000);
+    }
+});
+</script>
+
+<template>
+    <Transition enter-active-class="transition-all duration-300 ease-out" enter-from-class="opacity-0 translate-y-4"
+        enter-to-class="opacity-100 translate-y-0" leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-4">
+
+        <div v-if="isVisible"
+            class="fixed bottom-6 right-6 z-50 w-96 rounded-2xl bg-white shadow-[0_8px_40px_rgba(0,0,0,0.16)] border border-slate-100 overflow-hidden flex flex-col"
+            style="max-height: 540px;">
+
+            <!-- Header bar -->
+            <div class="flex items-center gap-3 px-4 py-3.5 bg-slate-800 text-white shrink-0 cursor-pointer select-none"
+                @click="isCollapsed = !isCollapsed">
+
+                <!-- Status icon -->
+                <div class="relative w-6 h-6 shrink-0">
+                    <svg v-if="isUploading" class="w-6 h-6 animate-spin text-accent" viewBox="0 0 24 24" fill="none">
+                        <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" />
+                        <path class="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                    </svg>
+                    <svg v-else-if="isAllDone" class="w-6 h-6 text-green-400" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                    <svg v-else class="w-6 h-6 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10" />
+                        <polyline points="12 6 12 12 16 14" />
+                    </svg>
+                </div>
+
+                <div class="flex-1 min-w-0">
+                    <p class="text-sm font-semibold leading-tight truncate">{{ statusText }}</p>
+                    <p class="text-xs text-slate-400 leading-tight mt-0.5">
+                        {{ t('upload.indicator.completeProgress', { complete: completeCount, total: items.length }) }}
+                    </p>
+                </div>
+
+                <!-- Controls -->
+                <div class="flex items-center gap-1.5 shrink-0">
+                    <!-- Start upload -->
+                    <button v-if="pendingCount > 0 && !isUploading" @click.stop="startQueue"
+                        class="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 bg-accent hover:bg-accent/80 rounded-lg transition-all">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="5 3 19 12 5 21 5 3" />
+                        </svg>
+                        {{ t('upload.indicator.start') }}
+                    </button>
+                    <button v-else-if="isDoneWithErrors" @click.stop="doneUpload"
+                        class="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 bg-green-500 hover:bg-green-500/80 text-white rounded-lg transition-all">
+                        {{ t('upload.indicator.viewVideos') }}
+                    </button>
+                    <!-- Clear queue -->
+                    <!-- Add more files -->
+                    <button @click.stop="uiState.uploadDialogVisible = true"
+                        class="w-7 h-7 flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all"
+                        :title="t('upload.indicator.addMoreFiles')">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M5 12h14" />
+                            <path d="M12 5v14" />
+                        </svg>
+                    </button>
+
+                    <!-- Collapse/expand -->
+                    <button @click.stop="isCollapsed = !isCollapsed"
+                        class="w-7 h-7 flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 transition-transform duration-200"
+                            :class="{ 'rotate-180': isCollapsed }" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="m18 15-6-6-6 6" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Overall progress bar -->
+            <div v-if="isUploading" class="h-0.5 w-full bg-slate-100 shrink-0">
+                <div class="h-full bg-accent transition-all duration-500" :style="{ width: `${overallProgress}%` }">
+                </div>
+            </div>
+
+            <!-- File list -->
+            <Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="opacity-0"
+                enter-to-class="opacity-100" leave-active-class="transition-all duration-150 ease-in"
+                leave-from-class="opacity-100" leave-to-class="opacity-0">
+                <div v-if="!isCollapsed" class="flex-1 overflow-y-auto min-h-0">
+                    <div class="p-3 flex flex-col gap-2">
+                        <UploadQueueItem v-for="item in items" :key="item.id" :item="item" @remove="removeItem($event)"
+                            @cancel="cancelItem($event)" />
+                    </div>
+                </div>
+            </Transition>
+        </div>
+    </Transition>
+</template>
diff --git a/src/components/NotificationDrawer.vue b/src/components/NotificationDrawer.vue
new file mode 100644
index 0000000..3d438b6
--- /dev/null
+++ b/src/components/NotificationDrawer.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import NotificationItem from '@/routes/notification/components/NotificationItem.vue';
+import { useNotifications } from '@/composables/useNotifications';
+import { onClickOutside } from '@vueuse/core';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import BellOff from './icons/BellOff.vue';
+
+const isMounted = ref(false);
+onMounted(() => {
+    isMounted.value = true;
+    void notificationStore.fetchNotifications();
+});
+
+const emit = defineEmits(['change']);
+const visible = ref(false);
+const drawerRef = ref(null);
+const { t } = useTranslation();
+const notificationStore = useNotifications();
+
+const unreadCount = computed(() => notificationStore.unreadCount.value);
+const mutableNotifications = computed(() => notificationStore.notifications.value.slice(0, 8));
+
+const toggle = (event?: Event) => {
+    console.log(event);
+    visible.value = !visible.value;
+    if (visible.value && !notificationStore.loaded.value) {
+        void notificationStore.fetchNotifications();
+    }
+};
+
+onClickOutside(drawerRef, () => {
+    if (visible.value) {
+        visible.value = false;
+    }
+}, {
+    ignore: ['[name="Notification"]']
+});
+
+const handleMarkRead = async (id: string) => {
+    await notificationStore.markRead(id);
+};
+
+const handleDelete = async (id: string) => {
+    await notificationStore.deleteNotification(id);
+};
+
+const handleMarkAllRead = async () => {
+    await notificationStore.markAllRead();
+};
+
+watch(visible, (val) => {
+    emit('change', val);
+});
+
+defineExpose({ toggle });
+</script>
+
+<template>
+    <Teleport v-if="isMounted" to="body">
+        <Transition enter-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 -translate-x-4" enter-to-class="opacity-100 translate-x-0"
+            leave-active-class="transition-all duration-200 ease-in" leave-from-class="opacity-100 translate-x-0"
+            leave-to-class="opacity-0 -translate-x-4">
+            <div v-if="visible" ref="drawerRef"
+                class="fixed top-0 left-[80px] bottom-0 w-[380px] bg-white rounded-2xl border border-gray-300 p-3 z-50 flex flex-col shadow-lg my-3">
+                <div class="flex items-center justify-between p-4">
+                    <div class="flex items-center gap-2">
+                        <h3 class="font-semibold text-gray-900">{{ t('notification.title') }}</h3>
+                        <span v-if="unreadCount > 0"
+                            class="px-2 py-0.5 text-xs font-medium bg-primary text-white rounded-full">
+                            {{ unreadCount }}
+                        </span>
+                    </div>
+                    <button v-if="unreadCount > 0" @click="handleMarkAllRead"
+                        class="text-sm text-primary hover:underline font-medium">
+                        {{ t('notification.actions.markAllRead') }}
+                    </button>
+                </div>
+
+                <div class="flex flex-col flex-1 overflow-y-auto gap-2">
+                    <template v-if="notificationStore.loading.value">
+                        <div v-for="i in 4" :key="i" class="p-4 rounded-xl border border-gray-200 animate-pulse">
+                            <div class="flex items-start gap-4">
+                                <div class="w-10 h-10 rounded-full bg-gray-200"></div>
+                                <div class="flex-1 space-y-2">
+                                    <div class="h-4 bg-gray-200 rounded w-1/3"></div>
+                                    <div class="h-3 bg-gray-200 rounded w-2/3"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else-if="mutableNotifications.length > 0">
+                        <div v-for="notification in mutableNotifications" :key="notification.id"
+                            class="border-b border-gray-50 last:border-0">
+                            <NotificationItem :notification="notification" @mark-read="handleMarkRead"
+                                @delete="handleDelete" isDrawer />
+                        </div>
+                    </template>
+
+                    <div v-else class="py-12 text-center">
+                         <BellOff class="w-12 h-12 text-gray-300 mx-auto block mb-3" />
+                        <p class="text-gray-500 text-sm">{{ t('notification.empty.title') }}</p>
+                    </div>
+                </div>
+
+                <div v-if="mutableNotifications.length > 0" class="p-3 border-t border-gray-100 bg-gray-50/50">
+                    <router-link to="/notification"
+                        class="block w-full text-center text-sm text-primary font-medium hover:underline"
+                        @click="visible = false">
+                        {{ t('notification.actions.viewAll') }}
+                    </router-link>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
diff --git a/src/components/OfflineOverlay.vue b/src/components/OfflineOverlay.vue
new file mode 100644
index 0000000..e6a6cac
--- /dev/null
+++ b/src/components/OfflineOverlay.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import AppButton from '@/components/ui/AppButton.vue'
+import { useNetworkStatus } from '@/composables/useNetworkStatus'
+import { useTranslation } from 'i18next-vue'
+import { onBeforeUnmount, onMounted } from 'vue'
+
+const { t } = useTranslation()
+const { isOffline, startListening, stopListening } = useNetworkStatus()
+
+onMounted(() => {
+  startListening()
+})
+
+onBeforeUnmount(() => {
+  stopListening()
+})
+
+function reloadPage() {
+  if (typeof window === 'undefined') return
+
+  window.location.reload()
+}
+</script>
+
+<template>
+  <div
+    v-if="isOffline"
+    class="fixed inset-0 z-[10000] flex items-center justify-center bg-slate-950/80 px-6 backdrop-blur-sm"
+    role="alert"
+    aria-live="assertive"
+  >
+    <div class="w-full max-w-md rounded-2xl border border-border bg-white p-8 text-center shadow-2xl">
+      <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-danger/10 text-danger">
+        <svg
+          class="h-8 w-8"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M2 8.82a15 15 0 0 1 20 0" />
+          <path d="M5 12.86a10 10 0 0 1 14 0" />
+          <path d="M8.5 16.43a5 5 0 0 1 7 0" />
+          <path d="M12 20h.01" />
+          <path d="M3 3l18 18" />
+        </svg>
+      </div>
+
+      <h2 class="text-xl font-semibold text-foreground">
+        {{ t('network.offline.title') }}
+      </h2>
+
+      <p class="mt-3 text-sm leading-6 text-foreground/70">
+        {{ t('network.offline.description') }}
+      </p>
+
+      <div class="mt-6 flex justify-center">
+        <AppButton @click="reloadPage">
+          {{ t('network.offline.action') }}
+        </AppButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/PopupAdsRuntime.vue b/src/components/PopupAdsRuntime.vue
new file mode 100644
index 0000000..1dc967f
--- /dev/null
+++ b/src/components/PopupAdsRuntime.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import ClientOnly from '@/components/ClientOnly';
+import { onMounted, onBeforeUnmount } from 'vue';
+
+let activeItem: any | null = null;
+let clickHandler: ((event: MouseEvent) => void) | null = null;
+let scriptNode: HTMLScriptElement | null = null;
+let triggerCount = 0;
+
+const triggerKey = (id: string) => `popup_ad_triggers:${id}`;
+
+const cleanupScript = () => {
+  if (scriptNode?.parentNode) {
+    scriptNode.parentNode.removeChild(scriptNode);
+  }
+  scriptNode = null;
+};
+
+const attachUrlHandler = () => {
+  if (!activeItem?.id || typeof window === 'undefined') return;
+  const maxTriggers = Number(activeItem.maxTriggersPerSession || 1);
+  triggerCount = Number(sessionStorage.getItem(triggerKey(activeItem.id)) || '0');
+
+  clickHandler = () => {
+    if (!activeItem?.value || triggerCount >= maxTriggers) return;
+    triggerCount += 1;
+    sessionStorage.setItem(triggerKey(activeItem.id), String(triggerCount));
+    window.open(activeItem.value, '_blank', 'noopener,noreferrer');
+  };
+
+  window.addEventListener('click', clickHandler, { capture: true });
+};
+
+const attachScript = () => {
+  if (!activeItem?.value || typeof document === 'undefined') return;
+  cleanupScript();
+  scriptNode = document.createElement('script');
+  scriptNode.async = true;
+  scriptNode.text = activeItem.value;
+  document.body.appendChild(scriptNode);
+};
+
+onMounted(async () => {
+  try {
+    const response = await rpcClient.getActivePopupAd();
+    activeItem = response.item || null;
+    if (!activeItem?.isActive) return;
+
+    if (activeItem.type === 'script') {
+      attachScript();
+      return;
+    }
+
+    if (activeItem.type === 'url') {
+      attachUrlHandler();
+    }
+  } catch (error) {
+    console.error(error);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (clickHandler && typeof window !== 'undefined') {
+    window.removeEventListener('click', clickHandler, { capture: true } as EventListenerOptions);
+  }
+  cleanupScript();
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <span class="hidden" />
+  </ClientOnly>
+</template>
diff --git a/src/components/RootLayout.vue b/src/components/RootLayout.vue
index 621cb5a..43706ca 100644
--- a/src/components/RootLayout.vue
+++ b/src/components/RootLayout.vue
@@ -1,3 +1,12 @@
 <template>
-    <router-view/>
-</template>
\ No newline at end of file
+    <ClientOnly>
+        <AppTopLoadingBar />
+        <OfflineOverlay />
+    </ClientOnly>
+    <router-view />
+</template>
+<script setup lang="ts">
+import ClientOnly from '@/components/ClientOnly';
+import AppTopLoadingBar from '@/components/AppTopLoadingBar.vue'
+import OfflineOverlay from '@/components/OfflineOverlay.vue'
+</script>
diff --git a/src/components/dashboard/EmptyState.vue b/src/components/dashboard/EmptyState.vue
new file mode 100644
index 0000000..201141b
--- /dev/null
+++ b/src/components/dashboard/EmptyState.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+interface Props {
+  title: string;
+  description?: string;
+  icon?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  imageUrl?: string;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="empty-state flex flex-col items-center justify-center py-12 px-6 text-center">
+    <!-- Icon or Image -->
+    <div v-if="imageUrl" class="mb-6">
+      <img :src="imageUrl" :alt="title" class="w-64 h-64 object-contain opacity-80" />
+    </div>
+    <div 
+      v-else-if="icon"
+      class="mb-6 w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center"
+    >
+      <span :class="[icon, 'w-12 h-12 text-gray-400']" />
+    </div>
+    <div v-else class="mb-6 w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center">
+      <span class="i-heroicons-inbox w-12 h-12 text-gray-400" />
+    </div>
+
+    <!-- Content -->
+    <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ title }}</h3>
+    <p v-if="description" class="text-gray-600 mb-6 max-w-md">{{ description }}</p>
+
+    <!-- Action Button -->
+    <button
+      v-if="actionLabel && onAction"
+      @click="onAction"
+      class="btn btn-outline-primary press-animated flex items-center gap-2"
+    >
+       <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+       </svg>
+      {{ actionLabel }}
+    </button>
+
+    <!-- Slot for custom actions -->
+    <slot name="actions" />
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  min-height: 400px;
+}
+</style>
diff --git a/src/components/dashboard/PageHeader.vue b/src/components/dashboard/PageHeader.vue
new file mode 100644
index 0000000..88fe376
--- /dev/null
+++ b/src/components/dashboard/PageHeader.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { type Component, VNode } from 'vue';
+
+interface Breadcrumb {
+  label: string;
+  to?: string;
+}
+
+interface Action {
+  label: string;
+  icon?: string | VNode;
+  variant?: 'primary' | 'secondary' | 'danger';
+  onClick: () => void;
+}
+
+interface Props {
+  title: string | VNode | Component;
+  description?: string;
+  breadcrumbs?: Breadcrumb[];
+  actions?: Action[];
+}
+
+const props = defineProps<Props>();
+
+const getButtonClass = (variant?: string) => {
+  const baseClass = 'px-4 py-2.5 rounded-lg font-medium transition-all press-animated flex items-center gap-2';
+
+  switch (variant) {
+    case 'primary':
+      return `${baseClass} bg-primary hover:bg-primary-600 text-white shadow-sm`;
+    case 'danger':
+      return `${baseClass} bg-danger hover:bg-danger-600 text-white shadow-sm`;
+    case 'secondary':
+    default:
+      return `${baseClass} bg-white hover:bg-gray-50 text-gray-700 border border-gray-300`;
+  }
+};
+</script>
+
+<template>
+  <div :class="cn('page-header mb-6')">
+    <!-- Breadcrumb -->
+    <nav v-if="breadcrumbs && breadcrumbs.length" class="flex items-center gap-2 text-sm mb-2">
+      <template v-for="(crumb, index) in breadcrumbs" :key="index">
+        <router-link v-if="crumb.to" :to="crumb.to" class="text-gray-500 hover:text-primary transition-colors">
+          {{ crumb.label }}
+        </router-link>
+        <span v-else class="text-gray-700 font-medium">{{ crumb.label }}</span>
+
+        <span v-if="index < breadcrumbs.length - 1" class="w-4 h-4 text-gray-400">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+            aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </span>
+      </template>
+    </nav>
+
+    <!-- Title & Actions -->
+    <div class="flex items-start justify-between gap-4 flex-wrap">
+      <div class="flex-1 min-w-0">
+        <h1 v-if="typeof props.title == 'string'" class="text-2xl font-bold text-gray-900 mb-1">{{ title }}</h1>
+        <component v-else :is="title" />
+        <p v-if="description" class="text-gray-600">{{ description }}</p>
+      </div>
+
+      <div v-if="actions && actions.length" class="flex items-center gap-2 flex-shrink-0">
+        <button v-for="(action, index) in actions" :key="index" @click="action.onClick"
+          :class="getButtonClass(action.variant)">
+          <component v-if="action.icon" :is="action.icon" class="w-5 h-5" />
+          {{ action.label }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/dashboard/StatsCard.vue b/src/components/dashboard/StatsCard.vue
new file mode 100644
index 0000000..cdead9d
--- /dev/null
+++ b/src/components/dashboard/StatsCard.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+import { VNode } from 'vue';
+
+interface Trend {
+  value: number;
+  isPositive: boolean;
+}
+
+export interface StatProps {
+  title: string;
+  value: string | number;
+  icon?: string | VNode;
+  trend?: Trend;
+  color?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+}
+
+withDefaults(defineProps<StatProps>(), {
+  color: 'primary'
+});
+
+const { t } = useTranslation();
+
+// const gradients = {
+//   primary: 'from-primary/20 to-primary/5',
+//   success: 'from-success/20 to-success/5',
+//   warning: 'from-yellow-100 to-yellow-50',
+//   danger: 'from-danger/20 to-danger/5',
+//   info: 'from-info/20 to-info/5',
+// };
+
+const iconColors = {
+  primary: 'text-primary',
+  success: 'text-success',
+  warning: 'text-yellow-600',
+  danger: 'text-danger',
+  info: 'text-info',
+};
+</script>
+
+<template>
+  <div :class="[
+    'transform translate-y-0 relative overflow-hidden rounded-2xl p-6 bg-header',
+    // gradients[color],
+    'border border-gray-300 transition-all duration-300',
+    // 'group cursor-pointer'
+  ]">
+    <!-- Content -->
+    <div class="relative z-10">
+      <div class="flex items-start justify-between mb-3">
+        <div>
+          <p class="text-sm font-medium text-gray-600 mb-1">{{ $t(title) }}</p>
+          <p class="text-3xl font-bold text-gray-900">{{ value }}</p>
+        </div>
+
+        <div v-if="icon" :class="[
+          'w-12 h-12 rounded-xl flex items-center justify-center',
+          'bg-white/80 shadow-sm',
+          iconColors[color]
+        ]">
+          <component :is="icon" class="w-6 h-6" />
+        </div>
+      </div>
+
+      <!-- Trend Indicator -->
+      <div v-if="trend" class="flex items-center gap-1 text-sm">
+        <span :class="[
+          'flex items-center gap-1 font-medium',
+          trend.isPositive ? 'text-success' : 'text-danger'
+        ]">
+          <!-- <span :class="[
+            'w-4 h-4',
+            trend.isPositive ? 'i-heroicons-arrow-trending-up' : 'i-heroicons-arrow-trending-down'
+          ]" /> -->
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path v-if="trend.isPositive" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M3 17l6-6 4 4 8-8" />
+            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 7l-6 6-4-4-8 8" />
+          </svg>
+          {{ Math.abs(trend.value) }}%
+        </span>
+        <span class="text-gray-500">{{ t('overview.stats.trendVsLastMonth') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/icons/ActivityIcon.vue b/src/components/icons/ActivityIcon.vue
new file mode 100644
index 0000000..cabbb86
--- /dev/null
+++ b/src/components/icons/ActivityIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 3v18h18" />
+        <path d="m19 9-5 5-4-4-3 3" />
+    </svg>
+</template>
diff --git a/src/components/icons/Add.vue b/src/components/icons/Add.vue
index e952a0f..7c61e9e 100644
--- a/src/components/icons/Add.vue
+++ b/src/components/icons/Add.vue
@@ -6,14 +6,14 @@
             fill="#a6acb9" />
         <path
             d="M74 42c-18 0-32 14-32 32v320c0 18 14 32 32 32h320c18 0 32-14 32-32V74c0-18-14-32-32-32H74zM10 74c0-35 29-64 64-64h320c35 0 64 29 64 64v320c0 35-29 64-64 64H74c-35 0-64-29-64-64V74zm208 256v-80h-80c-9 0-16-7-16-16s7-16 16-16h80v-80c0-9 7-16 16-16s16 7 16 16v80h80c9 0 16 7 16 16s-7 16-16 16h-80v80c0 9-7 16-16 16s-16-7-16-16z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
     <svg v-else xmlns="http://www.w3.org/2000/svg" class="v-mid m-a" height="24" viewBox="-10 -226 468 468">
         <path
             d="M64-184c-18 0-32 14-32 32v320c0 18 14 32 32 32h320c18 0 32-14 32-32v-320c0-18-14-32-32-32H64zM0-152c0-35 29-64 64-64h320c35 0 64 29 64 64v320c0 35-29 64-64 64H64c-35 0-64-29-64-64v-320zm208 256V24h-80c-9 0-16-7-16-16s7-16 16-16h80v-80c0-9 7-16 16-16s16 7 16 16v80h80c9 0 16 7 16 16s-7 16-16 16h-80v80c0 9-7 16-16 16s-16-7-16-16z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>
\ No newline at end of file
diff --git a/src/components/icons/AdvertisementIcon.vue b/src/components/icons/AdvertisementIcon.vue
new file mode 100644
index 0000000..7822e5a
--- /dev/null
+++ b/src/components/icons/AdvertisementIcon.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 518"><path d="M234 124v256c58 3 113 25 156 63l47 41c9 8 23 10 34 5 12-5 19-16 19-29V44c0-13-7-24-19-29-11-5-25-3-34 5l-47 41c-43 38-98 60-156 63z" fill="var(--fill1)"/><path d="M138 124c-71 0-128 57-128 128s57 128 128 128v96c0 18 14 32 32 32h32c18 0 32-14 32-32V124h-96z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="-10 -242 500 516"><path d="M448-194v404l-26-24c-50-47-114-75-182-81V-89c68-6 132-34 182-81l26-24zM240 137c60 6 116 31 160 72l34 32c5 4 12 7 19 7 15 0 27-12 27-27v-425c0-16-12-28-27-28-7 0-14 3-19 8l-34 31c-50 47-116 73-185 73h-87C57-120 0-63 0 8c0 60 41 110 96 124v84c0 27 22 48 48 48h48c27 0 48-21 48-48v-79zm-40-1h8v80c0 9-7 16-16 16h-48c-9 0-16-7-16-16v-80h72zm0-224h8v192h-80c-53 0-96-43-96-96s43-96 96-96h72z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
\ No newline at end of file
diff --git a/src/components/icons/AlertTriangle.vue b/src/components/icons/AlertTriangle.vue
new file mode 100644
index 0000000..6279d97
--- /dev/null
+++ b/src/components/icons/AlertTriangle.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 580 524"><path d="M10 448c0 36 30 66 67 66h427c36 0 66-30 66-66 0-12-3-23-8-33L353 47c-13-23-37-37-63-37s-50 14-63 37L19 415c-6 10-9 21-9 33zm301-46c0 12-9 21-21 21s-21-9-21-21 9-21 21-21 21 9 21 21zm-35-238c0-8 6-14 14-14s14 6 14 14v168c0 8-6 14-14 14s-14-6-14-14V164z" fill="color-mix(in srgb, currentColor 40%, transparent)"/><path d="M290 423c-12 0-21-9-21-21s9-21 21-21 21 9 21 21-9 21-21 21zm14-91c0 8-6 14-14 14s-14-6-14-14V164c0-8 6-14 14-14s14 6 14 14v168z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="531" height="488" viewBox="-13 -224 531 488"><path d="M253-106c9 0 18 8 18 18V56c0 10-9 18-18 18-10 0-18-8-18-18V-88c0-10 8-18 18-18zm0 279c14 0 27-12 27-27s-13-27-27-27c-15 0-27 12-27 27s12 27 27 27zm-63-350c12-23 36-37 63-37 26 0 50 14 62 37l180 324c13 22 13 50 0 72s-37 35-62 35H73c-26 0-50-13-63-35s-13-50 0-72l180-324zm63-1c-14 0-26 7-32 19L41 165c-6 11-6 24 0 35 7 11 19 18 32 18h360c12 0 24-7 31-18 6-11 6-24 0-35L284-159c-6-12-18-19-31-19z" fill="currentColor"/></svg>
+</template>
diff --git a/src/components/icons/AlertTriangleIcon.vue b/src/components/icons/AlertTriangleIcon.vue
new file mode 100644
index 0000000..eea2902
--- /dev/null
+++ b/src/components/icons/AlertTriangleIcon.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+        <line x1="12" y1="9" x2="12" y2="13"></line>
+        <line x1="12" y1="17" x2="12.01" y2="17"></line>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/ArrowDownTray.vue b/src/components/icons/ArrowDownTray.vue
new file mode 100644
index 0000000..afa52f6
--- /dev/null
+++ b/src/components/icons/ArrowDownTray.vue
@@ -0,0 +1,17 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        v-if="!filled">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" v-else>
+        <path fill-rule="evenodd"
+            d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z"
+            clip-rule="evenodd" />
+    </svg>
+</template>
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean
+}>()
+</script>
diff --git a/src/components/icons/ArrowRightIcon.vue b/src/components/icons/ArrowRightIcon.vue
new file mode 100644
index 0000000..5219d46
--- /dev/null
+++ b/src/components/icons/ArrowRightIcon.vue
@@ -0,0 +1,15 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+        <polyline points="12 5 19 12 12 19"></polyline>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/Bell.vue b/src/components/icons/Bell.vue
index 3cfdf82..62bf0f5 100644
--- a/src/components/icons/Bell.vue
+++ b/src/components/icons/Bell.vue
@@ -1,18 +1,11 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" height="24" width="24" viewBox="0 0 468 532">
-        <path
-            d="M66 378h337l-13-22c-24-40-36-85-36-131v-15c0-66-54-120-120-120s-120 54-120 120v15c0 46-12 91-35 131l-13 22z"
-            fill="#a6acb9" />
-        <path
-            d="M234 10c-13 0-24 11-24 24v10C129 55 66 125 66 210v15c0 37-10 74-29 107l-22 37c-3 6-5 13-5 19 0 21 17 38 38 38h372c21 0 38-17 38-38 0-6-2-13-5-19l-22-37c-19-33-29-70-29-108v-14c0-85-63-155-144-166V34c0-13-11-24-24-24zm168 368H66l12-22c24-40 36-85 36-131v-15c0-66 54-120 120-120s120 54 120 120v15c0 46 12 91 36 131l12 22zm-236 96c10 28 37 48 68 48s58-20 68-48H166z"
-            fill="#1e3050" />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" v-else height="24" viewBox="-10 -258 468 532">
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 532"><path d="M10 391c0 19 16 35 36 35h376c20 0 36-16 36-35 0-9-3-16-8-23l-10-12c-30-37-46-84-46-132v-22c0-77-55-142-128-157v-3c0-18-14-32-32-32s-32 14-32 32v3C129 60 74 125 74 202v22c0 48-16 95-46 132l-10 12c-5 7-8 14-8 23z" fill="var(--fill1)"/><path d="M172 474c7 28 32 48 62 48s55-20 62-48H172z" fill="currentColor"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -258 468 532">
         <path
             d="M224-248c-13 0-24 11-24 24v10C119-203 56-133 56-48v15C56 4 46 41 27 74L5 111c-3 6-5 13-5 19 0 21 17 38 38 38h372c21 0 38-17 38-38 0-6-2-13-5-19l-22-37c-19-33-29-70-29-108v-14c0-85-63-155-144-166v-10c0-13-11-24-24-24zm168 368H56l12-22c24-40 36-85 36-131v-15c0-66 54-120 120-120s120 54 120 120v15c0 46 12 91 36 131l12 22zm-236 96c10 28 37 48 68 48s58-20 68-48H156z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
-</script>
\ No newline at end of file
+defineProps<{  filled?: boolean }>();
+</script>
diff --git a/src/components/icons/BellDot.vue b/src/components/icons/BellDot.vue
new file mode 100644
index 0000000..c41a7e1
--- /dev/null
+++ b/src/components/icons/BellDot.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 660 535"><path d="M106 394c0 19 16 35 36 35h376c20 0 36-16 36-35 0-9-3-16-8-23l-10-12c-30-37-46-84-46-132v-22c0-77-55-142-128-157v-3c0-18-14-32-32-32s-32 14-32 32v3c-73 15-128 80-128 157v22c0 48-16 95-46 132l-10 12c-5 7-8 14-8 23z" fill="var(--fill1)"/><path d="M616 28c5 12 0 26-12 31l-56 24c-13 5-27 0-32-13-5-12 0-26 13-31l56-24c12-5 26 0 31 13zM10 197c0-13 11-24 24-24h64c13 0 24 11 24 24s-11 24-24 24H34c-13 0-24-11-24-24zm258 280h124c-7 28-32 48-62 48s-55-20-62-48zm294-304h64c13 0 24 11 24 24s-11 24-24 24h-64c-13 0-24-11-24-24s11-24 24-24zM57 59c-13-5-18-19-13-31 5-13 19-18 32-13l56 24c12 5 17 19 12 31-5 13-19 18-31 13L57 59z" fill="var(--fill4)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else width="660" height="535" viewBox="-10 -261 660 535"><path d="M606-233c-5-13-19-18-31-13l-56 24c-13 5-18 19-13 31 5 13 19 18 31 13l56-24c13-5 18-19 13-31zm-286-15c-13 0-24 11-24 24v10c-81 11-144 81-144 166v15c0 37-10 74-29 107l-22 37c-3 6-5 13-5 19 0 21 17 38 38 38h372c21 0 38-17 38-38 0-6-2-13-5-19l-22-37c-19-33-29-70-29-108v-14c0-85-63-155-144-166v-10c0-13-11-24-24-24zm168 368H152l12-22c24-40 36-85 36-131v-15c0-66 54-120 120-120s120 54 120 120v15c0 46 12 91 36 131l12 22zm-236 96c10 28 37 48 68 48s58-20 68-48H252zM0-64c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24H24C11-88 0-77 0-64zm552-24c-13 0-24 11-24 24s11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64zM47-202l56 24c12 5 26 0 31-12 5-13 0-27-13-32l-56-24c-12-5-26 0-31 13-5 12 0 26 13 31z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{  filled?: boolean }>();
+</script>
diff --git a/src/components/icons/BellOff.vue b/src/components/icons/BellOff.vue
new file mode 100644
index 0000000..40bd21a
--- /dev/null
+++ b/src/components/icons/BellOff.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M76 425c0 19 16 35 36 35h246L140 242v16c0 48-16 94-46 132l-10 12c-5 7-8 14-8 22zm0 0zm162 83c7 28 32 48 62 48s55-20 62-48H238z" fill="var(--fill1)"/><path d="M19 19c9-9 25-9 34 0l120 120c23-30 56-52 95-60v-3c0-18 14-32 32-32s32 14 32 32v3c73 15 128 80 128 157v22c0 48 16 95 46 132l10 12c5 7 8 14 8 23 0 17-13 32-30 35l87 87c9 10 9 25 0 34s-25 9-34 0L19 53c-9-9-9-25 0-34z" fill="var(--fill4)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="600" height="601" viewBox="-12 -292 600 601"><path d="M41-273c-9-9-25-9-34 0s-9 25 0 34l528 528c9 10 25 10 34 0 9-9 9-24 0-34l-88-88c18-3 31-18 31-37 0-6-2-13-5-19l-22-37c-19-33-29-70-29-108v-14c0-85-63-155-144-166v-10c0-13-11-24-24-24s-24 11-24 24v10c-42 6-79 27-105 59L41-273zm152 152c22-29 56-47 95-47 66 0 120 54 120 120v15c0 46 12 91 36 131l12 22h-22L193-121zM133 98c19-33 31-71 34-109l-47-47v25c0 37-10 74-29 107l-22 37c-3 6-5 13-5 19 0 21 17 38 38 38h244l-48-48H120l13-22zm87 118c10 28 37 48 68 48s58-20 68-48H220z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{  filled?: boolean }>();
+</script>
diff --git a/src/components/icons/Chart.vue b/src/components/icons/Chart.vue
new file mode 100644
index 0000000..9261c17
--- /dev/null
+++ b/src/components/icons/Chart.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 600 564"><path d="M21 254c11 14 31 16 45 5l141-112 108 81c12 8 28 8 39-1l140-112v39c0 18 14 32 32 32s32-14 32-32V42c0-18-14-32-32-32H414c-18 0-32 14-32 32s14 32 32 32h29l-110 88-108-82c-11-8-28-8-39 1L26 209c-14 11-16 31-5 45zm25 108v96c0 18 14 32 32 32s32-14 32-32v-96c0-18-14-32-32-32s-32 14-32 32zm128-96v192c0 18 14 32 32 32s32-14 32-32V266c0-18-14-32-32-32s-32 14-32 32z" fill="var(--fill1)"/><path d="M446 554c80 0 144-64 144-144s-64-144-144-144-144 64-144 144 64 144 144 144zm0-240c9 0 16 7 16 16v8h16c9 0 16 7 16 16s-7 16-16 16h-46c-5 0-10 5-10 10s4 9 8 10l45 8c20 4 35 22 35 42 0 23-19 42-42 42h-6v8c0 9-7 16-16 16s-16-7-16-16v-8h-16c-9 0-16-7-16-16s7-16 16-16h54c5 0 10-4 10-10 0-5-4-9-8-10l-45-8c-20-4-35-21-35-42 0-22 18-41 40-42v-8c0-9 7-16 16-16z" fill="var(--fill4)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="0 0 599 564"><path d="M421 10c-13 0-24 11-24 24s11 24 24 24h53L333 178 221 80c-8-7-20-8-29-2L24 190c-11 7-14 22-7 33s22 14 33 7l153-102 114 100c9 8 23 8 32 0L509 91v55c0 13 11 24 24 24s24-11 24-24V34c0-13-11-24-24-24H421zM205 234c-13 0-24 11-24 24v208c0 13 11 24 24 24s24-11 24-24V258c0-13-11-24-24-24zM69 330c-13 0-24 11-24 24v112c0 13 11 24 24 24s24-11 24-24V354c0-13-11-24-24-24zm376 224c80 0 144-64 144-144s-64-144-144-144-144 64-144 144 64 144 144 144zm0-240c9 0 16 7 16 16v8h16c9 0 16 7 16 16s-7 16-16 16h-46c-5 0-10 5-10 10s4 9 8 10l45 8c20 4 35 22 35 42 0 23-19 42-42 42h-6v8c0 9-7 16-16 16s-16-7-16-16v-8h-16c-9 0-16-7-16-16s7-16 16-16h54c5 0 10-4 10-10 0-5-4-9-8-10l-45-8c-20-4-35-21-35-42 0-22 18-41 40-42v-8c0-9 7-16 16-16z" fill="var(--fill4)"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{  filled?: boolean }>();
+</script>
\ No newline at end of file
diff --git a/src/components/icons/CheckCircleIcon.vue b/src/components/icons/CheckCircleIcon.vue
new file mode 100644
index 0000000..60f2266
--- /dev/null
+++ b/src/components/icons/CheckCircleIcon.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/CheckIcon.vue b/src/components/icons/CheckIcon.vue
index 8da9b73..bdc73ce 100644
--- a/src/components/icons/CheckIcon.vue
+++ b/src/components/icons/CheckIcon.vue
@@ -1,3 +1,11 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 532 532"><path d="M10 266c0 37 21 69 51 85-10 33-2 70 24 96s63 34 96 24c16 30 48 51 85 51s69-21 85-51c33 10 70 2 96-24s34-63 24-96c30-16 51-48 51-85s-21-69-51-85c10-33 2-70-24-96s-63-34-96-24c-16-30-48-51-85-51s-69 21-85 51c-33-10-70-2-96 24s-34 63-24 96c-30 16-51 48-51 85zm152 42c-9-10-9-25 1-34 9-9 25-9 34 0l36 37 106-145c8-11 23-14 33-6 11 8 13 23 6 34L255 363c-4 5-11 9-18 10-7 0-14-3-19-8l-56-57z" fill="#a6acb9"/><path d="M339 166c8-11 23-14 33-6 11 8 13 23 6 34L255 363c-4 5-11 9-18 10-7 0-14-3-19-8l-56-57c-9-10-9-25 1-34 9-9 25-9 34 0l36 37 106-145z" fill="#1e3050"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="20 6 9 17 4 12" />
+    </svg>
 </template>
\ No newline at end of file
diff --git a/src/components/icons/CheckMarkIcon.vue b/src/components/icons/CheckMarkIcon.vue
new file mode 100644
index 0000000..cd541f1
--- /dev/null
+++ b/src/components/icons/CheckMarkIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/CoinsIcon.vue b/src/components/icons/CoinsIcon.vue
new file mode 100644
index 0000000..30d7b5f
--- /dev/null
+++ b/src/components/icons/CoinsIcon.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 532"><path d="M10 435c0 48 39 87 88 87h305c48 0 87-39 87-87 0-87-38-169-105-224l-48-41H164l-49 41C48 266 10 348 10 435zM138 36c0 4 1 8 3 12l37 74h144l37-74c2-4 3-8 3-12 0-14-12-26-26-26H164c-14 0-26 12-26 26zm44 275c0-29 23-53 52-53v-4c0-11 9-20 20-20s20 9 20 20v4h8c11 0 20 9 20 20s-9 20-20 20h-47c-7 0-13 6-13 13 0 6 4 11 10 12l42 7c25 4 44 26 44 52s-19 47-44 51v5c0 11-9 20-20 20s-20-9-20-20v-4h-24c-11 0-20-9-20-20s9-20 20-20h56c6 0 12-5 12-12 0-6-4-12-10-13l-42-7c-25-4-44-26-44-51z" fill="var(--fill1)"/><path d="M162 122c-13 0-24 11-24 24s11 24 24 24h176c13 0 24-11 24-24s-11-24-24-24H162zm92 112c-11 0-20 9-20 20v4c-29 0-52 24-52 53 0 25 19 47 44 51l42 7c6 1 10 7 10 13 0 7-6 12-12 12h-56c-11 0-20 9-20 20s9 20 20 20h24v4c0 11 9 20 20 20s20-9 20-20v-5c25-4 44-25 44-51s-18-48-44-52l-42-7c-6-1-10-6-10-13 0-6 6-12 13-12h47c11 0 20-9 20-20s-9-20-20-20h-8v-4c0-11-9-20-20-20z" fill="currentColor"/></svg>
+<svg v-else xmlns="http://www.w3.org/2000/svg" width="500" height="532" viewBox="6 -258 500 532"><path d="m379-191-46 81c84 77 163 154 163 279 0 52-43 95-95 95H111c-52 0-95-43-95-95C16 44 96-33 179-110l-46-81c-3-6-5-12-5-19 0-21 17-38 38-38h180c21 0 38 17 38 38 0 7-2 13-5 19zM227-88l-1 1C134-4 64 61 64 169c0 26 21 47 47 47h290c26 0 47-21 47-47C448 61 378-4 286-87l-1-1h-58zm-7-48h72l37-64H183l37 64zm40 96c11 0 20 9 20 20v4h8c11 0 20 9 20 20s-9 20-20 20h-47c-7 0-13 6-13 13 0 6 4 11 10 12l42 7c25 4 44 26 44 52s-19 47-44 51v5c0 11-9 20-20 20s-20-9-20-20v-4h-24c-11 0-20-9-20-20s9-20 20-20h56c6 0 12-5 12-12 0-6-4-12-10-13l-42-7c-25-4-44-26-44-51 0-29 23-53 52-53v-4c0-11 9-20 20-20z" fill="currentColor"/></svg>
+</template>
diff --git a/src/components/icons/Credit.vue b/src/components/icons/Credit.vue
index b106cf6..8546f35 100644
--- a/src/components/icons/Credit.vue
+++ b/src/components/icons/Credit.vue
@@ -1,7 +1,7 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" width="24" viewBox="0 0 532 404"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v32H10V74zm0 96h512v160c0 35-29 64-64 64H74c-35 0-64-29-64-64V170zm64 136c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24H98c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="#a6acb9"/><path d="M10 106h512v64H10zm0 0z" fill="#1e3050"/></svg>
-    <svg xmlns="http://www.w3.org/2000/svg" v-else width="24" viewBox="-10 -194 532 404"><path d="M448-136c9 0 16 7 16 16v32H48v-32c0-9 7-16 16-16h384zm16 112v160c0 9-7 16-16 16H64c-9 0-16-7-16-16V-24h416zM64-184c-35 0-64 29-64 64v256c0 35 29 64 64 64h384c35 0 64-29 64-64v-256c0-35-29-64-64-64H64zM80 96c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24h-48c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="#1e3050"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 532 404"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v32H10V74zm0 96h512v160c0 35-29 64-64 64H74c-35 0-64-29-64-64V170zm64 136c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24H98c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="var(--fill1)"/><path d="M10 106h512v64H10zm0 0z" fill="currentColor"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -194 532 404"><path d="M448-136c9 0 16 7 16 16v32H48v-32c0-9 7-16 16-16h384zm16 112v160c0 9-7 16-16 16H64c-9 0-16-7-16-16V-24h416zM64-184c-35 0-64 29-64 64v256c0 35 29 64 64 64h384c35 0 64-29 64-64v-256c0-35-29-64-64-64H64zM80 96c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24h-48c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>
\ No newline at end of file
diff --git a/src/components/icons/CreditCardIcon.vue b/src/components/icons/CreditCardIcon.vue
new file mode 100644
index 0000000..e45780c
--- /dev/null
+++ b/src/components/icons/CreditCardIcon.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path
+            d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+        <line x1="1" y1="10" x2="23" y2="10"></line>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/DownloadIcon.vue b/src/components/icons/DownloadIcon.vue
new file mode 100644
index 0000000..06ea2bd
--- /dev/null
+++ b/src/components/icons/DownloadIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+        <polyline points="7 10 12 15 17 10"/>
+        <line x1="12" x2="12" y1="15" y2="3"/>
+    </svg>
+</template>
diff --git a/src/components/icons/EllipsisVerticalIcon.vue b/src/components/icons/EllipsisVerticalIcon.vue
new file mode 100644
index 0000000..6365193
--- /dev/null
+++ b/src/components/icons/EllipsisVerticalIcon.vue
@@ -0,0 +1,5 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" fill="currentColor">
+        <path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/>
+    </svg>
+</template>
diff --git a/src/components/icons/FileUploadType.vue b/src/components/icons/FileUploadType.vue
new file mode 100644
index 0000000..77d2fe0
--- /dev/null
+++ b/src/components/icons/FileUploadType.vue
@@ -0,0 +1,23 @@
+<template>
+    <!-- Local file icon -->
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404 532">
+        <path
+            d="M26 74v384c0 27 22 48 48 48h256c27 0 48-21 48-48V197c0-4 0-8-1-11H274c-31 0-56-25-56-56V27c-3-1-7-1-10-1H74c-26 0-48 22-48 48zm64 224c0-18 14-32 32-32h96c18 0 32 14 32 32v18l40-25c10-7 24 1 24 14v83c0 12-14 20-24 13l-40-25v18c0 18-14 32-32 32h-96c-18 0-32-14-32-32v-96z"
+            fill="#a6acb9" />
+        <path
+            d="M208 26c3 0 7 0 10 1v103c0 31 25 56 56 56h103c1 3 1 7 1 11v261c0 27-21 48-48 48H74c-26 0-48-21-48-48V74c0-26 22-48 48-48h134zm156 137c2 2 4 4 6 7h-96c-22 0-40-18-40-40V34c3 2 5 4 7 6l123 123zM74 10c-35 0-64 29-64 64v384c0 35 29 64 64 64h256c35 0 64-29 64-64V197c0-17-7-34-19-46L253 29c-12-12-28-19-45-19H74zm144 272c9 0 16 7 16 16v96c0 9-7 16-16 16h-96c-9 0-16-7-16-16v-96c0-9 7-16 16-16h96zm-96-16c-18 0-32 14-32 32v96c0 18 14 32 32 32h96c18 0 32-14 32-32v-18l40 25c10 7 24-1 24-13v-84c0-12-14-20-24-13l-40 25v-18c0-18-14-32-32-32h-96zm176 38v84l-48-30v-24l48-30z"
+            fill="currentColor" />
+    </svg>
+    <!-- Remote link icon -->
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 596 564">
+        <path
+            d="M90 258h104c2-1 5-2 8-2 3-117 56-193 99-228C185 42 94 139 90 258zm128-7c28-8 73-22 135-40-5 16-9 31-14 47h103c-3-132-72-209-112-231-39 22-107 96-112 224zm51 247c10 3 21 5 32 6-9-7-18-16-27-26-2 7-3 13-5 20zm11-38c17 22 36 37 50 45 40-22 109-99 112-231H334l-6 21c-16 55-32 110-48 164zm0 0zm79-432c44 35 97 112 99 230h112c-4-119-95-216-211-230zm0 476c116-14 207-111 211-230H458c-2 117-55 195-99 230z"
+            fill="#a6acb9" />
+        <path
+            d="M570 274H458c-2 118-55 195-99 230 116-14 207-111 211-230zM269 498c10 3 21 5 32 6-9-7-18-16-27-26l6-18c18 22 36 37 50 45 40-22 109-99 112-231H335l4-16h103c-3-132-72-209-112-231-39 22-107 96-112 224l-16 5c3-117 56-193 99-228C185 42 94 139 90 258h104l-55 16H90c0 5 1 10 1 14l-16 5c0-9-1-18-1-27C74 125 189 10 330 10s256 115 256 256-115 256-256 256c-23 0-45-3-66-9l5-15zm301-240c-4-119-95-216-211-230 44 35 97 112 99 230h112zM150 414l2 5 46 92 60-205-204 60 91 46 5 2zM31 373l-21-11 23-7 231-68 18-5-5 18-68 232-7 22-60-120-94 94-6 5-11-11 5-6 95-94-100-49z"
+            fill="currentColor" />
+    </svg>
+</template>
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/Globe.vue b/src/components/icons/Globe.vue
new file mode 100644
index 0000000..cd353ae
--- /dev/null
+++ b/src/components/icons/Globe.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 627 563"><path d="M10 241h112c5-88 35-169 71-222C94 49 20 135 10 241zm0 48c10 106 84 193 183 222-36-52-66-134-71-222H10zm160-48h190c-4-62-22-121-45-165-13-25-27-44-38-56-6-5-10-8-12-10-2 2-6 5-12 10-11 12-25 31-38 56-23 44-41 103-45 165zm0 48c4 62 22 121 45 166 13 25 27 43 38 55 6 5 10 8 12 10 2-2 6-5 12-10 6-6 13-15 20-25-10-23-16-49-16-76 0-45 16-87 42-120H170zM337 19c34 50 64 126 70 210 21-8 43-12 66-12 15 0 30 2 44 5-16-97-87-175-180-203z" fill="var(--fill1)"/><path d="M473 553c80 0 144-64 144-144s-64-144-144-144-144 64-144 144 64 144 144 144zm87-145c-19-28-51-47-87-47s-68 19-87 47l-25-19c24-36 65-60 112-60s88 24 113 60l-26 19zm-23 17-26 19c-8-11-22-19-38-19s-30 8-38 19l-26-19c15-19 38-32 64-32s49 13 64 32zm-84 48c0-11 9-20 20-20s20 9 20 20-9 20-20 20-20-9-20-20z" fill="currentColor"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="22 -258 628 564"><path d="M288 232c-1 0-7-1-18-12-12-11-24-28-36-49-22-39-39-92-41-147h160c17-19 38-35 62-46-7-76-37-145-70-187 81 22 144 87 162 169 12 1 23 3 34 5-21-121-126-213-253-213C147-248 32-133 32 8s115 256 256 256c17 0 33-2 49-5-10-14-18-30-23-47-3 3-5 6-7 8-12 11-18 12-19 12zM384-8H192c3-55 20-107 42-147 12-21 24-38 35-49 12-10 18-12 19-12s7 2 18 12c12 11 24 28 36 49 22 40 39 92 41 147zm0 0zM160-8H65c6-97 75-177 166-201-35 44-67 120-71 201zM65 24h95c4 82 36 157 71 201C140 201 71 121 65 24zm431 16c62 0 112 50 112 112s-50 112-112 112-112-50-112-112S434 40 496 40zm0 256c80 0 144-64 144-144S576 8 496 8 352 72 352 152s64 144 144 144zm96-165c-24-26-58-43-96-43s-72 17-96 43l25 21c17-20 43-32 71-32s54 12 71 32l25-21zm-96 13c-21 0-41 8-55 22l25 21c8-7 19-11 30-11 12 0 22 4 30 11l25-21c-14-14-34-22-55-22zm0 92c11 0 20-9 20-20s-9-20-20-20-20 9-20 20 9 20 20 20z" fill="currentColor"/></svg>
+</template>
diff --git a/src/components/icons/GlobeIcon.vue b/src/components/icons/GlobeIcon.vue
new file mode 100644
index 0000000..e8d14ab
--- /dev/null
+++ b/src/components/icons/GlobeIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="2" y1="12" x2="22" y2="12"></line>
+        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/HardDriveUpload.vue b/src/components/icons/HardDriveUpload.vue
new file mode 100644
index 0000000..2e409d8
--- /dev/null
+++ b/src/components/icons/HardDriveUpload.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 503"><path d="M10 397v32c0 35 29 64 64 64h320c35 0 64-29 64-64v-32c0-35-29-64-64-64H266v32c0 18-14 32-32 32s-32-14-32-32v-32H74c-35 0-64 29-64 64zm392 16c0 13-11 24-24 24s-24-11-24-24 11-24 24-24 24 11 24 24z" fill="#a6acb9"/><path d="M234 397c18 0 32-14 32-32V122l41 42c13 12 33 12 46 0 12-13 12-33 0-46l-96-96c-13-12-33-12-46 0l-96 96c-12 13-12 33 0 46 13 12 33 12 46 0l41-42v243c0 18 14 32 32 32z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="-10 -260 468 502"><path d="M248 80c0 13-11 24-24 24s-24-11-24-24v-246l-63 63c-9 9-25 9-34 0s-9-25 0-34l104-104c9-9 25-9 34 0l104 104c9 9 9 25 0 34s-25 9-34 0l-63-63V80zm-96-8H64c-9 0-16 7-16 16v80c0 9 7 16 16 16h320c9 0 16-7 16-16V88c0-9-7-16-16-16h-88V24h88c35 0 64 29 64 64v80c0 35-29 64-64 64H64c-35 0-64-29-64-64V88c0-35 29-64 64-64h88v48zm168 56c0-13 11-24 24-24s24 11 24 24-11 24-24 24-24-11-24-24z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/HeartIcon.vue b/src/components/icons/HeartIcon.vue
new file mode 100644
index 0000000..204641e
--- /dev/null
+++ b/src/components/icons/HeartIcon.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z" />
+    </svg>
+</template>
diff --git a/src/components/icons/Home.vue b/src/components/icons/Home.vue
index de9ab31..f2800c8 100644
--- a/src/components/icons/Home.vue
+++ b/src/components/icons/Home.vue
@@ -1,18 +1,17 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" class="v-mid m-a" height="24" width="24"
-        viewBox="0 0 539 535">
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 539 535">
         <path d="M61 281c2-1 4-3 6-5L269 89l202 187c2 2 4 4 6 5v180c0 35-29 64-64 64H125c-35 0-64-29-64-64V281z"
-            fill="#a6acb9" />
+            fill="var(--fill1)" />
         <path
             d="M247 22c13-12 32-12 44 0l224 208c13 12 13 32 1 45s-32 14-45 2L269 89 67 276c-13 12-33 12-45-1s-12-33 1-45L247 22z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" v-else class="v-mid m-a" height="24" width="24" viewBox="-11 -259 535 533">
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-11 -259 535 533">
         <path
             d="M272-242c-9-8-23-8-32 0L8-34C-2-25-3-10 6 0s24 11 34 2l8-7v205c0 35 29 64 64 64h288c35 0 64-29 64-64V-5l8 7c10 9 25 8 34-2s8-25-2-34L272-242zM416-48v248c0 9-7 16-16 16H112c-9 0-16-7-16-16V-48l160-144L416-48z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
-</script>
\ No newline at end of file
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/ImageIcon.vue b/src/components/icons/ImageIcon.vue
new file mode 100644
index 0000000..8e43bc9
--- /dev/null
+++ b/src/components/icons/ImageIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <circle cx="9" cy="9" r="2" />
+        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </svg>
+</template>
diff --git a/src/components/icons/Inbox.vue b/src/components/icons/Inbox.vue
new file mode 100644
index 0000000..037ceb1
--- /dev/null
+++ b/src/components/icons/Inbox.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 532 468"><path d="M10 268v126c0 35 29 64 64 64h384c35 0 64-29 64-64V268c0-3 0-6-1-9L494 65c-5-32-32-55-64-55H102c-32 0-59 23-64 55L11 259c-1 3-1 6-1 9zm64-2 28-192h328l28 192h-60c-12 0-23 7-29 18l-14 28c-6 11-17 18-29 18H206c-12 0-23-7-29-18l-14-28c-5-11-17-18-29-18H74z" fill="var(--fill1)"/><path d="M249 291c9 9 25 9 34 0l64-64c9-9 9-25 0-34s-25-9-34 0l-23 23v-86c0-13-11-24-24-24s-24 11-24 24v86l-23-23c-9-9-25-9-34 0-9 10-9 25 0 34l64 64z" fill="var(--fill4)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else width="532" height="468" viewBox="-10 -226 532 468"><path d="M98-184c-16 0-30 12-32 27L35 56h100c11 0 21 5 27 14l23 34h142l23-34c6-9 16-14 27-14h100l-31-213c-2-15-16-27-31-27H98zM32 168c0 18 14 32 32 32h384c18 0 32-14 32-32V88H377l-23 34c-6 9-16 14-26 14H185c-11 0-21-5-27-14l-23-34H32v80zm2-329c5-32 32-55 64-55h317c31 0 58 23 63 55l33 227c1 3 1 6 1 10v92c0 35-29 64-64 64H64c-35 0-64-29-64-64V76c0-4 0-7 1-10l33-227zM339-21l-72 72c-6 7-16 7-22 0l-72-72c-6-6-6-16 0-22s16-6 22 0l45 44v-121c0-9 7-16 16-16s16 7 16 16V1l45-44c6-6 16-6 22 0 7 6 7 16 0 22z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{  filled?: boolean }>();
+</script>
diff --git a/src/components/icons/InfoIcon.vue b/src/components/icons/InfoIcon.vue
new file mode 100644
index 0000000..5e26ce6
--- /dev/null
+++ b/src/components/icons/InfoIcon.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="16" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/LanguageIcon.vue b/src/components/icons/LanguageIcon.vue
new file mode 100644
index 0000000..d876388
--- /dev/null
+++ b/src/components/icons/LanguageIcon.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 536"><path d="M269 477c58-131 80-180 128-288 5-12 16-19 29-19s24 7 29 19l128 288c7 16 0 35-16 42s-35 0-42-16l-20-45H347l-20 45c-7 16-26 23-42 16s-23-26-16-42zm107-83h100l-50-113-50 113z" fill="var(--fill1)"/><path d="M170 10c18 0 32 14 32 32v32h128c18 0 32 14 32 32s-14 32-32 32h-10l-8 23c-16 45-41 87-72 122 14 9 29 17 44 24l51 22-26 59-51-23c-23-10-45-22-66-36-21 17-44 32-69 44l-35 18c-15 8-35 1-43-15-7-15-1-35 15-43l34-17c17-8 32-18 47-28-14-13-27-27-39-41l-21-24c-11-14-9-34 5-46 13-11 33-9 45 5l20 24c11 14 24 27 37 39 28-31 50-66 64-106v-1H42c-18 0-32-14-32-32s14-32 32-32h96V42c0-18 14-32 32-32z" fill="var(--fill3)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 599 535"><path d="M178 10c13 0 24 11 24 24v56h136c13 0 24 11 24 24s-11 24-24 24h-16l-17 38c-18 44-45 83-78 116 14 10 29 18 44 25l61 28 72-161c4-8 13-14 22-14 10 0 18 6 22 14l136 304c5 12 0 27-12 32s-26 0-32-12l-29-66H341l-29 66c-5 12-20 17-32 12s-17-20-12-32l45-99-61-29c-22-9-42-21-61-35-18 14-37 26-57 36l-57 30c-12 7-26 2-32-10-6-11-2-26 10-32l57-30c14-7 27-16 40-25-27-26-51-55-70-88-6-11-3-26 9-33 11-6 26-2 33 9 17 30 39 58 65 81 31-30 55-66 72-106l9-19H34c-13 0-24-11-24-24s11-24 24-24h120V34c0-13 11-24 24-24zm311 384-63-141-63 141h126z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{  filled?: boolean }>();
+</script>
\ No newline at end of file
diff --git a/src/components/icons/Layout.vue b/src/components/icons/Layout.vue
index c5302fa..18930d7 100644
--- a/src/components/icons/Layout.vue
+++ b/src/components/icons/Layout.vue
@@ -6,14 +6,14 @@
             fill="#a6acb9" />
         <path
             d="M394 42c18 0 32 14 32 32v64H42V74c0-18 14-32 32-32h320zM42 394V170h96v256H74c-18 0-32-14-32-32zm128 32V170h256v224c0 18-14 32-32 32H170zM74 10c-35 0-64 29-64 64v320c0 35 29 64 64 64h320c35 0 64-29 64-64V74c0-35-29-64-64-64H74z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
     <svg xmlns="http://www.w3.org/2000/svg" v-else class="v-mid m-a" height="24" width="24" viewBox="-10 -226 468 468">
         <path
             d="M384-184c18 0 32 14 32 32v64H32v-64c0-18 14-32 32-32h320zM32 168V-56h96v256H64c-18 0-32-14-32-32zm128 32V-56h256v224c0 18-14 32-32 32H160zM64-216c-35 0-64 29-64 64v320c0 35 29 64 64 64h320c35 0 64-29 64-64v-320c0-35-29-64-64-64H64z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>
\ No newline at end of file
diff --git a/src/components/icons/LayoutDashboard.vue b/src/components/icons/LayoutDashboard.vue
new file mode 100644
index 0000000..007b30b
--- /dev/null
+++ b/src/components/icons/LayoutDashboard.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+        <line x1="3" x2="21" y1="9" y2="9" />
+        <line x1="9" x2="9" y1="21" y2="9" />
+    </svg>
+</template>
diff --git a/src/components/icons/LinkIcon.vue b/src/components/icons/LinkIcon.vue
new file mode 100644
index 0000000..299545d
--- /dev/null
+++ b/src/components/icons/LinkIcon.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 596 404"><path d="M74 170v64c0 53 43 96 96 96h96v64h64v-64h96c53 0 96-43 96-96v-64c0-53-43-96-96-96h-96V10h-64v64h-96c-53 0-96 43-96 96zm96 0h256v64H170v-64z" fill="#a6acb9"/><path d="M170 10C82 10 10 82 10 170v64c0 88 72 160 160 160h96v-64h-96c-53 0-96-43-96-96v-64c0-53 43-96 96-96h96V10h-96zm256 384c88 0 160-72 160-160v-64c0-88-72-160-160-160h-96v64h96c53 0 96 43 96 96v64c0 53-43 96-96 96h-96v64h96zM202 170h-32v64h256v-64H202z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="-10 -194 596 404"><path d="M160-184C72-184 0-112 0-24v64c0 88 72 160 160 160h96v-64h-96c-53 0-96-43-96-96v-64c0-53 43-96 96-96h96v-64h-96zm256 384c88 0 160-72 160-160v-64c0-88-72-160-160-160h-96v64h96c53 0 96 43 96 96v64c0 53-43 96-96 96h-96v64h96zM192-24h-32v64h256v-64H192z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
\ No newline at end of file
diff --git a/src/components/icons/ListIcon.vue b/src/components/icons/ListIcon.vue
new file mode 100644
index 0000000..f902573
--- /dev/null
+++ b/src/components/icons/ListIcon.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M10 170v224c0 35 29 64 64 64h320c35 0 64-29 64-64V170H10zm96 88c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24zm0 112c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24z" fill="var(--fill1)"/><path d="M74 10c-35 0-64 29-64 64v96h448V74c0-35-29-64-64-64H74zm240 48h64c7 0 12 4 15 10 2 6 1 13-4 17l-32 32c-6 7-16 7-22 0l-32-32c-5-4-6-11-4-17 3-6 9-10 15-10z" fill="currentColor"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -226 468 468"><path d="M64-184h320c18 0 32 14 32 32v64H32v-64c0-18 14-32 32-32zM32-56h384v224c0 18-14 32-32 32H64c-18 0-32-14-32-32V-56zM0-152v320c0 35 29 64 64 64h320c35 0 64-29 64-64v-320c0-35-29-64-64-64H64c-35 0-64 29-64 64zM112 8c-9 0-16 7-16 16s7 16 16 16h224c9 0 16-7 16-16s-7-16-16-16H112zm0 96c-9 0-16 7-16 16s7 16 16 16h224c9 0 16-7 16-16s-7-16-16-16H112zm200-260c-5 0-9 3-11 7-2 5-1 10 3 14l24 24c4 4 12 4 17 0l24-24c3-4 4-9 2-14-2-4-6-7-11-7h-48z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
\ No newline at end of file
diff --git a/src/components/icons/LockIcon.vue b/src/components/icons/LockIcon.vue
new file mode 100644
index 0000000..7f52a02
--- /dev/null
+++ b/src/components/icons/LockIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+</template>
diff --git a/src/components/icons/MailIcon.vue b/src/components/icons/MailIcon.vue
new file mode 100644
index 0000000..aaafa44
--- /dev/null
+++ b/src/components/icons/MailIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 532 404"><path d="M10 58c0 15 7 29 19 38l208 156c17 13 41 13 58 0L503 96c12-9 19-23 19-38v272c0 35-29 64-64 64H74c-35 0-64-29-64-64V58z" fill="var(--fill1)"/><path d="M58 10c-26 0-48 22-48 48 0 15 7 29 19 38l208 156c17 13 41 13 58 0L503 96c12-9 19-23 19-38 0-26-21-48-48-48H58z" fill="var(--fill4)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="20" height="16" x="2" y="4" rx="2" />
+        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+    </svg>
+</template>
diff --git a/src/components/icons/MoneyCheck.vue b/src/components/icons/MoneyCheck.vue
new file mode 100644
index 0000000..cfb44ac
--- /dev/null
+++ b/src/components/icons/MoneyCheck.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 500"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v73c-21 3-41 13-58 29l-58 58H306c-13 0-24 11-24 24s11 24 24 24h52l-64 64c-13 14-23 30-28 48H74c-35 0-64-29-64-64V74zm76 93c0 25 19 47 44 51l42 7c6 1 10 7 10 13 0 7-5 12-12 12h-56c-11 0-20 9-20 20s9 20 20 20h24v4c0 11 9 20 20 20s20-9 20-20v-5c25-4 44-25 44-51s-18-48-44-52l-41-7c-6-1-11-6-11-12 0-7 6-13 13-13h47c11 0 20-9 20-20s-9-20-20-20h-8v-4c0-11-9-20-20-20s-20 9-20 20v4c-29 0-52 24-52 53zm196-21c0 13 11 24 24 24h128c13 0 24-11 24-24s-11-24-24-24H306c-13 0-24 11-24 24z" fill="var(--fill1)"/><path d="m298 473 12-60c3-12 9-24 18-33l119-119 80 80-119 119c-9 9-20 15-33 18l-59 12h-3c-8 0-15-7-15-15v-3zm0 0zm251-154-80-80 29-29c22-22 58-22 80 0s22 58 0 80l-29 29z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 607 500"><path d="M74 42h384c18 0 32 14 32 32v81c11-3 22-5 32-5V74c0-35-28-64-64-64H74c-35 0-64 29-64 64v256c0 35 29 64 64 64h189l1-4c1-9 4-19 8-28H74c-17 0-32-14-32-32V74c0-18 15-32 32-32zm240 192c-8 0-16 7-16 16s8 16 16 16h44l32-32h-76zm-16-80c0 9 8 16 16 16h96c9 0 16-7 16-16s-7-16-16-16h-96c-8 0-16 7-16 16zM170 98c-8 0-16 7-16 16v8h-1c-26 0-47 21-47 46 0 23 17 42 39 46l45 8c7 1 12 7 12 14 0 8-6 14-14 14h-58c-8 0-16 7-16 16s8 16 16 16h24v8c0 9 8 16 16 16 9 0 16-7 16-16v-8h2c26 0 46-21 46-46 0-23-16-42-38-46l-46-8c-6-1-12-7-12-14 0-8 7-14 15-14h49c9 0 16-7 16-16s-7-16-16-16h-16v-8c0-9-7-16-16-16zm182 288 102-102 50 51-102 102c-4 5-11 8-17 9l-51 8 9-51c1-6 4-12 8-17zm0 0zm124-125 21-20c14-14 37-14 51 0s14 36 0 50l-21 21-51-51zM311 398l-12 75c0 1-1 1-1 2 0 8 7 15 15 15h3l74-13c13-2 26-8 35-17l145-146c27-26 27-69 0-96-26-26-69-26-96 0L329 364c-9 9-16 21-18 34z" fill="currentColor"/></svg>
+</template>
diff --git a/src/components/icons/MonitorIcon.vue b/src/components/icons/MonitorIcon.vue
new file mode 100644
index 0000000..927ef3f
--- /dev/null
+++ b/src/components/icons/MonitorIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="20" height="14" x="2" y="3" rx="2" />
+        <line x1="8" x2="16" y1="21" y2="21" />
+        <line x1="12" x2="12" y1="17" y2="21" />
+    </svg>
+</template>
diff --git a/src/components/icons/PanelLeft.vue b/src/components/icons/PanelLeft.vue
new file mode 100644
index 0000000..78e6f5e
--- /dev/null
+++ b/src/components/icons/PanelLeft.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+
+defineProps<{
+    class?: string;
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg :class="cn('w-6 h-6', $props.class)" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21Z"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M9 3V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+</template>
diff --git a/src/components/icons/PencilIcon.vue b/src/components/icons/PencilIcon.vue
new file mode 100644
index 0000000..40e9bab
--- /dev/null
+++ b/src/components/icons/PencilIcon.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 534 533"><path d="m303 93 104 104 34 34 62-62c14-13 21-32 21-51s-7-38-21-51l-36-36c-13-13-32-21-51-21s-38 8-51 21l-62 62z" fill="#a6acb9"/><path d="m95 377-24 87 86-25c7-1 13-5 18-10l-71-69c-4 5-8 10-9 17zm174-250 34-34 104 104 34 34-34 34-198 198c-11 11-24 19-39 23L42 521c-8 2-17 0-23-6s-9-15-6-23l35-128c5-15 12-28 23-39l198-198z" fill="#1e3050"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="534" height="533" viewBox="-12 -258 534 533"><path d="M404-216c-11 0-21 4-28 12l-59 58 93 93 58-58c8-8 12-18 12-29s-4-21-12-28l-35-36c-8-8-18-12-29-12zM93 78l93 93L387-30l-93-93L93 78zm-21 25c-2 3-4 7-5 11L36 229l114-32c4-1 8-3 11-5l-89-89zm281-330c13-13 32-21 51-21s38 8 51 21l36 36c13 13 21 32 21 51s-8 38-21 51L197 205c-11 11-24 19-39 23L30 263c-8 2-17 0-23-6s-9-15-6-23l35-128c5-15 12-28 23-39l294-294z" fill="currentColor"/></svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/PlayIcon.vue b/src/components/icons/PlayIcon.vue
new file mode 100644
index 0000000..d6fae61
--- /dev/null
+++ b/src/components/icons/PlayIcon.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polygon points="5 3 19 12 5 21 5 3" />
+    </svg>
+</template>
diff --git a/src/components/icons/PlusIcon.vue b/src/components/icons/PlusIcon.vue
new file mode 100644
index 0000000..1a4aef9
--- /dev/null
+++ b/src/components/icons/PlusIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="12" y1="5" x2="12" y2="19"/>
+        <line x1="5" y1="12" x2="19" y2="12"/>
+    </svg>
+</template>
diff --git a/src/components/icons/PlusSquareIcon.vue b/src/components/icons/PlusSquareIcon.vue
new file mode 100644
index 0000000..c6d577d
--- /dev/null
+++ b/src/components/icons/PlusSquareIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M12 8v8" />
+        <path d="M8 12h8" />
+    </svg>
+</template>
diff --git a/src/components/icons/RepeatIcon.vue b/src/components/icons/RepeatIcon.vue
new file mode 100644
index 0000000..327e7df
--- /dev/null
+++ b/src/components/icons/RepeatIcon.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+        <path d="M3 3v5h5" />
+        <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+        <path d="M16 21h5v-5" />
+    </svg>
+</template>
diff --git a/src/components/icons/SendIcon.vue b/src/components/icons/SendIcon.vue
new file mode 100644
index 0000000..52b9907
--- /dev/null
+++ b/src/components/icons/SendIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 628 628"><path d="M286 343 618 10 394 618 286 343z" fill="var(--fill1)"/><path d="M618 10 10 234l276 109L618 10z" fill="var(--fill4)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m22 2-7 20-4-9-9-4Z" />
+        <path d="M22 2 11 13" />
+    </svg>
+</template>
diff --git a/src/components/icons/SettingsIcon.vue b/src/components/icons/SettingsIcon.vue
new file mode 100644
index 0000000..dd7a483
--- /dev/null
+++ b/src/components/icons/SettingsIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 580"><path d="M18 190c-8 14-6 32 5 43l37 36v42l-37 36c-11 12-13 29-5 43l46 80c8 14 24 21 40 17l50-14c11 8 23 15 36 21l13 50c4 15 18 26 34 26h93c16 0 30-11 34-26l13-50c13-6 25-13 36-21l50 14c15 4 32-3 40-17l46-80c8-14 6-31-6-43l-37-36c1-7 1-14 1-21s0-14-1-21l37-36c12-11 14-29 6-43l-46-80c-8-14-24-21-40-17l-50 14c-11-8-23-15-36-21l-13-50c-4-15-18-26-34-26h-93c-16 0-30 11-34 26l-13 50c-13 6-25 13-36 21l-50-13c-16-5-32 2-40 16l-46 80zm377 100c1 41-20 79-55 99-35 21-79 21-114 0-35-20-56-58-54-99-2-41 19-79 54-99 35-21 79-21 114 0 35 20 56 58 55 99zm-195 0c-2 31 14 59 40 75 27 15 59 15 86 0 26-16 42-44 41-75 1-31-15-59-41-75-27-15-59-15-86 0-26 16-42 44-40 75z" fill="var(--fill1)"/><path d="M283 206c46 0 84 37 84 84 0 46-37 84-83 84-47 0-85-37-85-84 0-46 37-84 84-84zm1 196c61 0 111-51 111-112 0-62-51-112-112-112-62 0-112 51-112 112 0 62 51 112 113 112z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path
+            d="M12.22 2h-.44a2 2 0 0 1-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z">
+        </path>
+        <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/SlidersIcon.vue b/src/components/icons/SlidersIcon.vue
new file mode 100644
index 0000000..e1f6803
--- /dev/null
+++ b/src/components/icons/SlidersIcon.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="20" height="16" x="2" y="4" rx="2" />
+        <circle cx="8" cy="10" r="2" />
+        <path d="M16 10h.01" />
+        <path d="M12 10h.01" />
+        <path d="M2 14h20" />
+    </svg>
+</template>
diff --git a/src/components/icons/TelegramIcon.vue b/src/components/icons/TelegramIcon.vue
new file mode 100644
index 0000000..9e506b7
--- /dev/null
+++ b/src/components/icons/TelegramIcon.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="516" height="516" viewBox="-2 -250 516 516"><path d="M256-240C119-240 8-129 8 8s111 248 248 248S504 145 504 8 393-240 256-240zM371-71c-4 39-20 134-28 178-4 19-10 25-17 25-14 2-25-9-39-18-22-15-34-23-56-37-24-17-8-25 6-40 3-4 67-61 68-67 0 0 0-3-1-4-2-1-4-1-5-1-2 1-37 24-105 70-10 6-19 10-27 9-9 0-26-5-38-9-16-5-28-7-27-16 0-4 7-9 18-14 73-31 121-52 145-62 69-29 83-34 92-34 2 0 7 1 10 3 2 2 3 4 3 7 1 3 1 6 1 10z" fill="currentColor"/></svg>
+</template>
diff --git a/src/components/icons/TrashIcon.vue b/src/components/icons/TrashIcon.vue
new file mode 100644
index 0000000..2cf3e82
--- /dev/null
+++ b/src/components/icons/TrashIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 548"><path d="M42 122v352c0 35 29 64 64 64h256c35 0 64-29 64-64V122H42zm64 88c0-13 11-24 24-24s24 11 24 24v240c0 13-11 24-24 24s-24-11-24-24V210zm104 0c0-13 11-24 24-24s24 11 24 24v240c0 13-11 24-24 24s-24-11-24-24V210zm104 0c0-13 11-24 24-24s24 11 24 24v240c0 13-11 24-24 24s-24-11-24-24V210z" fill="color-mix(in srgb, var(--colors-danger-DEFAULT) 40%, transparent)"/><path d="M177 10c-14 0-26 9-30 22l-9 26H42c-18 0-32 14-32 32s14 32 32 32h384c18 0 32-14 32-32s-14-32-32-32h-96l-9-26c-4-13-16-22-30-22H177z" fill="var(--colors-danger-DEFAULT)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="3 6 5 6 21 6"></polyline>
+        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+        <line x1="10" y1="11" x2="10" y2="17"></line>
+        <line x1="14" y1="11" x2="14" y2="17"></line>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/Upload.vue b/src/components/icons/Upload.vue
index 9ebc8be..0f178c3 100644
--- a/src/components/icons/Upload.vue
+++ b/src/components/icons/Upload.vue
@@ -1,18 +1,18 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" width="28" viewBox="0 0 596 468">
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" class="min-w-[28px]" viewBox="0 0 596 468">
         <path
             d="M10 314c0-63 41-117 98-136-1-8-2-16-2-24 0-79 65-144 144-144 55 0 104 31 128 77 14-8 30-13 48-13 53 0 96 43 96 96 0 16-4 31-10 44 44 20 74 64 74 116 0 71-57 128-128 128H154c-79 0-144-64-144-144zm199-73c-9 9-9 25 0 34s25 9 34 0l31-31v102c0 13 11 24 24 24s24-11 24-24V244l31 31c9 9 25 9 34 0s9-25 0-34l-72-72c-10-9-25-9-34 0l-72 72z"
-            fill="#a6acb9" />
+            fill="var(--fill1)" />
         <path
             d="M281 169c9-9 25-9 34 0l72 72c9 9 9 25 0 34s-25 9-34 0l-31-31v102c0 13-11 24-24 24s-24-11-24-24V244l-31 31c-9 9-25 9-34 0s-9-25 0-34l72-72z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" v-else width="28" viewBox="-10 -226 596 468">
+    <svg xmlns="http://www.w3.org/2000/svg" v-else class="min-w-[28px]" viewBox="-10 -226 596 468">
         <path
             d="M240-216c-88 0-160 72-160 160 0 5 0 10 1 15C33-18 0 31 0 88c0 80 65 144 144 144h304c71 0 128-57 128-128 0-50-28-93-70-114 4-12 6-25 6-38 0-66-54-120-120-120-11 0-23 2-33 5-30-33-72-53-119-53zM128-56c0-62 50-112 112-112 38 0 71 19 91 47 7 10 20 13 30 8 9-4 20-7 31-7 40 0 72 32 72 72 0 14-4 27-11 38-4 7-5 15-2 22s9 13 16 14c35 9 61 41 61 78 0 44-36 80-80 80H144c-53 0-96-43-96-96 0-43 28-79 67-91 11-4 18-16 16-29-2-7-3-16-3-24zm177 7c-9-9-25-9-34 0l-64 64c-9 9-9 25 0 34 10 9 25 9 34 0l23-23v86c0 13 11 24 24 24s24-11 24-24V26l23 23c9 9 25 9 34 0s9-25 0-34l-64-64z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{ filled?: boolean }>();
 </script>
\ No newline at end of file
diff --git a/src/components/icons/UploadIcon.vue b/src/components/icons/UploadIcon.vue
new file mode 100644
index 0000000..03ac238
--- /dev/null
+++ b/src/components/icons/UploadIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" x2="12" y1="3" y2="15" />
+    </svg>
+</template>
diff --git a/src/components/icons/UserIcon copy.vue b/src/components/icons/UserIcon copy.vue
new file mode 100644
index 0000000..53f8003
--- /dev/null
+++ b/src/components/icons/UserIcon copy.vue	
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 531"><path d="M10 150c1 99 41 281 214 363 16 8 36 8 52 0 173-82 214-264 214-363 0-26-16-48-38-57L263 13c-4-2-9-3-13-3s-8 1-12 3L48 93c-22 9-38 31-38 57zm128 212c0-44 36-80 80-80h64c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16zm168-176c0 31-25 56-56 56s-56-25-56-56 25-56 56-56 56 25 56 56z" fill="#a6acb9"/><path d="M282 282c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16 0-44 36-80 80-80h64zm-32-40c-31 0-56-25-56-56s25-56 56-56 56 25 56 56-25 56-56 56z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="518" height="532" viewBox="-3 -258 518 532"><path d="M368 120h-33l-22-64H199l-21 64h-34l32-96h160l32 96zM256-8c-35 0-64-29-64-64s29-64 64-64c36 0 64 29 64 64S292-8 256-8zm0-96c-17 0-32 14-32 32s15 32 32 32c18 0 32-14 32-32s-14-32-32-32zm0 368-12-5C92 193 7 26 17-135l1-20 238-93 239 93 1 20c9 161-76 328-227 394l-13 5zM49-133c-7 147 67 302 207 362 140-60 215-215 208-362l-208-81-207 81z" fill="currentColor"/></svg>
+</template>
diff --git a/src/components/icons/UserIcon.vue b/src/components/icons/UserIcon.vue
new file mode 100644
index 0000000..53f8003
--- /dev/null
+++ b/src/components/icons/UserIcon.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 531"><path d="M10 150c1 99 41 281 214 363 16 8 36 8 52 0 173-82 214-264 214-363 0-26-16-48-38-57L263 13c-4-2-9-3-13-3s-8 1-12 3L48 93c-22 9-38 31-38 57zm128 212c0-44 36-80 80-80h64c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16zm168-176c0 31-25 56-56 56s-56-25-56-56 25-56 56-56 56 25 56 56z" fill="#a6acb9"/><path d="M282 282c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16 0-44 36-80 80-80h64zm-32-40c-31 0-56-25-56-56s25-56 56-56 56 25 56 56-25 56-56 56z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="518" height="532" viewBox="-3 -258 518 532"><path d="M368 120h-33l-22-64H199l-21 64h-34l32-96h160l32 96zM256-8c-35 0-64-29-64-64s29-64 64-64c36 0 64 29 64 64S292-8 256-8zm0-96c-17 0-32 14-32 32s15 32 32 32c18 0 32-14 32-32s-14-32-32-32zm0 368-12-5C92 193 7 26 17-135l1-20 238-93 239 93 1 20c9 161-76 328-227 394l-13 5zM49-133c-7 147 67 302 207 362 140-60 215-215 208-362l-208-81-207 81z" fill="currentColor"/></svg>
+</template>
diff --git a/src/components/icons/Video.vue b/src/components/icons/Video.vue
index cee8c15..ecef1a8 100644
--- a/src/components/icons/Video.vue
+++ b/src/components/icons/Video.vue
@@ -1,16 +1,16 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" width="24" viewBox="0 0 532 404">
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 532 404">
         <path d="M10 74v256c0 35 29 64 64 64h256c35 0 64-29 64-64V74c0-35-29-64-64-64H74c-35 0-64 29-64 64z"
-            fill="#a6acb9" />
+            fill="var(--fill1)" />
         <path d="M394 135v134l90 72c4 3 9 5 14 5 13 0 24-11 24-24V82c0-13-11-24-24-24-5 0-10 2-14 5l-90 72z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" v-else width="24" viewBox="22 -194 564 404">
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="22 -194 564 404">
         <path
             d="M96-136c-9 0-16 7-16 16v256c0 9 7 16 16 16h256c9 0 16-7 16-16v-256c0-9-7-16-16-16H96zm-64 16c0-35 29-64 64-64h256c35 0 64 29 64 64v256c0 35-29 64-64 64H96c-35 0-64-29-64-64v-256zm506-11c4-3 9-5 14-5 13 0 24 11 24 24v240c0 13-11 24-24 24-5 0-10-2-14-5l-74-55V32l64 48V-64l-64 48v-60l74-55z"
-            fill="#1e3050" />
+            fill="currentColor" />
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
-</script>
\ No newline at end of file
+defineProps<{  filled?: boolean }>();
+</script>
diff --git a/src/components/icons/VideoIcon.vue b/src/components/icons/VideoIcon.vue
new file mode 100644
index 0000000..8fc1485
--- /dev/null
+++ b/src/components/icons/VideoIcon.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path
+            d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polygon points="23 7 16 12 23 17 23 7"></polygon>
+        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/VideoPlayIcon.vue b/src/components/icons/VideoPlayIcon.vue
new file mode 100644
index 0000000..4156172
--- /dev/null
+++ b/src/components/icons/VideoPlayIcon.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 564 468"><path d="M10 74v256c0 35 29 64 64 64h161c-11-24-17-51-17-80 0-106 86-192 192-192 42 0 81 13 112 36V74c0-15-5-29-14-40l-46 46c-16-4-34-6-52-6h-10l64-64h-92l-1 1-95 95h-68l96-96h-92l-1 1-95 95H48l96-96H74c-35 0-64 29-64 64z" fill="var(--fill1)"/><path d="M266 314c0-80 64-144 144-144s144 64 144 144-64 144-144 144-144-64-144-144zm104-62c-5 3-8 8-8 14v96c0 6 3 11 8 14s11 3 16 0l80-48c5-3 8-8 8-14s-3-11-8-14l-80-48c-5-3-11-3-16 0z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="564" height="468" viewBox="22 -194 564 468"><path d="M480-152H367l-96 96h84c-18 8-35 19-50 32H64v160c0 18 14 32 32 32h150c3 11 7 22 11 32H96c-35 0-64-29-64-64v-256c0-35 29-64 64-64h384c35 0 64 29 64 64v84c-11-8-23-15-35-20h3v-64c0-5-1-10-3-14l-63 63c-5-1-9-1-14-1-11 0-23 1-33 3l82-83h-1zM65-56l96-96H96c-18 0-32 14-32 32v64h1zm46 0h114l96-96H207l-96 96zm321 288c62 0 112-50 112-112S494 8 432 8 320 58 320 120s50 112 112 112zm0-256c80 0 144 64 144 144s-64 144-144 144-144-64-144-144S352-24 432-24zm-40 74c5-3 11-3 16 0l94 56c4 3 7 8 7 14s-3 11-7 14l-94 56c-5 3-11 3-16 0s-8-8-8-14V64c0-6 3-11 8-14zm24 98 46-28-46-28v56z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
\ No newline at end of file
diff --git a/src/components/icons/VolumeIcon.vue b/src/components/icons/VolumeIcon.vue
new file mode 100644
index 0000000..ffc2831
--- /dev/null
+++ b/src/components/icons/VolumeIcon.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="4" x2="20" y1="21" y2="21" />
+        <polygon points="12 11 4 18 4 6 12 11" />
+        <path d="M16 8.73a2 2 0 0 1 0 3.55" />
+        <path d="M18 5.05a6 6 0 0 1 0 10.9" />
+    </svg>
+</template>
diff --git a/src/components/icons/VolumeOffIcon.vue b/src/components/icons/VolumeOffIcon.vue
new file mode 100644
index 0000000..eb2f1c1
--- /dev/null
+++ b/src/components/icons/VolumeOffIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+        <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+        <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+    </svg>
+</template>
diff --git a/src/components/icons/WifiIcon.vue b/src/components/icons/WifiIcon.vue
new file mode 100644
index 0000000..108b156
--- /dev/null
+++ b/src/components/icons/WifiIcon.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M5 12.55a11 11 0 0 1 14.08 0" />
+        <path d="M1.42 9a16 16 0 0 1 21.16 0" />
+        <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
+        <line x1="12" x2="12.01" y1="20" y2="20" />
+    </svg>
+</template>
diff --git a/src/components/icons/XCircleIcon.vue b/src/components/icons/XCircleIcon.vue
new file mode 100644
index 0000000..9f762fd
--- /dev/null
+++ b/src/components/icons/XCircleIcon.vue
@@ -0,0 +1,17 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
+        stroke="none">
+        <path
+            d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" />
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="15" y1="9" x2="9" y2="15"></line>
+        <line x1="9" y1="9" x2="15" y2="15"></line>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/XIcon.vue b/src/components/icons/XIcon.vue
new file mode 100644
index 0000000..65dfdfb
--- /dev/null
+++ b/src/components/icons/XIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean;
+}>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+    </svg>
+</template>
diff --git a/src/components/icons/hard-drive.vue b/src/components/icons/hard-drive.vue
new file mode 100644
index 0000000..d2271f4
--- /dev/null
+++ b/src/components/icons/hard-drive.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M10 74c0-35 29-64 64-64h320c35 0 64 29 64 64v256c0-35-29-64-64-64H74c-35 0-64 29-64 64V74zm288 288c0 18-14 32-32 32s-32-14-32-32 14-32 32-32 32 14 32 32z" fill="var(--fill1)"/><path d="M10 330c0-35 29-64 64-64h320c35 0 64 29 64 64v64c0 35-29 64-64 64H74c-35 0-64-29-64-64v-64zm288 32c0-18-14-32-32-32s-32 14-32 32 14 32 32 32 32-14 32-32zm64 32c18 0 32-14 32-32s-14-32-32-32-32 14-32 32 14 32 32 32z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="-10 -226 468 468"><path d="M64-184c-18 0-32 14-32 32V17c9-6 20-9 32-9h320c12 0 23 3 32 9v-169c0-18-14-32-32-32H64zM32 72v96c0 18 14 32 32 32h320c18 0 32-14 32-32V72c0-18-14-32-32-32H64c-18 0-32 14-32 32zM0 72v-224c0-35 29-64 64-64h320c35 0 64 29 64 64v320c0 35-29 64-64 64H64c-35 0-64-29-64-64V72zm256 24c13 0 24 11 24 24s-11 24-24 24-24-11-24-24 11-24 24-24zm96 0c13 0 24 11 24 24s-11 24-24 24-24-11-24-24 11-24 24-24z" fill="currentColor"/></svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
deleted file mode 100644
index fce96b8..0000000
--- a/src/components/icons/index.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createStaticVNode } from "vue";
-
-export const Home = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M4.6 22.73A107 107 0 0 0 11 23h2.22c2.43-.04 4.6-.16 6.18-.27A3.9 3.9 0 0 0 23 18.8v-8.46a4 4 0 0 0-1.34-3L14.4.93a3.63 3.63 0 0 0-4.82 0L2.34 7.36A4 4 0 0 0 1 10.35v8.46a3.9 3.9 0 0 0 3.6 3.92M13.08 2.4l7.25 6.44a2 2 0 0 1 .67 1.5v8.46a1.9 1.9 0 0 1-1.74 1.92q-1.39.11-3.26.19V16a4 4 0 0 0-8 0v4.92q-1.87-.08-3.26-.19A1.9 1.9 0 0 1 3 18.81v-8.46a2 2 0 0 1 .67-1.5l7.25-6.44a1.63 1.63 0 0 1 2.16 0M13.12 21h-2.24a1 1 0 0 1-.88-1v-4a2 2 0 1 1 4 0v4a1 1 0 0 1-.88 1">
-            </path>
-        </svg>`, 1);
-export const HomeFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M9.59.92a3.63 3.63 0 0 1 4.82 0l7.25 6.44A4 4 0 0 1 23 10.35v8.46a3.9 3.9 0 0 1-3.6 3.92 106 106 0 0 1-14.8 0A3.9 3.9 0 0 1 1 18.8v-8.46a4 4 0 0 1 1.34-3zM12 16a5 5 0 0 1-3.05-1.04l-1.23 1.58a7 7 0 0 0 8.56 0l-1.23-1.58A5 5 0 0 1 12 16">
-            </path>
-        </svg>`, 1);
-export const Dashboard = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M23 5a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4zm-10 6V3h6a2 2 0 0 1 2 2v6zm8 8a2 2 0 0 1-2 2h-6v-8h8zM5 3h6v18H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2">
-            </path>
-        </svg>`, 1);
-export const DashboardFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M11 23H5a4 4 0 0 1-4-4V5a4 4 0 0 1 4-4h6zm12-4a4 4 0 0 1-4 4h-6V13h10zM19 1a4 4 0 0 1 4 4v6H13V1z">
-            </path>
-        </svg>`, 1);
-export const Add = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M11 11H6v2h5v5h2v-5h5v-2h-5V6h-2zM5 1a4 4 0 0 0-4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4zm16 4v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2">
-            </path>
-        </svg>`, 1);
-export const AddFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M1 5a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4zm10 6H6v2h5v5h2v-5h5v-2h-5V6h-2z">
-            </path>
-        </svg>`, 1);
-export const Bell = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M16 19h8v-2h-.34a3.15 3.15 0 0 1-3.12-2.76l-.8-6.41a7.8 7.8 0 0 0-15.48 0l-.8 6.41A3.15 3.15 0 0 1 .34 17H0v2h8v1h.02a3.4 3.4 0 0 0 3.38 3h1.2a3.4 3.4 0 0 0 3.38-3H16zm1.75-10.92.8 6.4c.12.95.5 1.81 1.04 2.52H4.4c.55-.7.92-1.57 1.04-2.51l.8-6.41a5.8 5.8 0 0 1 11.5 0M13.4 19c.33 0 .6.27.6.6 0 .77-.63 1.4-1.4 1.4h-1.2a1.4 1.4 0 0 1-1.4-1.4c0-.33.27-.6.6-.6z">
-            </path>
-        </svg>`, 1);
-export const BellFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M20.54 14.24A3.15 3.15 0 0 0 23.66 17H24v2h-8v1h-.02a3.4 3.4 0 0 1-3.38 3h-1.2a3.4 3.4 0 0 1-3.38-3H8v-1H0v-2h.34a3.15 3.15 0 0 0 3.12-2.76l.8-6.41a7.8 7.8 0 0 1 15.48 0zM10 19.6c0 .77.63 1.4 1.4 1.4h1.2c.77 0 1.4-.63 1.4-1.4a.6.6 0 0 0-.6-.6h-2.8a.6.6 0 0 0-.6.6" ></path>
-        </svg>`, 1);
-export const Search = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="M17.33 18.74a10 10 0 1 1 1.41-1.41l4.47 4.47-1.41 1.41zM11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16"></path></svg>`, 1);
\ No newline at end of file
diff --git a/src/components/icons/shield-user.vue b/src/components/icons/shield-user.vue
new file mode 100644
index 0000000..89c6fdf
--- /dev/null
+++ b/src/components/icons/shield-user.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 531"><path d="M10 150c1 99 41 281 214 363 16 8 36 8 52 0 173-82 214-264 214-363 0-26-16-48-38-57L263 13c-4-2-9-3-13-3s-8 1-12 3L48 93c-22 9-38 31-38 57zm128 212c0-44 36-80 80-80h64c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16zm168-176c0 31-25 56-56 56s-56-25-56-56 25-56 56-56 56 25 56 56z" fill="var(--fill1)"/><path d="M282 282c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16 0-44 36-80 80-80h64zm-32-40c-31 0-56-25-56-56s25-56 56-56 56 25 56 56-25 56-56 56z" fill="currentColor"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="500" height="529" viewBox="6 -257 500 529"><path d="M231-240c16-7 34-7 50 0l177 75 4 2c18 9 32 28 34 50v24c-6 102-52 267-214 344l-5 2c-11 5-24 5-35 2l-6-1-6-3C68 178 22 14 17-88l-1-20c0-25 14-45 34-55l4-2 177-75zm38 29c-7-3-15-3-22-1l-3 1-177 75c-11 5-19 16-19 28l1 18c5 96 48 246 194 316l4 2c7 2 15 2 22-2l14-7c144-78 181-236 181-327v-3c-1-10-7-19-17-24l-2-1-176-75zm19 235c44 0 80 36 80 80 0 9-7 16-16 16s-16-7-16-16c0-26-21-48-48-48h-64c-26 0-48 22-48 48 0 9-7 16-16 16s-16-7-16-16c0-44 36-80 80-80h64zM256-8c-35 0-64-29-64-64s29-64 64-64 64 29 64 64-29 64-64 64zm0-96c-18 0-32 14-32 32s14 32 32 32 32-14 32-32-14-32-32-32z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{ filled?: boolean }>();
+</script>
\ No newline at end of file
diff --git a/src/components/icons/windows.vue b/src/components/icons/windows.vue
new file mode 100644
index 0000000..f5a4e38
--- /dev/null
+++ b/src/components/icons/windows.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 596 468"><path d="M170 74v64h64V74h288v192h-96v64h96c35 0 64-29 64-64V74c0-35-29-64-64-64H234c-35 0-64 29-64 64z" fill="var(--fill1)"/><path d="M74 138c-35 0-64 29-64 64v192c0 35 29 64 64 64h288c35 0 64-29 64-64V202c0-35-29-64-64-64H74zm24 80h240c13 0 24 11 24 24s-11 24-24 24H98c-13 0-24-11-24-24s11-24 24-24z" fill="var(--fill4)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="596" height="468" viewBox="-10 -226 596 468"><path d="M512-184H224c-18 0-32 14-32 32v16h-32v-16c0-35 29-64 64-64h288c35 0 64 29 64 64V40c0 35-29 64-64 64h-48V72h48c18 0 32-14 32-32v-192c0-18-14-32-32-32zM352-56H64c-18 0-32 14-32 32V8h352v-32c0-18-14-32-32-32zm32 96H32v128c0 18 14 32 32 32h288c18 0 32-14 32-32V40zM64-88h288c35 0 64 29 64 64v192c0 35-29 64-64 64H64c-35 0-64-29-64-64V-24c0-35 29-64 64-64z" fill="currentColor"/></svg>
+</template>
+<script lang="ts" setup>
+defineProps<{  filled?: boolean }>();
+</script>
diff --git a/src/components/ui/AppButton.vue b/src/components/ui/AppButton.vue
new file mode 100644
index 0000000..65eb606
--- /dev/null
+++ b/src/components/ui/AppButton.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { cva } from "class-variance-authority";
+import { ButtonHTMLAttributes, computed } from 'vue';
+type UiButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type UiButtonSize = 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+const props = withDefaults(
+  defineProps<{
+    variant?: UiButtonVariant;
+    size?: UiButtonSize;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    onClick?: ButtonHTMLAttributes['onClick'];
+  }>(),
+  {
+    variant: 'primary',
+    size: 'md',
+    block: false,
+    disabled: false,
+    loading: false,
+    type: 'button',
+  },
+);
+
+const isDisabled = computed(() => props.disabled || props.loading);
+const buttonVariants = cva(":uno: inline-flex items-center justify-center gap-2 rounded-md border font-medium whitespace-nowrap shadow-[0_1px_0_rgba(27,31,36,0.04),0_1px_3px_rgba(27,31,36,0.12)] outline-none transition-[transform,box-shadow,background-color,border-color,color,opacity] duration-150 ease-out active:translate-y-[0.5px] hover:shadow-[0_2px_0_rgba(27,31,36,0.06)] disabled:cursor-not-allowed disabled:opacity-60 focus-visible:ring-4",
+  {
+    variants: {
+      variant: {
+        primary: 'border-transparent bg-primary text-white hover:bg-primaryHover focus-visible:ring-primary/25',
+        secondary: 'border-border bg-white text-text hover:bg-header focus-visible:ring-#0969da/20',
+        ghost: 'border-transparent bg-transparent text-text hover:bg-header focus-visible:ring-#0969da/20 shadow-none',
+        danger: 'border-transparent bg-danger text-white hover:opacity-92 focus-visible:ring-danger/20',
+      },
+      size: {
+        sm: 'min-h-[28px] px-3 text-[12px] leading-[20px]',
+        md: 'min-h-[32px] px-3 text-[14px] leading-[20px]',
+        lg: 'min-h-[36px] px-4 text-[14px] leading-[20px]',
+        icon: 'min-h-0 p-2',
+        'icon-sm': 'min-h-0 p-1',
+        'icon-lg': 'min-h-0 p-3',
+      },
+      block: {
+        true: 'w-full',
+        false: '',
+      }
+    },
+    defaultVariants: {
+      variant: props.variant,
+      size: props.size,
+      block: props.block,
+    },
+  }
+);
+
+</script>
+
+<template>
+  <button :type="type" :disabled="isDisabled" :class="cn(buttonVariants({variant, size, block}))" v-on:click="onClick" :aria-busy="loading || undefined">
+    <span
+      v-if="loading"
+      class="h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent"
+      aria-hidden="true"
+    />
+    <slot v-else name="icon" />
+    <slot />
+  </button>
+</template>
diff --git a/src/components/ui/AppConfirmHost.vue b/src/components/ui/AppConfirmHost.vue
new file mode 100644
index 0000000..e0c5108
--- /dev/null
+++ b/src/components/ui/AppConfirmHost.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AlertTriangleIcon from '@/components/icons/AlertTriangleIcon.vue';
+import { useAppConfirm } from '@/composables/useAppConfirm';
+
+const confirm = useAppConfirm();
+</script>
+
+<template>
+  <AppDialog
+    :visible="confirm.visible.value"
+    @update:visible="(v) => !v && confirm.close()"
+    :title="confirm.header.value"
+    maxWidthClass="max-w-md"
+  >
+    <div class="flex items-start gap-3">
+      <div class="w-9 h-9 rounded-md bg-warning/10 flex items-center justify-center shrink-0">
+        <AlertTriangleIcon class="w-5 h-5 text-warning" />
+      </div>
+      <p class="text-sm text-foreground/80 leading-relaxed">
+        {{ confirm.message.value }}
+      </p>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton
+          variant="secondary"
+          size="sm"
+          :disabled="confirm.loading.value"
+          @click="confirm.reject"
+        >
+          {{ confirm.rejectLabel.value }}
+        </AppButton>
+        <AppButton
+          variant="danger"
+          size="sm"
+          :loading="confirm.loading.value"
+          @click="confirm.accept"
+        >
+          {{ confirm.acceptLabel.value }}
+        </AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/components/ui/AppDialog.vue b/src/components/ui/AppDialog.vue
new file mode 100644
index 0000000..f36a66b
--- /dev/null
+++ b/src/components/ui/AppDialog.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import XIcon from '@/components/icons/XIcon.vue';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'i18next-vue';
+import { onBeforeUnmount, watch } from 'vue';
+import ClientOnly from '../ClientOnly';
+
+// Ensure client-side only rendering to avoid hydration mismatch
+const props = withDefaults(defineProps<{
+  visible: boolean;
+  title?: string;
+  closable?: boolean;
+  maxWidthClass?: string;
+}>(), {
+  title: '',
+  closable: true,
+  maxWidthClass: 'max-w-lg',
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'close'): void;
+}>();
+
+const { t } = useTranslation();
+
+const close = () => {
+  emit('update:visible', false);
+  emit('close');
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!props.visible) return;
+  if (!props.closable) return;
+  if (e.key === 'Escape') close();
+};
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (typeof window === 'undefined') return;
+    if (v) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', onKeydown);
+    }
+    else {
+      document.body.style.overflow = 'unset';
+      window.removeEventListener('keydown', onKeydown);
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  if (typeof window === 'undefined') return;
+  window.removeEventListener('keydown', onKeydown);
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="visible" class="fixed inset-0 z-[9999]">
+          <!-- Backdrop -->
+          <div
+            class="absolute inset-0 bg-black/40"
+            @click="closable && close()"
+            aria-hidden="true"
+          />
+
+          <!-- Panel -->
+          <div class="absolute inset-0 flex items-center justify-center p-4">
+            <div :class="cn('w-full bg-white border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
+              <!-- Header slot -->
+              <div v-if="$slots.header" class="px-5 py-4 border-b border-border">
+                <slot name="header" :close="close" />
+              </div>
+              <!-- Default title -->
+              <div v-else-if="title" class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
+                <h3 class="font-semibold text-foreground">
+                  {{ title }}
+                </h3>
+                <button
+                  v-if="closable"
+                  type="button"
+                  class="p-1 rounded-md text-foreground/60 hover:text-foreground hover:bg-muted/50 transition-all"
+                  @click="close"
+                  :aria-label="t('common.close')"
+                >
+                  <XIcon class="w-4 h-4" />
+                </button>
+              </div>
+
+              <!-- Content -->
+              <div class="p-5 max-h-[80vh] overflow-y-auto">
+                <slot />
+              </div>
+
+              <!-- Footer slot -->
+              <div v-if="$slots.footer" class="px-5 py-4 border-t border-border bg-muted/20">
+                <slot name="footer" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </ClientOnly>
+</template>
diff --git a/src/components/ui/AppInput.vue b/src/components/ui/AppInput.vue
new file mode 100644
index 0000000..509595a
--- /dev/null
+++ b/src/components/ui/AppInput.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed, useSlots } from 'vue';
+// Vue macro is available at compile time; provide a safe fallback for typecheck.
+declare const defineModelModifiers: undefined | (<T>() => T);
+
+type Props = {
+  as?: 'input' | 'textarea' | 'select';
+  modelValue?: string | number | null;
+  type?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  disabled?: boolean;
+  id?: string;
+  name?: string;
+  autocomplete?: string;
+  inputClass?: string;
+  wrapperClass?: string;
+  min?: number | string;
+  max?: number | string;
+  step?: number | string;
+  maxlength?: number;
+  rows?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'input',
+  modelValue: '',
+  type: 'text',
+  placeholder: '',
+  readonly: false,
+  disabled: false,
+  rows: 3,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | null): void;
+  (e: 'enter'): void;
+}>();
+
+const modelModifiers = (typeof defineModelModifiers === 'function'
+  ? defineModelModifiers<{ number?: boolean }>()
+  : ({} as { number?: boolean }));
+
+const isNumberLike = computed(() => props.as === 'input' && (props.type === 'number' || !!modelModifiers.number));
+const hasLeadingSlot = computed(() => props.as === 'input' && !!useSlots().prefix);
+const isTextarea = computed(() => props.as === 'textarea');
+const isSelect = computed(() => props.as === 'select');
+
+const onInput = (e: Event) => {
+  const el = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+  const raw = el.value;
+  if (isNumberLike.value) {
+    if (raw === '') {
+      emit('update:modelValue', null);
+      return;
+    }
+    const n = Number(raw);
+    emit('update:modelValue', Number.isNaN(n) ? null : n);
+    return;
+  }
+  emit('update:modelValue', raw);
+};
+
+const onKeyup = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') emit('enter');
+};
+
+const baseInputClass = 'w-full px-3 py-2 rounded-md border border-border bg-header text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50 disabled:opacity-60 disabled:cursor-not-allowed';
+</script>
+
+<template>
+  <div :class="cn('relative', wrapperClass)">
+    <div v-if="hasLeadingSlot" class="absolute left-3 top-1/2 -translate-y-1/2 text-foreground/50">
+      <slot name="prefix" />
+    </div>
+
+    <textarea
+      v-if="isTextarea"
+      :id="id"
+      :name="name"
+      :value="modelValue ?? ''"
+      :rows="rows"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      :class="cn(baseInputClass, inputClass)"
+      @input="onInput"
+      @keyup="onKeyup"
+    />
+
+    <select
+      v-else-if="isSelect"
+      :id="id"
+      :name="name"
+      :value="modelValue ?? ''"
+      :disabled="disabled"
+      :class="cn(baseInputClass, inputClass)"
+      @change="onInput"
+      @keyup="onKeyup"
+    >
+      <slot />
+    </select>
+
+    <input
+      v-else
+      :id="id"
+      :name="name"
+      :type="type"
+      :value="modelValue ?? ''"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :disabled="disabled"
+      :autocomplete="autocomplete"
+      :min="min"
+      :max="max"
+      :step="step"
+      :maxlength="maxlength"
+      :class="cn(baseInputClass, hasLeadingSlot ? 'pl-10' : '', inputClass)"
+      @input="onInput"
+      @keyup="onKeyup"
+    />
+  </div>
+</template>
diff --git a/src/components/ui/AppProgressBar.vue b/src/components/ui/AppProgressBar.vue
new file mode 100644
index 0000000..e98df07
--- /dev/null
+++ b/src/components/ui/AppProgressBar.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  value: number;
+  class?: string;
+}>();
+
+const pct = computed(() => {
+  const v = Number(props.value);
+  if (Number.isNaN(v)) return 0;
+  return Math.min(Math.max(v, 0), 100);
+});
+</script>
+
+<template>
+  <div :class="cn('w-full bg-muted/50 rounded-full overflow-hidden', props.class)" style="height: 6px">
+    <div class="bg-primary h-full rounded-full transition-all duration-300" :style="{ width: `${pct}%` }" />
+  </div>
+</template>
diff --git a/src/components/ui/AppSwitch.vue b/src/components/ui/AppSwitch.vue
new file mode 100644
index 0000000..bf156e5
--- /dev/null
+++ b/src/components/ui/AppSwitch.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+interface SwitchProps {
+  disabled?: boolean;
+  ariaLabel?: string;
+  class?: string; // Đổi từ className sang class cho chuẩn Vue
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  disabled: false,
+});
+
+// Vue 3.4+ - Quản lý v-model cực gọn
+const modelValue = defineModel<boolean>({ default: false });
+
+const emit = defineEmits<{
+  (e: 'change', value: boolean): void;
+}>();
+
+const toggle = () => {
+  if (props.disabled) return;
+  modelValue.value = !modelValue.value;
+  emit('change', modelValue.value);
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="modelValue"
+    :aria-label="ariaLabel"
+    :disabled="disabled"
+    @click="toggle"
+    :class="cn(
+      // Layout & Size
+      'relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200',
+      // Focus states (UnoCSS style)
+      'outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+      // Status states
+      disabled ? 'op-50 cursor-not-allowed' : 'cursor-pointer',
+      modelValue ? 'bg-primary' : 'bg-gray-200 dark:bg-dark-300',
+      props.class
+    )"
+  >
+    <span
+      :class="cn(
+        // Toggle thumb
+        'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200',
+        modelValue ? 'translate-x-5' : 'translate-x-0'
+      )"
+    />
+  </button>
+</template>
\ No newline at end of file
diff --git a/src/components/ui/AppToastHost.vue b/src/components/ui/AppToastHost.vue
new file mode 100644
index 0000000..9c9a10c
--- /dev/null
+++ b/src/components/ui/AppToastHost.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import CheckCircleIcon from '@/components/icons/CheckCircleIcon.vue';
+import InfoIcon from '@/components/icons/InfoIcon.vue';
+import AlertTriangleIcon from '@/components/icons/AlertTriangleIcon.vue';
+import XCircleIcon from '@/components/icons/XCircleIcon.vue';
+import XIcon from '@/components/icons/XIcon.vue';
+import { cn } from '@/lib/utils';
+import { onBeforeUnmount, watchEffect } from 'vue';
+import { useAppToast, type AppToastSeverity } from '@/composables/useAppToast';
+
+const { toasts, remove } = useAppToast();
+
+const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+const dismiss = (id: string) => {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  remove(id);
+};
+
+const iconFor = (severity: AppToastSeverity) => {
+  switch (severity) {
+    case 'success':
+      return CheckCircleIcon;
+    case 'warn':
+      return AlertTriangleIcon;
+    case 'error':
+      return XCircleIcon;
+    case 'info':
+    default:
+      return InfoIcon;
+  }
+};
+
+const toneClass = (severity: AppToastSeverity) => {
+  switch (severity) {
+    case 'success':
+      return 'border-success/25 bg-success/5';
+    case 'warn':
+      return 'border-warning/25 bg-warning/5';
+    case 'error':
+      return 'border-danger/25 bg-danger/5';
+    case 'info':
+    default:
+      return 'border-info/25 bg-info/5';
+  }
+};
+
+watchEffect(() => {
+  if (typeof window === 'undefined') return;
+  for (const t of toasts.value) {
+    if (timers.has(t.id)) continue;
+    const life = Math.max(0, t.life ?? 3000);
+    const timer = setTimeout(() => {
+      dismiss(t.id);
+    }, life);
+    timers.set(t.id, timer);
+  }
+});
+
+onBeforeUnmount(() => {
+  for (const timer of timers.values()) clearTimeout(timer);
+  timers.clear();
+});
+</script>
+
+<template>
+  <div class="fixed top-4 right-4 z-[10000] flex flex-col gap-2 w-[360px] max-w-[calc(100vw-2rem)]">
+    <TransitionGroup
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-for="t in toasts"
+        :key="t.id"
+        :class="cn('flex items-start gap-3 p-3 rounded-lg border shadow-sm', toneClass(t.severity))"
+      >
+        <component :is="iconFor(t.severity)" class="w-5 h-5 mt-0.5" :class="t.severity === 'success' ? 'text-success' : t.severity === 'warn' ? 'text-warning' : t.severity === 'error' ? 'text-danger' : 'text-info'" />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-semibold text-foreground truncate">{{ t.summary }}</p>
+          <p v-if="t.detail" class="text-xs text-foreground/70 mt-0.5 break-words">{{ t.detail }}</p>
+        </div>
+        <button
+          type="button"
+          class="p-1 rounded-md text-foreground/50 hover:text-foreground hover:bg-muted/50 transition-all"
+          @click="dismiss(t.id)"
+          :aria-label="$t('toast.dismissAria')"
+        >
+          <XIcon class="w-4 h-4" />
+        </button>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
diff --git a/src/components/ui/AsyncSelect.vue b/src/components/ui/AsyncSelect.vue
new file mode 100644
index 0000000..588a5f9
--- /dev/null
+++ b/src/components/ui/AsyncSelect.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+interface SelectOption {
+  label: string;
+  value: string | number;
+}
+
+interface Props {
+  loadOptions: () => Promise<SelectOption[]>;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Please select...',
+  disabled: false,
+});
+
+const modelValue = defineModel<string | number>();
+
+const options = ref<SelectOption[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const fetchData = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    options.value = await props.loadOptions();
+  } catch {
+    error.value = 'Failed to load options';
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(fetchData);
+watch(() => props.loadOptions, fetchData);
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="relative w-full">
+      <select
+        v-model="modelValue"
+        :disabled="loading || disabled"
+        class="w-full appearance-none rounded-md border border-border bg-header px-3 py-2 pr-10 text-sm text-foreground outline-none transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        <option value="" disabled>{{ placeholder }}</option>
+        <option
+          v-for="opt in options"
+          :key="opt.value"
+          :value="opt.value"
+        >
+          {{ opt.label }}
+        </option>
+      </select>
+
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-foreground/40">
+        <div v-if="loading" class="h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent" />
+        <div v-else class="i-carbon-chevron-down text-lg" />
+      </div>
+    </div>
+
+    <button
+      v-if="error"
+      type="button"
+      @click="fetchData"
+      class="text-xs font-medium text-danger transition hover:opacity-80"
+    >
+      {{ error }} · Retry
+    </button>
+  </div>
+</template>
diff --git a/src/components/ui/BaseTable.vue b/src/components/ui/BaseTable.vue
new file mode 100644
index 0000000..ed06766
--- /dev/null
+++ b/src/components/ui/BaseTable.vue
@@ -0,0 +1,254 @@
+<script setup lang="ts" generic="TData extends Record<string, any>">
+import AppButton from '@/components/ui/AppButton.vue';
+import { cn } from '@/lib/utils';
+import {
+  FlexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useVueTable,
+  type ColumnDef,
+  type ColumnMeta,
+  type Row,
+  type SortingState,
+  type Updater,
+} from '@tanstack/vue-table';
+import { useTranslation } from 'i18next-vue';
+import { computed, ref } from 'vue';
+
+type TableColumnMeta = ColumnMeta<TData, any> & {
+  headerClass?: string;
+  cellClass?: string;
+};
+
+const props = withDefaults(defineProps<{
+  data: TData[];
+  columns: ColumnDef<TData, any>[];
+  loading?: boolean;
+  emptyText?: string;
+  tableClass?: string;
+  wrapperClass?: string;
+  headerRowClass?: string;
+  bodyRowClass?: string | ((row: Row<TData>) => string | undefined);
+  getRowId?: (originalRow: TData, index: number) => string;
+  pagination?: boolean;
+  currentPage?: number;
+  totalPages?: number;
+  totalRecords?: number;
+  rowsPerPage?: number;
+  pageSizeOptions?: number[];
+  canPreviousPage?: boolean;
+  canNextPage?: boolean;
+  skeletonRows?: number;
+}>(), {
+  loading: false,
+  emptyText: 'No data available.',
+  pagination: false,
+  currentPage: 1,
+  totalPages: 1,
+  totalRecords: 0,
+  rowsPerPage: 10,
+  pageSizeOptions: () => [],
+  canPreviousPage: false,
+  canNextPage: false,
+  skeletonRows: 10,
+});
+
+const emit = defineEmits<{
+  (e: 'previous-page'): void;
+  (e: 'next-page'): void;
+  (e: 'page-size-change', value: number): void;
+}>();
+
+const { t } = useTranslation();
+const sorting = ref<SortingState>([]);
+
+function updateSorting(updaterOrValue: Updater<SortingState>) {
+  sorting.value = typeof updaterOrValue === 'function'
+    ? updaterOrValue(sorting.value)
+    : updaterOrValue;
+}
+
+const table = useVueTable<TData>({
+  get data() {
+    return props.data;
+  },
+  get columns() {
+    return props.columns;
+  },
+  getRowId: props.getRowId,
+  state: {
+    get sorting() {
+      return sorting.value;
+    },
+  },
+  onSortingChange: updateSorting,
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+});
+
+function resolveBodyRowClass(row: Row<TData>) {
+  return typeof props.bodyRowClass === 'function'
+    ? props.bodyRowClass(row)
+    : props.bodyRowClass;
+}
+
+const shouldRenderPagination = computed(() => (
+  props.pagination
+  && !props.loading
+  && table.getRowModel().rows.length > 0
+));
+
+const skeletonRowIndexes = computed(() =>
+  Array.from({ length: Math.max(1, props.skeletonRows) }, (_, index) => index)
+);
+
+const skeletonColumnIndexes = computed(() =>
+  Array.from({ length: Math.max(1, props.columns.length) }, (_, index) => index)
+);
+
+function previousPage() {
+  if (!props.canPreviousPage) return;
+  emit('previous-page');
+}
+
+function nextPage() {
+  if (!props.canNextPage) return;
+  emit('next-page');
+}
+
+function changePageSize(event: Event) {
+  const nextValue = Number((event.target as HTMLSelectElement).value) || props.rowsPerPage;
+  emit('page-size-change', nextValue);
+}
+</script>
+
+<template>
+  <div :class="cn('overflow-x-auto rounded-xl border border-gray-200 bg-white', wrapperClass)">
+    <table :class="cn('w-full min-w-[48rem] border-collapse', tableClass)">
+      <thead class="bg-header">
+        <tr
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+          :class="cn('border-b border-gray-200', headerRowClass)"
+        >
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :class="cn(
+              'px-4 py-3 text-left text-sm font-medium text-gray-600',
+              header.column.getCanSort() && !header.isPlaceholder && 'cursor-pointer select-none',
+              (header.column.columnDef.meta as TableColumnMeta | undefined)?.headerClass
+            )"
+            @click="header.column.getToggleSortingHandler()?.($event)"
+          >
+            <div class="flex items-center gap-2">
+              <FlexRender
+                v-if="!header.isPlaceholder"
+                :render="header.column.columnDef.header"
+                :props="header.getContext()"
+              />
+              <span
+                v-if="header.column.getCanSort()"
+                class="text-[10px] uppercase tracking-wide text-gray-400"
+              >
+                {{ header.column.getIsSorted() === 'asc' ? 'asc' : header.column.getIsSorted() === 'desc' ? 'desc' : '' }}
+              </span>
+            </div>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <template v-if="loading">
+          <tr v-if="$slots.loading">
+            <td
+              :colspan="columns.length || 1"
+              class="px-4 py-10 text-center text-sm text-gray-500"
+            >
+              <slot name="loading" />
+            </td>
+          </tr>
+
+          <tr
+            v-for="rowIndex in skeletonRowIndexes"
+            v-else
+            :key="`skeleton-row-${rowIndex}`"
+            class="border-b border-gray-200 last:border-b-0"
+          >
+            <td
+              v-for="columnIndex in skeletonColumnIndexes"
+              :key="`skeleton-cell-${rowIndex}-${columnIndex}`"
+              class="px-4 py-3 align-middle"
+            >
+              <div class="animate-pulse space-y-2">
+                <div
+                  :class="cn(
+                    'h-4 rounded bg-muted/50',
+                    columnIndex === skeletonColumnIndexes.length - 1
+                      ? 'ml-auto w-16'
+                      : 'w-full max-w-[12rem]'
+                  )"
+                />
+                <div
+                  v-if="columnIndex === 0"
+                  class="h-3 w-24 rounded bg-muted/40"
+                />
+              </div>
+            </td>
+          </tr>
+        </template>
+
+        <tr v-else-if="!table.getRowModel().rows.length">
+          <td
+            :colspan="columns.length || 1"
+            class="px-4 py-10 text-center text-sm text-gray-500"
+          >
+            <slot name="empty">
+              {{ emptyText }}
+            </slot>
+          </td>
+        </tr>
+
+        <tr
+          v-for="row in table.getRowModel().rows"
+          v-else
+          :key="row.id"
+          :class="cn(
+            'border-b border-gray-200 transition-colors last:border-b-0 hover:bg-gray-50',
+            resolveBodyRowClass(row)
+          )"
+        >
+          <td
+            v-for="cell in row.getVisibleCells()"
+            :key="cell.id"
+            :class="cn(
+              'px-4 py-3 align-middle',
+              (cell.column.columnDef.meta as TableColumnMeta | undefined)?.cellClass
+            )"
+          >
+            <FlexRender
+              :render="cell.column.columnDef.cell"
+              :props="cell.getContext()"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div v-if="shouldRenderPagination" class="flex flex-col gap-3 border-t border-gray-200 bg-muted/20 px-6 py-4 text-xs text-foreground/55 sm:flex-row sm:items-center sm:justify-between">
+      <div>{{ t('common.page', { current: currentPage, total: totalPages }) }} · {{ totalRecords }} {{ t('common.records') }}</div>
+      <div class="flex flex-wrap items-center gap-2">
+        <label v-if="pageSizeOptions.length" class="flex items-center gap-2">
+          <span>{{ t('common.rowsPerPage') }}</span>
+          <select class="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground" :value="String(rowsPerPage)" @change="changePageSize">
+            <option v-for="option in pageSizeOptions" :key="option" :value="String(option)">{{ option }}</option>
+          </select>
+        </label>
+        <div class="flex items-center gap-2 xl:justify-end">
+          <AppButton size="sm" variant="secondary" :disabled="!canPreviousPage" @click="previousPage">{{ t('common.previous') }}</AppButton>
+          <AppButton size="sm" variant="secondary" :disabled="!canNextPage" @click="nextPage">{{ t('common.next') }}</AppButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/composables/useAdminRuntimeMqtt.ts b/src/composables/useAdminRuntimeMqtt.ts
new file mode 100644
index 0000000..e8e0979
--- /dev/null
+++ b/src/composables/useAdminRuntimeMqtt.ts
@@ -0,0 +1,58 @@
+import { TinyMqttClient } from "@/lib/liteMqtt";
+import { useAuthStore } from "@/stores/auth";
+import { computed, onBeforeUnmount, watch } from "vue";
+
+type RuntimeMessage = {
+  topic: string;
+  payload: any;
+};
+
+const mqttBrokerUrl = "wss://mqtt-dashboard.com:8884/mqtt";
+
+export function useAdminRuntimeMqtt(onMessage: (message: RuntimeMessage) => void) {
+  const auth = useAuthStore();
+  let client: TinyMqttClient | undefined;
+
+  const isAdmin = computed(() => auth.user?.role?.toUpperCase?.() === "ADMIN");
+
+  const connect = () => {
+    if (import.meta.env.SSR || !isAdmin.value) return;
+    disconnect();
+    client = new TinyMqttClient(
+      mqttBrokerUrl,
+      ["picpic/events", "picpic/logs/#", "picpic/job/+"],
+      (topic, raw) => {
+        try {
+          onMessage({ topic, payload: JSON.parse(raw) });
+        } catch {
+          onMessage({ topic, payload: raw });
+        }
+      },
+    );
+    client.connect();
+  };
+
+  const disconnect = () => {
+    client?.disconnect();
+    client = undefined;
+  };
+
+  const stopWatch = watch(
+    () => [auth.user?.id, auth.user?.role],
+    () => {
+      if (isAdmin.value) {
+        connect();
+      } else {
+        disconnect();
+      }
+    },
+    { immediate: true },
+  );
+
+  onBeforeUnmount(() => {
+    stopWatch();
+    disconnect();
+  });
+
+  return { disconnect };
+}
diff --git a/src/composables/useAppConfirm.ts b/src/composables/useAppConfirm.ts
new file mode 100644
index 0000000..789b4a5
--- /dev/null
+++ b/src/composables/useAppConfirm.ts
@@ -0,0 +1,90 @@
+import { computed, reactive, readonly } from 'vue';
+
+export type AppConfirmOptions = {
+  message: string;
+  header?: string;
+  acceptLabel?: string;
+  rejectLabel?: string;
+  accept?: () => void | Promise<void>;
+  reject?: () => void;
+};
+
+type AppConfirmState = {
+  visible: boolean;
+  loading: boolean;
+  message: string;
+  header: string;
+  acceptLabel: string;
+  rejectLabel: string;
+  accept?: () => void | Promise<void>;
+  reject?: () => void;
+};
+
+const state = reactive<AppConfirmState>({
+  visible: false,
+  loading: false,
+  message: '',
+  header: 'Confirm',
+  acceptLabel: 'OK',
+  rejectLabel: 'Cancel',
+});
+
+const requireConfirm = (options: AppConfirmOptions) => {
+  const defaultHeader = 'Confirm';
+  const defaultAccept = 'OK';
+  const defaultReject = 'Cancel';
+
+  state.visible = true;
+  state.loading = false;
+  state.message = options.message;
+  state.header = options.header ?? defaultHeader;
+  state.acceptLabel = options.acceptLabel ?? defaultAccept;
+  state.rejectLabel = options.rejectLabel ?? defaultReject;
+  state.accept = options.accept;
+  state.reject = options.reject;
+};
+
+const close = () => {
+  state.visible = false;
+  state.loading = false;
+  state.message = '';
+  state.accept = undefined;
+  state.reject = undefined;
+};
+
+const onReject = () => {
+  try {
+    state.reject?.();
+  } finally {
+    close();
+  }
+};
+
+const onAccept = async () => {
+  state.loading = true;
+  try {
+    await state.accept?.();
+    close();
+  } catch (e) {
+    // Keep dialog open on error; caller can show a toast.
+    throw e;
+  } finally {
+    state.loading = false;
+  }
+};
+
+export const useAppConfirm = () => {
+  return {
+    require: requireConfirm,
+    close,
+    accept: onAccept,
+    reject: onReject,
+    visible: computed(() => state.visible),
+    loading: computed(() => state.loading),
+    message: computed(() => state.message),
+    header: computed(() => state.header),
+    acceptLabel: computed(() => state.acceptLabel),
+    rejectLabel: computed(() => state.rejectLabel),
+    _state: readonly(state),
+  };
+};
diff --git a/src/composables/useAppToast.ts b/src/composables/useAppToast.ts
new file mode 100644
index 0000000..fa6865f
--- /dev/null
+++ b/src/composables/useAppToast.ts
@@ -0,0 +1,64 @@
+import { computed, reactive, readonly } from 'vue';
+
+export type AppToastSeverity = 'success' | 'info' | 'warn' | 'warning' | 'error' | 'danger';
+
+export type AppToastInput = {
+  severity?: AppToastSeverity;
+  summary?: string;
+  detail?: string;
+  life?: number; // ms
+};
+
+export type AppToast = {
+  id: string;
+  severity: AppToastSeverity;
+  summary: string;
+  detail?: string;
+  createdAt: number;
+  life: number;
+};
+
+const state = reactive<{ toasts: AppToast[] }>({
+  toasts: [],
+});
+
+const normalizeSeverity = (severity?: AppToastSeverity): AppToastSeverity => {
+  if (!severity) return 'info';
+  if (severity === 'warning') return 'warn';
+  if (severity === 'danger') return 'error';
+  return severity;
+};
+
+const genId = () => `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+const add = (input: AppToastInput) => {
+  const toast: AppToast = {
+    id: genId(),
+    severity: normalizeSeverity(input.severity),
+    summary: input.summary ?? '',
+    detail: input.detail,
+    createdAt: Date.now(),
+    life: typeof input.life === 'number' ? input.life : 3000,
+  };
+  state.toasts.push(toast);
+  return toast.id;
+};
+
+const remove = (id: string) => {
+  const idx = state.toasts.findIndex(t => t.id === id);
+  if (idx !== -1) state.toasts.splice(idx, 1);
+};
+
+const clear = () => {
+  state.toasts.splice(0, state.toasts.length);
+};
+
+export const useAppToast = () => {
+  return {
+    add,
+    remove,
+    clear,
+    toasts: computed(() => state.toasts),
+    _state: readonly(state),
+  };
+};
diff --git a/src/composables/useNetworkStatus.ts b/src/composables/useNetworkStatus.ts
new file mode 100644
index 0000000..f9bd1a2
--- /dev/null
+++ b/src/composables/useNetworkStatus.ts
@@ -0,0 +1,47 @@
+import { ref } from 'vue'
+
+const isOffline = ref(false)
+
+let listenersCount = 0
+
+function syncNetworkStatus() {
+  if (typeof navigator === 'undefined') return
+
+  isOffline.value = !navigator.onLine
+}
+
+function handleNetworkStatusChange() {
+  syncNetworkStatus()
+}
+
+function startListening() {
+  if (typeof window === 'undefined') return
+
+  if (listenersCount === 0) {
+    syncNetworkStatus()
+    window.addEventListener('online', handleNetworkStatusChange)
+    window.addEventListener('offline', handleNetworkStatusChange)
+  }
+
+  listenersCount += 1
+}
+
+function stopListening() {
+  if (typeof window === 'undefined' || listenersCount === 0) return
+
+  listenersCount -= 1
+
+  if (listenersCount === 0) {
+    window.removeEventListener('online', handleNetworkStatusChange)
+    window.removeEventListener('offline', handleNetworkStatusChange)
+  }
+}
+
+export function useNetworkStatus() {
+  return {
+    isOffline,
+    syncNetworkStatus,
+    startListening,
+    stopListening,
+  }
+}
diff --git a/src/composables/useNotifications.ts b/src/composables/useNotifications.ts
new file mode 100644
index 0000000..8da3fd6
--- /dev/null
+++ b/src/composables/useNotifications.ts
@@ -0,0 +1,166 @@
+import { client as rpcClient } from '@/api/rpcclient';
+import { computed, ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'video' | 'payment' | 'system';
+
+export type AppNotification = {
+    id: string;
+    type: NotificationType;
+    title: string;
+    message: string;
+    time: string;
+    read: boolean;
+    actionUrl?: string;
+    actionLabel?: string;
+    createdAt?: string;
+};
+
+type NotificationApiItem = {
+    id?: string;
+    type?: string;
+    title?: string;
+    message?: string;
+    read?: boolean;
+    actionUrl?: string;
+    actionLabel?: string;
+    createdAt?: string;
+};
+
+type IncomingNotificationEnvelope = {
+    type?: string;
+    payload?: NotificationApiItem;
+};
+
+const notifications = ref<AppNotification[]>([]);
+const loading = ref(false);
+const loaded = ref(false);
+
+const normalizeType = (value?: string): NotificationType => {
+    switch ((value || '').toLowerCase()) {
+        case 'video':
+        case 'payment':
+        case 'warning':
+        case 'error':
+        case 'success':
+        case 'system':
+            return value as NotificationType;
+        default:
+            return 'info';
+    }
+};
+
+const mapNotification = (item: NotificationApiItem): AppNotification => ({
+    id: item.id || '',
+    type: normalizeType(item.type),
+    title: item.title || '',
+    message: item.message || '',
+    time: '',
+    read: Boolean(item.read),
+    actionUrl: item.actionUrl || undefined,
+    actionLabel: item.actionLabel || undefined,
+    createdAt: item.createdAt,
+});
+
+const upsertNotification = (item: NotificationApiItem) => {
+    const mapped = mapNotification({ ...item, read: item.read ?? false });
+    if (!mapped.id) return;
+
+    const index = notifications.value.findIndex(notification => notification.id === mapped.id);
+    if (index >= 0) {
+        notifications.value[index] = { ...notifications.value[index], ...mapped };
+        return;
+    }
+
+    notifications.value = [mapped, ...notifications.value];
+};
+
+export function useNotifications() {
+    const { t, i18next } = useTranslation();
+
+    const formatRelativeTime = (value?: string) => {
+        if (!value) return '';
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) return '';
+
+        const diffMs = Date.now() - date.getTime();
+        const minutes = Math.max(1, Math.floor(diffMs / 60000));
+        if (minutes < 60) return t('notification.time.minutesAgo', { count: minutes });
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24) return t('notification.time.hoursAgo', { count: hours });
+        const days = Math.floor(hours / 24);
+        return t('notification.time.daysAgo', { count: Math.max(1, days) });
+    };
+
+    const hydrateNotification = (item: NotificationApiItem): AppNotification => ({
+        ...mapNotification(item),
+        time: formatRelativeTime(item.createdAt),
+    });
+
+    const fetchNotifications = async () => {
+        loading.value = true;
+        try {
+            const response = await rpcClient.listNotifications();
+            notifications.value = (response.notifications || []).map(hydrateNotification);
+            loaded.value = true;
+            return notifications.value;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const ingestRealtimeNotification = (raw: string | IncomingNotificationEnvelope) => {
+        try {
+            
+            const envelope = typeof raw === 'string' ? JSON.parse(raw) as IncomingNotificationEnvelope : raw;
+            if (envelope?.type !== 'notification.created' || !envelope.payload) return false;
+            upsertNotification(envelope.payload);
+            notifications.value = notifications.value.map(item => ({
+                ...item,
+                time: formatRelativeTime(item.createdAt),
+            }));
+            return true;
+        } catch {
+            return false;
+        }
+    };
+
+    const markRead = async (id: string) => {
+        if (!id) return;
+        await rpcClient.markNotificationRead({ id });
+        const item = notifications.value.find(notification => notification.id === id);
+        if (item) item.read = true;
+    };
+
+    const deleteNotification = async (id: string) => {
+        if (!id) return;
+        await rpcClient.deleteNotification({ id });
+        notifications.value = notifications.value.filter(notification => notification.id !== id);
+    };
+
+    const markAllRead = async () => {
+        await rpcClient.markAllNotificationsRead();
+        notifications.value = notifications.value.map(item => ({ ...item, read: true }));
+    };
+
+    const clearAll = async () => {
+        await rpcClient.clearNotifications();
+        notifications.value = [];
+    };
+
+    const unreadCount = computed(() => notifications.value.filter(item => !item.read).length);
+
+    return {
+        notifications,
+        loading,
+        loaded,
+        unreadCount,
+        locale: computed(() => i18next.resolvedLanguage),
+        fetchNotifications,
+        ingestRealtimeNotification,
+        markRead,
+        deleteNotification,
+        markAllRead,
+        clearAll,
+    };
+}
diff --git a/src/composables/useRouteLoading.ts b/src/composables/useRouteLoading.ts
new file mode 100644
index 0000000..e6ab926
--- /dev/null
+++ b/src/composables/useRouteLoading.ts
@@ -0,0 +1,59 @@
+import { ref } from 'vue'
+
+const visible = ref(false)
+const progress = ref(0)
+
+let timer: ReturnType<typeof setInterval> | null = null
+
+function start() {
+  if (timer) clearInterval(timer)
+
+  visible.value = true
+  progress.value = 8
+
+  timer = setInterval(() => {
+    if (progress.value < 80) {
+      progress.value += Math.random() * 12
+    } else if (progress.value < 95) {
+      progress.value += Math.random() * 3
+    }
+  }, 200)
+}
+
+function finish() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+
+  progress.value = 100
+
+  setTimeout(() => {
+    visible.value = false
+    progress.value = 0
+  }, 250)
+}
+
+function fail() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+
+  progress.value = 100
+
+  setTimeout(() => {
+    visible.value = false
+    progress.value = 0
+  }, 250)
+}
+
+export function useRouteLoading() {
+  return {
+    visible,
+    progress,
+    start,
+    finish,
+    fail,
+  }
+}
diff --git a/src/composables/useSettingsPreferencesQuery.ts b/src/composables/useSettingsPreferencesQuery.ts
new file mode 100644
index 0000000..f864277
--- /dev/null
+++ b/src/composables/useSettingsPreferencesQuery.ts
@@ -0,0 +1,76 @@
+import { client as rpcClient } from '@/api/rpcclient';
+import type { Preferences } from '@/server/api/proto/app/v1/common';
+import type { UpdatePreferencesRequest } from '@/server/api/proto/app/v1/account';
+import { useQuery } from '@pinia/colada';
+
+export const SETTINGS_PREFERENCES_QUERY_KEY = ['settings', 'preferences'] as const;
+
+export type SettingsPreferencesSnapshot = {
+  emailNotifications: boolean;
+  pushNotifications: boolean;
+  marketingNotifications: boolean;
+  telegramNotifications: boolean;
+  language: string;
+  locale: string;
+};
+
+export type NotificationSettingsDraft = {
+  email: boolean;
+  push: boolean;
+  marketing: boolean;
+  telegram: boolean;
+};
+
+type PreferencesResponse = {
+  preferences?: Preferences;
+};
+
+const DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT: SettingsPreferencesSnapshot = {
+  emailNotifications: true,
+  pushNotifications: true,
+  marketingNotifications: false,
+  telegramNotifications: false,
+  language: 'en',
+  locale: 'en',
+};
+
+const normalizePreferencesSnapshot = (responseData: unknown): SettingsPreferencesSnapshot => {
+  const preferences = (responseData as PreferencesResponse | undefined)?.preferences;
+
+  return {
+    emailNotifications: preferences?.emailNotifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.emailNotifications,
+    pushNotifications: preferences?.pushNotifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.pushNotifications,
+    marketingNotifications: preferences?.marketingNotifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.marketingNotifications,
+    telegramNotifications: preferences?.telegramNotifications ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.telegramNotifications,
+    language: preferences?.language ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.language,
+    locale: preferences?.locale ?? DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT.locale,
+  };
+};
+
+export const createNotificationSettingsDraft = (
+  snapshot: SettingsPreferencesSnapshot = DEFAULT_SETTINGS_PREFERENCES_SNAPSHOT,
+): NotificationSettingsDraft => ({
+  email: snapshot.emailNotifications,
+  push: snapshot.pushNotifications,
+  marketing: snapshot.marketingNotifications,
+  telegram: snapshot.telegramNotifications,
+});
+
+export const toNotificationPreferencesPayload = (
+  draft: NotificationSettingsDraft,
+): UpdatePreferencesRequest => ({
+  emailNotifications: draft.email,
+  pushNotifications: draft.push,
+  marketingNotifications: draft.marketing,
+  telegramNotifications: draft.telegram,
+});
+
+export function useSettingsPreferencesQuery() {
+  return useQuery({
+    key: () => SETTINGS_PREFERENCES_QUERY_KEY,
+    query: async () => {
+      const response = await rpcClient.getPreferences();
+      return normalizePreferencesSnapshot(response);
+    },
+  });
+}
diff --git a/src/composables/useUploadQueue.ts b/src/composables/useUploadQueue.ts
new file mode 100644
index 0000000..996f7b9
--- /dev/null
+++ b/src/composables/useUploadQueue.ts
@@ -0,0 +1,371 @@
+import { client } from '@/api/rpcclient';
+import { computed, ref } from 'vue';
+
+export interface QueueItem {
+    id: string;
+    name: string;
+    type: 'local' | 'remote';
+    status: 'uploading' | 'processing' | 'fetching' | 'complete' | 'error' | 'pending';
+    progress?: number;
+    uploaded?: string;
+    total?: string;
+    speed?: string;
+    thumbnail?: string;
+    file?: File; // Keep reference to file for local uploads
+    url?: string; // Keep reference to url for remote uploads
+    // Upload chunk tracking
+    activeChunks?: number;
+    uploadedUrls?: string[];
+    cancelled?: boolean;
+}
+
+const items = ref<QueueItem[]>([]);
+
+// Upload limits
+const MAX_ITEMS = 5;
+
+// Chunk upload configuration
+const CHUNK_SIZE = 90 * 1024 * 1024; // 90MB per chunk
+const MAX_PARALLEL = 3;
+const MAX_RETRY = 3;
+
+// Track active XHRs per item id so we can abort them on cancel
+const activeXhrs = new Map<string, Set<XMLHttpRequest>>();
+
+const abortItem = (id: string) => {
+    const xhrs = activeXhrs.get(id);
+    if (xhrs) {
+        xhrs.forEach(xhr => xhr.abort());
+        activeXhrs.delete(id);
+    }
+};
+
+export function useUploadQueue() {
+
+    const remainingSlots = computed(() => Math.max(0, MAX_ITEMS - items.value.length));
+
+    const addFiles = (files: FileList) => {
+        const allowed = Array.from(files).slice(0, remainingSlots.value);
+        const duplicates: File[] = [];
+        const fresh: File[] = [];
+
+        for (const file of allowed) {
+            const isDupe = items.value.some(
+                item => item.type === 'local' && item.name === file.name && item.file?.size === file.size
+            );
+            if (isDupe) duplicates.push(file);
+            else fresh.push(file);
+        }
+
+        const newItems: QueueItem[] = fresh.map((file) => ({
+            id: Math.random().toString(36).substring(2, 9),
+            name: file.name,
+            type: 'local',
+            status: 'pending',
+            progress: 0,
+            uploaded: '0 MB',
+            total: formatSize(file.size),
+            speed: '0 MB/s',
+            file: file,
+            thumbnail: undefined,
+            activeChunks: 0,
+            uploadedUrls: [],
+            cancelled: false
+        }));
+
+        items.value.push(...newItems);
+        return { added: newItems.length, skipped: files.length - allowed.length, duplicates: duplicates.length };
+    };
+
+    const addRemoteUrls = (urls: string[]) => {
+        const allowed = urls.slice(0, remainingSlots.value);
+        const fresh = allowed.filter(url => !items.value.some(item => item.type === 'remote' && item.url === url));
+        const duplicateCount = allowed.length - fresh.length;
+        const newItems: QueueItem[] = fresh.map((url) => ({
+            id: Math.random().toString(36).substring(2, 9),
+            name: url.split('/').pop() || 'Remote File',
+            type: 'remote',
+            status: 'pending',
+            progress: 0,
+            uploaded: '0 MB',
+            total: 'Unknown',
+            speed: '0 MB/s',
+            url: url,
+            activeChunks: 0,
+            uploadedUrls: [],
+            cancelled: false
+        }));
+
+        items.value.push(...newItems);
+        return { added: newItems.length, skipped: urls.length - allowed.length, duplicates: duplicateCount };
+    };
+
+    const removeItem = (id: string) => {
+        abortItem(id);
+        const item = items.value.find(i => i.id === id);
+        if (item) item.cancelled = true;
+        const index = items.value.findIndex(item => item.id === id);
+        if (index !== -1) items.value.splice(index, 1);
+    };
+
+    const cancelItem = (id: string) => {
+        abortItem(id);
+        const item = items.value.find(i => i.id === id);
+        if (item) {
+            item.cancelled = true;
+            item.status = 'error';
+            item.activeChunks = 0;
+            item.speed = '0 MB/s';
+        }
+    };
+
+    const startQueue = () => {
+        items.value.forEach(item => {
+            if (item.status === 'pending') {
+                if (item.type === 'local') {
+                    startChunkUpload(item.id);
+                } else {
+                    startMockRemoteFetch(item.id);
+                }
+            }
+        });
+    };
+
+    // Real Chunk Upload Logic
+    const startChunkUpload = async (id: string) => {
+        const item = items.value.find(i => i.id === id);
+        if (!item || !item.file) return;
+
+        item.status = 'uploading';
+        item.activeChunks = 0;
+        item.uploadedUrls = [];
+
+        const file = item.file;
+        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+        const progressMap = new Map<number, number>(); // chunk index -> uploaded bytes
+        const queue: number[] = Array.from({ length: totalChunks }, (_, i) => i);
+
+        const updateProgress = () => {
+            let totalUploaded = 0;
+            progressMap.forEach(value => {
+                totalUploaded += value;
+            });
+            const percent = Math.min((totalUploaded / file.size) * 100, 100);
+            item.progress = parseFloat(percent.toFixed(1));
+            item.uploaded = formatSize(totalUploaded);
+
+            // Calculate speed (simplified)
+            const currentSpeed = item.activeChunks ? item.activeChunks * 2 * 1024 * 1024 : 0;
+            item.speed = formatSize(currentSpeed) + '/s';
+        };
+
+        const processQueue = async () => {
+            if (item.cancelled) return;
+
+            const activePromises: Promise<void>[] = [];
+
+            while ((item.activeChunks || 0) < MAX_PARALLEL && queue.length > 0) {
+                const index = queue.shift()!;
+                item.activeChunks = (item.activeChunks || 0) + 1;
+
+                const promise = uploadChunk(index, file, progressMap, updateProgress, item)
+                    .then(() => {
+                        item.activeChunks = (item.activeChunks || 0) - 1;
+                    });
+                activePromises.push(promise);
+            }
+
+            if (activePromises.length > 0) {
+                await Promise.all(activePromises);
+                await processQueue();
+            }
+        };
+
+        try {
+            await processQueue();
+
+            if (!item.cancelled) {
+                item.status = 'processing';
+                await completeUpload(item);
+            }
+        } catch (error) {
+            item.status = 'error';
+            console.error('Upload failed:', error);
+        }
+    };
+
+    const uploadChunk = (
+        index: number,
+        file: File,
+        progressMap: Map<number, number>,
+        updateProgress: () => void,
+        item: QueueItem
+    ): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            let retry = 0;
+
+            const attempt = () => {
+                if (item.cancelled) return resolve();
+
+                const start = index * CHUNK_SIZE;
+                const end = Math.min(start + CHUNK_SIZE, file.size);
+                const chunk = file.slice(start, end);
+
+                const formData = new FormData();
+                formData.append('file', chunk, file.name);
+
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', 'https://tmpfiles.org/api/v1/upload');
+
+                // Register this XHR so it can be aborted on cancel
+                if (!activeXhrs.has(item.id)) activeXhrs.set(item.id, new Set());
+                activeXhrs.get(item.id)!.add(xhr);
+
+                const unregister = () => activeXhrs.get(item.id)?.delete(xhr);
+
+                xhr.upload.onprogress = (e) => {
+                    if (e.lengthComputable) {
+                        progressMap.set(index, e.loaded);
+                        updateProgress();
+                    }
+                };
+
+                xhr.onload = function () {
+                    unregister();
+                    if (item.cancelled) return resolve();
+                    if (xhr.status === 200) {
+                        try {
+                            const res = JSON.parse(xhr.responseText);
+                            if (res.status === 'success') {
+                                progressMap.set(index, chunk.size);
+                                if (item.uploadedUrls) {
+                                    item.uploadedUrls[index] = res.data.url;
+                                }
+                                updateProgress();
+                                resolve();
+                                return;
+                            }
+                        } catch {
+                            handleError();
+                        }
+                    }
+                    handleError();
+                };
+
+                xhr.onabort = () => {
+                    unregister();
+                    resolve(); // treat abort as graceful completion — processQueue will short-circuit via item.cancelled
+                };
+
+                xhr.onerror = () => {
+                    unregister();
+                    handleError();
+                };
+
+                function handleError() {
+                    retry++;
+                    if (retry <= MAX_RETRY) {
+                        setTimeout(attempt, 2000);
+                    } else {
+                        item.status = 'error';
+                        reject(new Error(`Failed to upload chunk ${index + 1}`));
+                    }
+                }
+
+                xhr.send(formData);
+            };
+
+            attempt();
+        });
+    };
+
+    const completeUpload = async (item: QueueItem) => {
+        if (!item.file || !item.uploadedUrls) return;
+
+        try {
+            const data = await client.merge(item.file.name, item.uploadedUrls, item.file.size);
+            // const response = await fetch('/merge', {
+            //     method: 'POST',
+            //     headers: { 'Content-Type': 'application/json' },
+            //     body: JSON.stringify({
+            //         filename: item.file.name,
+            //         chunks: item.uploadedUrls,
+            //         size: item.file.size
+            //     })
+            // });
+            if (!data) {
+                throw new Error('No response from server');
+            }
+            item.status = 'complete';
+            item.progress = 100;
+            item.uploaded = item.total;
+            item.speed = '0 MB/s';
+        } catch (error) {
+            item.status = 'error';
+            console.error('Merge failed:', error);
+        }
+    };
+
+    // Mock Remote Fetch Logic
+    const startMockRemoteFetch = (id: string) => {
+        const item = items.value.find(i => i.id === id);
+        if (!item) return;
+
+        item.status = 'fetching';
+
+        setTimeout(() => {
+            item.status = 'complete';
+            item.progress = 100;
+        }, 3000 + Math.random() * 3000);
+    };
+
+
+    const formatSize = (bytes: number): string => {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+
+    const totalSize = computed(() => {
+        let total = 0;
+        items.value.forEach(item => {
+            if (item.file) total += item.file.size;
+        });
+        return formatSize(total);
+    });
+
+    const completeCount = computed(() => {
+        return items.value.filter(i => i.status === 'complete').length;
+    });
+
+    const pendingCount = computed(() => {
+        return items.value.filter(i => i.status === 'pending').length;
+    });
+    function removeAll() {
+        items.value = [];
+    }
+    // watch(items, (newItems) => {
+    //     // console.log(newItems);
+    //     if (newItems.length === 0) return;
+    //     if (newItems.filter(i => i.status === 'pending' || i.status === 'uploading').length === 0) {
+    //         // startQueue();
+    //         items.value = [];
+    //     }
+    // }, { deep: true });
+    return {
+        items,
+        addFiles,
+        addRemoteUrls,
+        removeItem,
+        cancelItem,
+        removeAll,
+        startQueue,
+        totalSize,
+        completeCount,
+        pendingCount,
+        remainingSlots,
+        maxItems: MAX_ITEMS,
+    };
+}
\ No newline at end of file
diff --git a/src/composables/useUsageQuery.ts b/src/composables/useUsageQuery.ts
new file mode 100644
index 0000000..9129759
--- /dev/null
+++ b/src/composables/useUsageQuery.ts
@@ -0,0 +1,38 @@
+import { client as rpcClient } from '@/api/rpcclient';
+import { useQuery } from '@pinia/colada';
+
+export const USAGE_QUERY_KEY = ['usage'] as const;
+
+export type UsageSnapshot = {
+  totalVideos: number;
+  totalStorage: number;
+};
+
+type UsageResponse = {
+  totalVideos?: number;
+  totalStorage?: number;
+};
+
+const DEFAULT_USAGE_SNAPSHOT: UsageSnapshot = {
+  totalVideos: 0,
+  totalStorage: 0,
+};
+
+const normalizeUsageSnapshot = (responseData: unknown): UsageSnapshot => {
+  const usage = responseData as UsageResponse | undefined;
+
+  return {
+    totalVideos: usage?.totalVideos ?? DEFAULT_USAGE_SNAPSHOT.totalVideos,
+    totalStorage: usage?.totalStorage ?? DEFAULT_USAGE_SNAPSHOT.totalStorage,
+  };
+};
+
+export function useUsageQuery() {
+  return useQuery({
+    key: () => USAGE_QUERY_KEY,
+    query: async () => {
+      const response = await rpcClient.getUsage();
+      return normalizeUsageSnapshot(response);
+    },
+  });
+}
diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts
new file mode 100644
index 0000000..ac9c0a9
--- /dev/null
+++ b/src/i18n/constants.ts
@@ -0,0 +1,7 @@
+export const supportedLocales = ['en', 'vi'] as const;
+
+export type SupportedLocale = (typeof supportedLocales)[number];
+
+export const defaultLocale: SupportedLocale = 'en';
+
+export const localeCookieKey = 'i18next';
diff --git a/src/index.tsx b/src/index.tsx
index 40f8857..d1c4fd8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,81 +1,19 @@
-import { Hono } from 'hono'
-import { createApp } from './main';
-import { renderToWebStream } from 'vue/server-renderer';
-import { streamText } from 'hono/streaming';
-import { renderSSRHead } from '@unhead/vue/server';
-import { buildBootstrapScript, getHrefFromManifest, loadCssByModules } from './lib/manifest';
-import { contextStorage } from 'hono/context-storage';
-import { cors } from "hono/cors";
-import { firebaseAuthMiddleware, rpcServer } from './api/rpc';
-import isMobile from 'is-mobile';
-import { useAuthStore } from './stores/auth';
-import { cssContent } from './lib/primeCssContent';
-import { styleTags } from './lib/primePassthrough';
-// @ts-ignore
-import Base from '@primevue/core/base';
-const app = new Hono()
-const defaultNames = ['primitive', 'semantic', 'global', 'base', 'ripple-directive']
-// app.use(renderer)
-app.use('*', contextStorage());
-app.use(cors(), async (c, next) => {
-  c.set("fetch", app.request.bind(app));
-  const ua = c.req.header("User-Agent")
-  if (!ua) {
-    return c.json({ error: "User-Agent header is missing" }, 400);
-  };
-  c.set("isMobile", isMobile({ ua }));
-  await next();
-}, firebaseAuthMiddleware, rpcServer);
-app.get("/.well-known/*", (c) => {
-  return c.json({ ok: true });
-});
-app.get("*", async (c) => {
-  const nonce = crypto.randomUUID();
-  const url = new URL(c.req.url);
-  const { app, router, head, pinia, bodyClass } = createApp();
-  app.provide("honoContext", c);
-  const auth = useAuthStore();
-  auth.$reset();
-  auth.initialized = false;
-  await auth.init();
-  await router.push(url.pathname);
-  await router.isReady();
-  let usedStyles = new Set<String>();
-  Base.setLoadedStyleName = async (name: string) => usedStyles.add(name)
-  return streamText(c, async (stream) => {
-    c.header("Content-Type", "text/html; charset=utf-8");
-    c.header("Content-Encoding", "Identity");
-    const ctx: Record<string, any> = {};
-    const appStream = renderToWebStream(app, ctx);
-    // console.log("ctx: ", );
-    await stream.write("<!DOCTYPE html><html lang='en'><head>");
-    await stream.write("<base href='" + url.origin + "'/>");
-    await renderSSRHead(head).then((headString) => stream.write(headString.headTags.replace(/\n/g, "")));
-    await stream.write(`<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"rel="stylesheet"></link>`);
-    await stream.write('<link rel="icon" href="/favicon.ico" />');
-    await stream.write(buildBootstrapScript());
-    if (usedStyles.size > 0) {
-      defaultNames.forEach(name => usedStyles.add(name));
-    }
-    await Promise.all(styleTags.filter(tag => usedStyles.has(tag.name.replace(/-(variables|style)$/, ""))).map(tag => stream.write(`<style type="text/css" data-primevue-style-id="${tag.name}">${tag.value}</style>`)));
-    await stream.write(`</head><body class='${bodyClass}'>`);
-    await stream.pipe(appStream);
-    Object.assign(ctx, { $p: pinia.state.value });
-    await stream.write(`<script type="application/json" data-ssr="true" id="__APP_DATA__" nonce="${nonce}">${htmlEscape((JSON.stringify(ctx)))}</script>`);
-    await stream.write("</body></html>");
-  });
-})
-const ESCAPE_LOOKUP: { [match: string]: string } = {
-  "&": "\\u0026",
-  ">": "\\u003e",
-  "<": "\\u003c",
-  "\u2028": "\\u2028",
-  "\u2029": "\\u2029",
-};
+import { Hono } from 'hono';
 
-const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+import { setupMiddlewares } from './server/middlewares/setup';
+import { registerAuthRoutes } from './server/routes/auth';
+import { registerRpcRoutes } from './server/routes/rpc';
+import { registerSSRRoutes } from './server/routes/ssr';
+import { registerWellKnownRoutes } from './server/routes/wellKnown';
+import { setupServices } from './server/services/grpcClient';
+const app = new Hono();
+// Global middlewares
+setupMiddlewares(app);
+setupServices(app);
+// Routes
+registerWellKnownRoutes(app);
+registerAuthRoutes(app);
+registerRpcRoutes(app);
+registerSSRRoutes(app);
 
-function htmlEscape(str: string): string {
-  return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
-}
-export default app
+export default app;
diff --git a/src/lib/PiniaSharedState.ts b/src/lib/PiniaSharedState.ts
new file mode 100644
index 0000000..7faf90b
--- /dev/null
+++ b/src/lib/PiniaSharedState.ts
@@ -0,0 +1,91 @@
+import type { DefineStoreOptions, PiniaPluginContext, StateTree } from "pinia";
+
+type Serializer<T extends StateTree> = {
+  serialize: (value: T) => string;
+  deserialize: (value: string) => T;
+};
+
+interface BroadcastMessage {
+  type: "STATE_UPDATE" | "SYNC_REQUEST";
+  timestamp?: number;
+  state?: string;
+}
+
+type PluginOptions<T extends StateTree> = {
+  enable?: boolean;
+  initialize?: boolean;
+  serializer?: Serializer<T>;
+};
+
+export interface StoreOptions<
+  S extends StateTree = StateTree,
+  G = object,
+  A = object,
+> extends DefineStoreOptions<string, S, G, A> {
+  share?: PluginOptions<S>;
+}
+
+// Add type extension for Pinia
+declare module "pinia" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  export interface DefineStoreOptionsBase<S, Store> {
+    share?: PluginOptions<S>;
+  }
+}
+
+export default function PiniaSharedState<T extends StateTree>({
+  enable = false,
+  initialize = false,
+  serializer = {
+    serialize: JSON.stringify,
+    deserialize: JSON.parse,
+  },
+}: PluginOptions<T> = {}) {
+  return ({ store, options }: PiniaPluginContext) => {
+    if (!(options.share?.enable ?? enable)) return;
+    const channel = new BroadcastChannel(store.$id);
+    let timestamp = 0;
+    let externalUpdate = false;
+
+    // Initial state sync
+    if (options.share?.initialize ?? initialize) {
+      channel.postMessage({ type: "SYNC_REQUEST" });
+    }
+
+    // State change listener
+    store.$subscribe((_mutation, state) => {
+      if (externalUpdate) return;
+
+      timestamp = Date.now();
+      channel.postMessage({
+        type: "STATE_UPDATE",
+        timestamp,
+        state: serializer.serialize(state as T),
+      });
+    });
+
+    // Message handler
+    channel.onmessage = (event: MessageEvent<BroadcastMessage>) => {
+      const data = event.data;
+      if (
+        data.type === "STATE_UPDATE" &&
+        data.timestamp &&
+        data.timestamp > timestamp &&
+        data.state
+      ) {
+        externalUpdate = true;
+        timestamp = data.timestamp;
+        store.$patch(serializer.deserialize(data.state));
+        externalUpdate = false;
+      }
+
+      if (data.type === "SYNC_REQUEST") {
+        channel.postMessage({
+          type: "STATE_UPDATE",
+          timestamp,
+          state: serializer.serialize(store.$state as T),
+        });
+      }
+    };
+  };
+}
\ No newline at end of file
diff --git a/src/lib/directives/clickOutside.ts b/src/lib/directives/clickOutside.ts
new file mode 100644
index 0000000..0ad570e
--- /dev/null
+++ b/src/lib/directives/clickOutside.ts
@@ -0,0 +1,16 @@
+import type { Directive } from 'vue';
+
+export const vClickOutside: Directive = {
+    mounted(el, binding) {
+        el.__clickOutsideHandler__ = (event: Event) => {
+            if (!(el === event.target || el.contains(event.target as Node))) {
+                binding.value(event);
+            }
+        };
+        document.addEventListener('click', el.__clickOutsideHandler__);
+    },
+    unmounted(el) {
+        document.removeEventListener('click', el.__clickOutsideHandler__);
+        delete el.__clickOutsideHandler__;
+    },
+};
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
deleted file mode 100644
index 0c84959..0000000
--- a/src/lib/firebase.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { initializeApp } from "firebase/app";
-import { createUserWithEmailAndPassword, getAuth, GoogleAuthProvider, sendPasswordResetEmail, signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
-
-// Your web app's Firebase configuration
-const firebaseConfig = {
-    apiKey: "AIzaSyBTr0L5qxdrVEtWuP2oAicJXQvVyeXkMts",
-    authDomain: "trello-7ea39.firebaseapp.com",
-    projectId: "trello-7ea39",
-    storageBucket: "trello-7ea39.firebasestorage.app",
-    messagingSenderId: "321067890572",
-    appId: "1:321067890572:web:e34e1e657125d37be688a9"
-};
-
-// Initialize Firebase
-const appFirebase = initializeApp(firebaseConfig);
-const provider = new GoogleAuthProvider();
-export const auth = getAuth(appFirebase);
-export const googleAuth = () => signInWithPopup(auth, provider).then((result) => {
-    console.log('User signed in:', result.user);
-    return result;
-})
-export const emailAuth = (username: string, password: string) => {
-    return signInWithEmailAndPassword(auth, username, password)
-}
-export const forgotPassword = (email: string) => {
-    return sendPasswordResetEmail(auth, email)
-        .then(() => {
-            console.log('Password reset email sent');
-        })
-        .catch((error) => {
-            console.error('Error sending password reset email:', error);
-            throw error;
-        });
-}
-export const signUp = (email: string, password: string) => {
-    return createUserWithEmailAndPassword(auth, email, password)
-        .then((userCredential) => {
-            console.log('User signed up:', userCredential.user);
-            return userCredential.user;
-        })
-        .catch((error) => {
-            console.error('Error signing up:', error);
-            throw error;
-        });
-}
\ No newline at end of file
diff --git a/src/lib/firebaseAdmin.ts b/src/lib/firebaseAdmin.ts
deleted file mode 100644
index 7f1d4c9..0000000
--- a/src/lib/firebaseAdmin.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// import { initializeApp, getApps, cert } from 'firebase-admin/app';
-// import { getAuth } from 'firebase-admin/auth';
-// import certJson from './cert.json';
-// const firebaseAdminConfig = {
-//     credential: cert(certJson as any)
-// };
-
-// if (getApps().length === 0) {
-//     initializeApp(firebaseAdminConfig);
-// }
-
-// export const adminAuth = getAuth();
diff --git a/src/lib/interface.ts b/src/lib/interface.ts
new file mode 100644
index 0000000..91ec326
--- /dev/null
+++ b/src/lib/interface.ts
@@ -0,0 +1,4 @@
+export interface ITinyMqttClient {
+    connect(): void;
+    disconnect(): void;
+}
\ No newline at end of file
diff --git a/src/lib/liteMqtt.ts b/src/lib/liteMqtt.ts
new file mode 100644
index 0000000..68817ab
--- /dev/null
+++ b/src/lib/liteMqtt.ts
@@ -0,0 +1,145 @@
+import { ITinyMqttClient } from "./interface";
+
+export type MessageCallback = (topic: string, payload: string) => void;
+export class TinyMqttClient implements ITinyMqttClient {
+    private ws: WebSocket | null = null;
+    private encoder = new TextEncoder();
+    private decoder = new TextDecoder();
+    private worker: Worker | null = null;
+
+    constructor(
+        private url: string,
+        private topics: string[],
+        private onMessage: MessageCallback
+    ) {}
+
+    public connect(): void {
+        this.ws = new WebSocket(this.url, 'mqtt');
+        this.ws.binaryType = 'arraybuffer';
+
+        this.ws.onopen = () => {
+            this.sendConnect();
+        };
+
+        this.ws.onmessage = (e) => this.handlePacket(new Uint8Array(e.data));
+        this.ws.onclose = () => this.stopHeartbeatWorker();
+    }
+    public disconnect(): void {
+        this.ws?.close();
+        this.stopHeartbeatWorker();
+    }
+    private sendConnect(): void {
+        const clientId = `ws_worker_${Math.random().toString(16).slice(2, 8)}`;
+        const idBytes = this.encoder.encode(clientId);
+        // Keep-alive 60s
+        const packet = new Uint8Array([
+            0x10, 12 + idBytes.length,
+            0x00, 0x04, 0x4d, 0x51, 0x54, 0x54, 0x04, 0x02, 0x00, 0x3c,
+            0x00, idBytes.length, ...idBytes
+        ]);
+        this.ws?.send(packet);
+    }
+
+    private startHeartbeatWorker(): void {
+        if (this.worker) return;
+
+        // Tạo nội dung Worker dưới dạng chuỗi
+        const workerCode = `
+            let timer = null;
+            self.onmessage = (e) => {
+                if (e.data === 'START') {
+                    timer = setInterval(() => self.postMessage('TICK'), 30000);
+                } else if (e.data === 'STOP') {
+                    clearInterval(timer);
+                }
+            };
+        `;
+
+        const blob = new Blob([workerCode], { type: 'application/javascript' });
+        this.worker = new Worker(URL.createObjectURL(blob));
+
+        this.worker.onmessage = (e) => {
+            if (e.data === 'TICK' && this.ws?.readyState === WebSocket.OPEN) {
+                this.ws.send(new Uint8Array([0xC0, 0x00])); // Gửi PINGREQ
+            }
+        };
+
+        this.worker.postMessage('START');
+    }
+
+    private stopHeartbeatWorker(): void {
+        if (this.worker) {
+            this.worker.postMessage('STOP');
+            this.worker.terminate();
+            this.worker = null;
+            console.log('🛑 Worker stopped');
+        }
+    }
+
+    private handlePacket(data: Uint8Array): void {
+        const type = data[0] & 0xF0;
+        switch (type) {
+            case 0x20: // CONNACK
+                this.startHeartbeatWorker();
+                this.subscribe();
+                break;
+            case 0xD0: // PINGRESP
+                break;
+            case 0x30: // PUBLISH QoS 0
+            case 0x32: // PUBLISH QoS 1
+            case 0x34: // PUBLISH QoS 2
+                this.parsePublish(data);
+                break;
+        }
+    }
+
+    private subscribe(): void {
+        let payload: number[] = [];
+        this.topics.forEach(t => {
+            const b = this.encoder.encode(t);
+            payload.push(0x00, b.length, ...Array.from(b), 0x00);
+        });
+        const packet = new Uint8Array([0x82, 2 + payload.length, 0x00, 0x01, ...payload]);
+        this.ws?.send(packet);
+    }
+
+    private parsePublish(data: Uint8Array): void {
+        let multiplier = 1;
+        let remainingLength = 0;
+        let offset = 1;
+        let encodedByte = 0;
+
+        do {
+            encodedByte = data[offset++];
+            remainingLength += (encodedByte & 127) * multiplier;
+            multiplier *= 128;
+        } while ((encodedByte & 128) !== 0 && offset < data.length);
+
+        const variableHeaderStart = offset;
+        const topicLength = (data[offset] << 8) | data[offset + 1];
+        offset += 2;
+
+        const topic = this.decoder.decode(data.slice(offset, offset + topicLength));
+        offset += topicLength;
+
+        const qos = (data[0] >> 1) & 0x03;
+        if (qos > 0) {
+            offset += 2; // packet identifier
+        }
+
+        const consumedFromVariableHeader = offset - variableHeaderStart;
+        const payloadLength = Math.max(0, remainingLength - consumedFromVariableHeader);
+        const payload = this.decoder.decode(data.slice(offset, offset + payloadLength));
+        this.onMessage(topic, payload);
+    }
+}
+
+// --- Cách dùng ---
+// const client = new TinyMqttClient(
+//     'ws://your-emqx:8083', 
+//     ['sensor/temp', 'sensor/humi', 'system/ping'], 
+//     (topic, msg) => {
+//         console.log(`[${topic}]: ${msg}`);
+//     }
+// );
+// client.connect();
\ No newline at end of file
diff --git a/src/lib/primePassthrough.ts b/src/lib/primePassthrough.ts
deleted file mode 100644
index ad6ee6f..0000000
--- a/src/lib/primePassthrough.ts
+++ /dev/null
@@ -1,742 +0,0 @@
-export const styleTags = [
-    {
-        "name": "base",
-        "value": ".p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;white-space:nowrap;width:1px;}.p-overflow-hidden{overflow:hidden;padding-right:var(--p-scrollbar-width);}"
-    },
-    {
-        "name": "virtualscroller",
-        "value": ".p-virtualscroller{position:relative;overflow:auto;contain:strict;transform:translateZ(0);will-change:scroll-position;outline:0 none;}.p-virtualscroller-content{position:absolute;top:0;left:0;min-height:100%;min-width:100%;will-change:transform;}.p-virtualscroller-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0;pointer-events:none;}.p-virtualscroller-loader{position:sticky;top:0;left:0;width:100%;height:100%;}.p-virtualscroller-loader-mask{display:flex;align-items:center;justify-content:center;}.p-virtualscroller-horizontal > .p-virtualscroller-content{display:flex;}.p-virtualscroller-inline .p-virtualscroller-content{position:static;}.p-virtualscroller .p-virtualscroller-loading{transform:none!important;min-height:0;position:sticky;inset-block-start:0;inset-inline-start:0;}"
-    },
-    {
-        "name": "primitive-variables",
-        "value": ":root,:host{--p-stone-50:#fafaf9;--p-stone-100:#f5f5f4;--p-stone-200:#e7e5e4;--p-stone-300:#d6d3d1;--p-stone-400:#a8a29e;--p-stone-500:#78716c;--p-stone-600:#57534e;--p-stone-700:#44403c;--p-stone-800:#292524;--p-stone-900:#1c1917;--p-stone-950:#0c0a09;--p-neutral-50:#fafafa;--p-neutral-100:#f5f5f5;--p-neutral-200:#e5e5e5;--p-neutral-300:#d4d4d4;--p-neutral-400:#a3a3a3;--p-neutral-500:#737373;--p-neutral-600:#525252;--p-neutral-700:#404040;--p-neutral-800:#262626;--p-neutral-900:#171717;--p-neutral-950:#0a0a0a;--p-zinc-50:#fafafa;--p-zinc-100:#f4f4f5;--p-zinc-200:#e4e4e7;--p-zinc-300:#d4d4d8;--p-zinc-400:#a1a1aa;--p-zinc-500:#71717a;--p-zinc-600:#52525b;--p-zinc-700:#3f3f46;--p-zinc-800:#27272a;--p-zinc-900:#18181b;--p-zinc-950:#09090b;--p-gray-50:#f9fafb;--p-gray-100:#f3f4f6;--p-gray-200:#e5e7eb;--p-gray-300:#d1d5db;--p-gray-400:#9ca3af;--p-gray-500:#6b7280;--p-gray-600:#4b5563;--p-gray-700:#374151;--p-gray-800:#1f2937;--p-gray-900:#111827;--p-gray-950:#030712;--p-slate-50:#f8fafc;--p-slate-100:#f1f5f9;--p-slate-200:#e2e8f0;--p-slate-300:#cbd5e1;--p-slate-400:#94a3b8;--p-slate-500:#64748b;--p-slate-600:#475569;--p-slate-700:#334155;--p-slate-800:#1e293b;--p-slate-900:#0f172a;--p-slate-950:#020617;--p-rose-50:#fff1f2;--p-rose-100:#ffe4e6;--p-rose-200:#fecdd3;--p-rose-300:#fda4af;--p-rose-400:#fb7185;--p-rose-500:#f43f5e;--p-rose-600:#e11d48;--p-rose-700:#be123c;--p-rose-800:#9f1239;--p-rose-900:#881337;--p-rose-950:#4c0519;--p-pink-50:#fdf2f8;--p-pink-100:#fce7f3;--p-pink-200:#fbcfe8;--p-pink-300:#f9a8d4;--p-pink-400:#f472b6;--p-pink-500:#ec4899;--p-pink-600:#db2777;--p-pink-700:#be185d;--p-pink-800:#9d174d;--p-pink-900:#831843;--p-pink-950:#500724;--p-fuchsia-50:#fdf4ff;--p-fuchsia-100:#fae8ff;--p-fuchsia-200:#f5d0fe;--p-fuchsia-300:#f0abfc;--p-fuchsia-400:#e879f9;--p-fuchsia-500:#d946ef;--p-fuchsia-600:#c026d3;--p-fuchsia-700:#a21caf;--p-fuchsia-800:#86198f;--p-fuchsia-900:#701a75;--p-fuchsia-950:#4a044e;--p-purple-50:#faf5ff;--p-purple-100:#f3e8ff;--p-purple-200:#e9d5ff;--p-purple-300:#d8b4fe;--p-purple-400:#c084fc;--p-purple-500:#a855f7;--p-purple-600:#9333ea;--p-purple-700:#7e22ce;--p-purple-800:#6b21a8;--p-purple-900:#581c87;--p-purple-950:#3b0764;--p-violet-50:#f5f3ff;--p-violet-100:#ede9fe;--p-violet-200:#ddd6fe;--p-violet-300:#c4b5fd;--p-violet-400:#a78bfa;--p-violet-500:#8b5cf6;--p-violet-600:#7c3aed;--p-violet-700:#6d28d9;--p-violet-800:#5b21b6;--p-violet-900:#4c1d95;--p-violet-950:#2e1065;--p-indigo-50:#eef2ff;--p-indigo-100:#e0e7ff;--p-indigo-200:#c7d2fe;--p-indigo-300:#a5b4fc;--p-indigo-400:#818cf8;--p-indigo-500:#6366f1;--p-indigo-600:#4f46e5;--p-indigo-700:#4338ca;--p-indigo-800:#3730a3;--p-indigo-900:#312e81;--p-indigo-950:#1e1b4b;--p-blue-50:#eff6ff;--p-blue-100:#dbeafe;--p-blue-200:#bfdbfe;--p-blue-300:#93c5fd;--p-blue-400:#60a5fa;--p-blue-500:#3b82f6;--p-blue-600:#2563eb;--p-blue-700:#1d4ed8;--p-blue-800:#1e40af;--p-blue-900:#1e3a8a;--p-blue-950:#172554;--p-sky-50:#f0f9ff;--p-sky-100:#e0f2fe;--p-sky-200:#bae6fd;--p-sky-300:#7dd3fc;--p-sky-400:#38bdf8;--p-sky-500:#0ea5e9;--p-sky-600:#0284c7;--p-sky-700:#0369a1;--p-sky-800:#075985;--p-sky-900:#0c4a6e;--p-sky-950:#082f49;--p-cyan-50:#ecfeff;--p-cyan-100:#cffafe;--p-cyan-200:#a5f3fc;--p-cyan-300:#67e8f9;--p-cyan-400:#22d3ee;--p-cyan-500:#06b6d4;--p-cyan-600:#0891b2;--p-cyan-700:#0e7490;--p-cyan-800:#155e75;--p-cyan-900:#164e63;--p-cyan-950:#083344;--p-teal-50:#f0fdfa;--p-teal-100:#ccfbf1;--p-teal-200:#99f6e4;--p-teal-300:#5eead4;--p-teal-400:#2dd4bf;--p-teal-500:#14b8a6;--p-teal-600:#0d9488;--p-teal-700:#0f766e;--p-teal-800:#115e59;--p-teal-900:#134e4a;--p-teal-950:#042f2e;--p-yellow-50:#fefce8;--p-yellow-100:#fef9c3;--p-yellow-200:#fef08a;--p-yellow-300:#fde047;--p-yellow-400:#facc15;--p-yellow-500:#eab308;--p-yellow-600:#ca8a04;--p-yellow-700:#a16207;--p-yellow-800:#854d0e;--p-yellow-900:#713f12;--p-yellow-950:#422006;--p-amber-50:#fffbeb;--p-amber-100:#fef3c7;--p-amber-200:#fde68a;--p-amber-300:#fcd34d;--p-amber-400:#fbbf24;--p-amber-500:#f59e0b;--p-amber-600:#d97706;--p-amber-700:#b45309;--p-amber-800:#92400e;--p-amber-900:#78350f;--p-amber-950:#451a03;--p-orange-50:#fff7ed;--p-orange-100:#ffedd5;--p-orange-200:#fed7aa;--p-orange-300:#fdba74;--p-orange-400:#fb923c;--p-orange-500:#f97316;--p-orange-600:#ea580c;--p-orange-700:#c2410c;--p-orange-800:#9a3412;--p-orange-900:#7c2d12;--p-orange-950:#431407;--p-red-50:#fef2f2;--p-red-100:#fee2e2;--p-red-200:#fecaca;--p-red-300:#fca5a5;--p-red-400:#f87171;--p-red-500:#ef4444;--p-red-600:#dc2626;--p-red-700:#b91c1c;--p-red-800:#991b1b;--p-red-900:#7f1d1d;--p-red-950:#450a0a;--p-lime-50:#f7fee7;--p-lime-100:#ecfccb;--p-lime-200:#d9f99d;--p-lime-300:#bef264;--p-lime-400:#a3e635;--p-lime-500:#84cc16;--p-lime-600:#65a30d;--p-lime-700:#4d7c0f;--p-lime-800:#3f6212;--p-lime-900:#365314;--p-lime-950:#1a2e05;--p-green-50:#f0fdf4;--p-green-100:#dcfce7;--p-green-200:#bbf7d0;--p-green-300:#86efac;--p-green-400:#4ade80;--p-green-500:#22c55e;--p-green-600:#16a34a;--p-green-700:#15803d;--p-green-800:#166534;--p-green-900:#14532d;--p-green-950:#052e16;--p-emerald-50:#ecfdf5;--p-emerald-100:#d1fae5;--p-emerald-200:#a7f3d0;--p-emerald-300:#6ee7b7;--p-emerald-400:#34d399;--p-emerald-500:#10b981;--p-emerald-600:#059669;--p-emerald-700:#047857;--p-emerald-800:#065f46;--p-emerald-900:#064e3b;--p-emerald-950:#022c22;--p-border-radius-none:0;--p-border-radius-xs:2px;--p-border-radius-sm:4px;--p-border-radius-md:6px;--p-border-radius-lg:8px;--p-border-radius-xl:12px;}"
-    },
-    {
-        "name": "semantic-variables",
-        "value": ":root,:host{--p-transition-duration:0.2s;--p-disabled-opacity:0.6;--p-icon-size:1rem;--p-anchor-gutter:2px;--p-overlay-navigation-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-overlay-modal-border-radius:var(--p-border-radius-xl);--p-overlay-modal-padding:1.25rem;--p-overlay-modal-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);--p-overlay-popover-border-radius:var(--p-border-radius-md);--p-overlay-popover-padding:0.75rem;--p-overlay-popover-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-overlay-select-border-radius:var(--p-border-radius-md);--p-overlay-select-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--p-navigation-submenu-icon-size:0.875rem;--p-navigation-submenu-label-padding:0.5rem 0.75rem;--p-navigation-submenu-label-font-weight:600;--p-navigation-item-padding:0.5rem 0.75rem;--p-navigation-item-border-radius:var(--p-border-radius-sm);--p-navigation-item-gap:0.5rem;--p-navigation-list-padding:0.25rem 0.25rem;--p-navigation-list-gap:2px;--p-mask-transition-duration:0.3s;--p-content-border-radius:var(--p-border-radius-md);--p-list-padding:0.25rem 0.25rem;--p-list-gap:2px;--p-list-option-group-padding:0.5rem 0.75rem;--p-list-option-group-font-weight:600;--p-list-option-padding:0.5rem 0.75rem;--p-list-option-border-radius:var(--p-border-radius-sm);--p-list-header-padding:0.5rem 1rem 0.25rem 1rem;--p-form-field-padding-x:0.75rem;--p-form-field-padding-y:0.5rem;--p-form-field-border-radius:var(--p-border-radius-md);--p-form-field-transition-duration:var(--p-transition-duration);--p-form-field-focus-ring-width:0;--p-form-field-focus-ring-style:none;--p-form-field-focus-ring-color:transparent;--p-form-field-focus-ring-offset:0;--p-form-field-focus-ring-shadow:none;--p-form-field-lg-font-size:1.125rem;--p-form-field-lg-padding-x:0.875rem;--p-form-field-lg-padding-y:0.625rem;--p-form-field-sm-font-size:0.875rem;--p-form-field-sm-padding-x:0.625rem;--p-form-field-sm-padding-y:0.375rem;--p-primary-50:#ecfdf5;--p-primary-100:#d1fae5;--p-primary-200:#a7f3d0;--p-primary-300:#6ee7b7;--p-primary-400:#34d399;--p-primary-500:#10b981;--p-primary-600:#059669;--p-primary-700:#047857;--p-primary-800:#065f46;--p-primary-900:#064e3b;--p-primary-950:#022c22;--p-focus-ring-width:1px;--p-focus-ring-style:solid;--p-focus-ring-color:var(--p-primary-color);--p-focus-ring-offset:2px;--p-focus-ring-shadow:none;--p-navigation-submenu-icon-color:var(--p-surface-400);--p-navigation-submenu-icon-focus-color:var(--p-surface-500);--p-navigation-submenu-icon-active-color:var(--p-surface-500);--p-navigation-submenu-label-background:transparent;--p-navigation-submenu-label-color:var(--p-text-muted-color);--p-navigation-item-focus-background:var(--p-surface-100);--p-navigation-item-active-background:var(--p-surface-100);--p-navigation-item-color:var(--p-text-color);--p-navigation-item-focus-color:var(--p-text-hover-color);--p-navigation-item-active-color:var(--p-text-hover-color);--p-navigation-item-icon-color:var(--p-surface-400);--p-navigation-item-icon-focus-color:var(--p-surface-500);--p-navigation-item-icon-active-color:var(--p-surface-500);--p-list-option-group-background:transparent;--p-list-option-group-color:var(--p-text-muted-color);--p-list-option-focus-background:var(--p-surface-100);--p-list-option-selected-background:var(--p-highlight-background);--p-list-option-selected-focus-background:var(--p-highlight-focus-background);--p-list-option-color:var(--p-text-color);--p-list-option-focus-color:var(--p-text-hover-color);--p-list-option-selected-color:var(--p-highlight-color);--p-list-option-selected-focus-color:var(--p-highlight-focus-color);--p-list-option-icon-color:var(--p-surface-400);--p-list-option-icon-focus-color:var(--p-surface-500);--p-overlay-modal-background:var(--p-surface-0);--p-overlay-modal-border-color:var(--p-surface-200);--p-overlay-modal-color:var(--p-text-color);--p-overlay-popover-background:var(--p-surface-0);--p-overlay-popover-border-color:var(--p-surface-200);--p-overlay-popover-color:var(--p-text-color);--p-overlay-select-background:var(--p-surface-0);--p-overlay-select-border-color:var(--p-surface-200);--p-overlay-select-color:var(--p-text-color);--p-content-background:var(--p-surface-0);--p-content-hover-background:var(--p-surface-100);--p-content-border-color:var(--p-surface-200);--p-content-color:var(--p-text-color);--p-content-hover-color:var(--p-text-hover-color);--p-text-color:var(--p-surface-700);--p-text-hover-color:var(--p-surface-800);--p-text-muted-color:var(--p-surface-500);--p-text-hover-muted-color:var(--p-surface-600);--p-form-field-background:var(--p-surface-0);--p-form-field-disabled-background:var(--p-surface-200);--p-form-field-filled-background:var(--p-surface-50);--p-form-field-filled-hover-background:var(--p-surface-50);--p-form-field-filled-focus-background:var(--p-surface-50);--p-form-field-border-color:var(--p-surface-300);--p-form-field-hover-border-color:var(--p-surface-400);--p-form-field-focus-border-color:var(--p-primary-color);--p-form-field-invalid-border-color:var(--p-red-400);--p-form-field-color:var(--p-surface-700);--p-form-field-disabled-color:var(--p-surface-500);--p-form-field-placeholder-color:var(--p-surface-500);--p-form-field-invalid-placeholder-color:var(--p-red-600);--p-form-field-float-label-color:var(--p-surface-500);--p-form-field-float-label-focus-color:var(--p-primary-600);--p-form-field-float-label-active-color:var(--p-surface-500);--p-form-field-float-label-invalid-color:var(--p-form-field-invalid-placeholder-color);--p-form-field-icon-color:var(--p-surface-400);--p-form-field-shadow:0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(18,18,23,0.05);--p-mask-background:rgba(0,0,0,0.4);--p-mask-color:var(--p-surface-200);--p-highlight-background:var(--p-primary-50);--p-highlight-focus-background:var(--p-primary-100);--p-highlight-color:var(--p-primary-700);--p-highlight-focus-color:var(--p-primary-800);--p-primary-color:var(--p-primary-500);--p-primary-contrast-color:#ffffff;--p-primary-hover-color:var(--p-primary-600);--p-primary-active-color:var(--p-primary-700);--p-surface-0:#ffffff;--p-surface-50:var(--p-slate-50);--p-surface-100:var(--p-slate-100);--p-surface-200:var(--p-slate-200);--p-surface-300:var(--p-slate-300);--p-surface-400:var(--p-slate-400);--p-surface-500:var(--p-slate-500);--p-surface-600:var(--p-slate-600);--p-surface-700:var(--p-slate-700);--p-surface-800:var(--p-slate-800);--p-surface-900:var(--p-slate-900);--p-surface-950:var(--p-slate-950);}.p-dark{--p-navigation-submenu-icon-color:var(--p-surface-500);--p-navigation-submenu-icon-focus-color:var(--p-surface-400);--p-navigation-submenu-icon-active-color:var(--p-surface-400);--p-navigation-submenu-label-background:transparent;--p-navigation-submenu-label-color:var(--p-text-muted-color);--p-navigation-item-focus-background:var(--p-surface-800);--p-navigation-item-active-background:var(--p-surface-800);--p-navigation-item-color:var(--p-text-color);--p-navigation-item-focus-color:var(--p-text-hover-color);--p-navigation-item-active-color:var(--p-text-hover-color);--p-navigation-item-icon-color:var(--p-surface-500);--p-navigation-item-icon-focus-color:var(--p-surface-400);--p-navigation-item-icon-active-color:var(--p-surface-400);--p-list-option-group-background:transparent;--p-list-option-group-color:var(--p-text-muted-color);--p-list-option-focus-background:var(--p-surface-800);--p-list-option-selected-background:var(--p-highlight-background);--p-list-option-selected-focus-background:var(--p-highlight-focus-background);--p-list-option-color:var(--p-text-color);--p-list-option-focus-color:var(--p-text-hover-color);--p-list-option-selected-color:var(--p-highlight-color);--p-list-option-selected-focus-color:var(--p-highlight-focus-color);--p-list-option-icon-color:var(--p-surface-500);--p-list-option-icon-focus-color:var(--p-surface-400);--p-overlay-modal-background:var(--p-surface-900);--p-overlay-modal-border-color:var(--p-surface-700);--p-overlay-modal-color:var(--p-text-color);--p-overlay-popover-background:var(--p-surface-900);--p-overlay-popover-border-color:var(--p-surface-700);--p-overlay-popover-color:var(--p-text-color);--p-overlay-select-background:var(--p-surface-900);--p-overlay-select-border-color:var(--p-surface-700);--p-overlay-select-color:var(--p-text-color);--p-content-background:var(--p-surface-900);--p-content-hover-background:var(--p-surface-800);--p-content-border-color:var(--p-surface-700);--p-content-color:var(--p-text-color);--p-content-hover-color:var(--p-text-hover-color);--p-text-color:var(--p-surface-0);--p-text-hover-color:var(--p-surface-0);--p-text-muted-color:var(--p-surface-400);--p-text-hover-muted-color:var(--p-surface-300);--p-form-field-background:var(--p-surface-950);--p-form-field-disabled-background:var(--p-surface-700);--p-form-field-filled-background:var(--p-surface-800);--p-form-field-filled-hover-background:var(--p-surface-800);--p-form-field-filled-focus-background:var(--p-surface-800);--p-form-field-border-color:var(--p-surface-600);--p-form-field-hover-border-color:var(--p-surface-500);--p-form-field-focus-border-color:var(--p-primary-color);--p-form-field-invalid-border-color:var(--p-red-300);--p-form-field-color:var(--p-surface-0);--p-form-field-disabled-color:var(--p-surface-400);--p-form-field-placeholder-color:var(--p-surface-400);--p-form-field-invalid-placeholder-color:var(--p-red-400);--p-form-field-float-label-color:var(--p-surface-400);--p-form-field-float-label-focus-color:var(--p-primary-color);--p-form-field-float-label-active-color:var(--p-surface-400);--p-form-field-float-label-invalid-color:var(--p-form-field-invalid-placeholder-color);--p-form-field-icon-color:var(--p-surface-400);--p-form-field-shadow:0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(18,18,23,0.05);--p-mask-background:rgba(0,0,0,0.6);--p-mask-color:var(--p-surface-200);--p-highlight-background:color-mix(in srgb,var(--p-primary-400),transparent 84%);--p-highlight-focus-background:color-mix(in srgb,var(--p-primary-400),transparent 76%);--p-highlight-color:rgba(255,255,255,.87);--p-highlight-focus-color:rgba(255,255,255,.87);--p-primary-color:var(--p-primary-400);--p-primary-contrast-color:var(--p-surface-900);--p-primary-hover-color:var(--p-primary-300);--p-primary-active-color:var(--p-primary-200);--p-surface-0:#ffffff;--p-surface-50:var(--p-zinc-50);--p-surface-100:var(--p-zinc-100);--p-surface-200:var(--p-zinc-200);--p-surface-300:var(--p-zinc-300);--p-surface-400:var(--p-zinc-400);--p-surface-500:var(--p-zinc-500);--p-surface-600:var(--p-zinc-600);--p-surface-700:var(--p-zinc-700);--p-surface-800:var(--p-zinc-800);--p-surface-900:var(--p-zinc-900);--p-surface-950:var(--p-zinc-950);}"
-    },
-    {
-        "name": "global-variables",
-        "value": ":root,:host{color-scheme:light}.p-dark{color-scheme:dark}"
-    },
-    {
-        "name": "global-style",
-        "value": "*,::before,::after{box-sizing:border-box;}.p-collapsible-enter-active{animation:p-animate-collapsible-expand 0.2s ease-out;overflow:hidden;}.p-collapsible-leave-active{animation:p-animate-collapsible-collapse 0.2s ease-out;overflow:hidden;}@keyframes p-animate-collapsible-expand{from{grid-template-rows:0fr;}to{grid-template-rows:1fr;}} @keyframes p-animate-collapsible-collapse{from{grid-template-rows:1fr;}to{grid-template-rows:0fr;}} .p-disabled,.p-disabled *{cursor:default;pointer-events:none;user-select:none;}.p-disabled,.p-component:disabled{opacity:var(--p-disabled-opacity);}.pi{font-size:var(--p-icon-size);}.p-icon{width:var(--p-icon-size);height:var(--p-icon-size);}.p-overlay-mask{background:var(--px-mask-background,var(--p-mask-background));color:var(--p-mask-color);position:fixed;top:0;left:0;width:100%;height:100%;}.p-overlay-mask-enter-active{animation:p-animate-overlay-mask-enter var(--p-mask-transition-duration) forwards;}.p-overlay-mask-leave-active{animation:p-animate-overlay-mask-leave var(--p-mask-transition-duration) forwards;}@keyframes p-animate-overlay-mask-enter{from{background:transparent;}to{background:var(--px-mask-background,var(--p-mask-background));}} @keyframes p-animate-overlay-mask-leave{from{background:var(--px-mask-background,var(--p-mask-background));}to{background:transparent;}} .p-anchored-overlay-enter-active{animation:p-animate-anchored-overlay-enter 300ms cubic-bezier(.19,1,.22,1);}.p-anchored-overlay-leave-active{animation:p-animate-anchored-overlay-leave 300ms cubic-bezier(.19,1,.22,1);}@keyframes p-animate-anchored-overlay-enter{from{opacity:0;transform:scale(0.93);}} @keyframes p-animate-anchored-overlay-leave{to{opacity:0;transform:scale(0.93);}} li.p-autocomplete-option,div.p-cascadeselect-option-content,li.p-listbox-option,li.p-multiselect-option,li.p-select-option,li.p-listbox-option,div.p-tree-node-content,li.p-datatable-filter-constraint,.p-datatable .p-datatable-tbody > tr,.p-treetable .p-treetable-tbody > tr,div.p-menu-item-content,div.p-tieredmenu-item-content,div.p-contextmenu-item-content,div.p-menubar-item-content,div.p-megamenu-item-content,div.p-panelmenu-header-content,div.p-panelmenu-item-content,th.p-datatable-header-cell,th.p-treetable-header-cell,thead.p-datatable-thead > tr > th,.p-treetable thead.p-treetable-thead>tr>th{transition:none;}"
-    },
-    {
-        "name": "autocomplete-variables",
-        "value": ":root,:host{--p-autocomplete-empty-message-padding:var(--p-list-option-padding);--p-autocomplete-chip-border-radius:var(--p-border-radius-sm);--p-autocomplete-dropdown-width:2.5rem;--p-autocomplete-dropdown-border-color:var(--p-form-field-border-color);--p-autocomplete-dropdown-hover-border-color:var(--p-form-field-border-color);--p-autocomplete-dropdown-active-border-color:var(--p-form-field-border-color);--p-autocomplete-dropdown-border-radius:var(--p-form-field-border-radius);--p-autocomplete-dropdown-focus-ring-width:var(--p-focus-ring-width);--p-autocomplete-dropdown-focus-ring-style:var(--p-focus-ring-style);--p-autocomplete-dropdown-focus-ring-color:var(--p-focus-ring-color);--p-autocomplete-dropdown-focus-ring-offset:var(--p-focus-ring-offset);--p-autocomplete-dropdown-focus-ring-shadow:var(--p-focus-ring-shadow);--p-autocomplete-dropdown-lg-width:3rem;--p-autocomplete-dropdown-sm-width:2rem;--p-autocomplete-option-group-background:var(--p-list-option-group-background);--p-autocomplete-option-group-color:var(--p-list-option-group-color);--p-autocomplete-option-group-font-weight:var(--p-list-option-group-font-weight);--p-autocomplete-option-group-padding:var(--p-list-option-group-padding);--p-autocomplete-option-focus-background:var(--p-list-option-focus-background);--p-autocomplete-option-selected-background:var(--p-list-option-selected-background);--p-autocomplete-option-selected-focus-background:var(--p-list-option-selected-focus-background);--p-autocomplete-option-color:var(--p-list-option-color);--p-autocomplete-option-focus-color:var(--p-list-option-focus-color);--p-autocomplete-option-selected-color:var(--p-list-option-selected-color);--p-autocomplete-option-selected-focus-color:var(--p-list-option-selected-focus-color);--p-autocomplete-option-padding:var(--p-list-option-padding);--p-autocomplete-option-border-radius:var(--p-list-option-border-radius);--p-autocomplete-list-padding:var(--p-list-padding);--p-autocomplete-list-gap:var(--p-list-gap);--p-autocomplete-overlay-background:var(--p-overlay-select-background);--p-autocomplete-overlay-border-color:var(--p-overlay-select-border-color);--p-autocomplete-overlay-border-radius:var(--p-overlay-select-border-radius);--p-autocomplete-overlay-color:var(--p-overlay-select-color);--p-autocomplete-overlay-shadow:var(--p-overlay-select-shadow);--p-autocomplete-background:var(--p-form-field-background);--p-autocomplete-disabled-background:var(--p-form-field-disabled-background);--p-autocomplete-filled-background:var(--p-form-field-filled-background);--p-autocomplete-filled-hover-background:var(--p-form-field-filled-hover-background);--p-autocomplete-filled-focus-background:var(--p-form-field-filled-focus-background);--p-autocomplete-border-color:var(--p-form-field-border-color);--p-autocomplete-hover-border-color:var(--p-form-field-hover-border-color);--p-autocomplete-focus-border-color:var(--p-form-field-focus-border-color);--p-autocomplete-invalid-border-color:var(--p-form-field-invalid-border-color);--p-autocomplete-color:var(--p-form-field-color);--p-autocomplete-disabled-color:var(--p-form-field-disabled-color);--p-autocomplete-placeholder-color:var(--p-form-field-placeholder-color);--p-autocomplete-invalid-placeholder-color:var(--p-form-field-invalid-placeholder-color);--p-autocomplete-shadow:var(--p-form-field-shadow);--p-autocomplete-padding-x:var(--p-form-field-padding-x);--p-autocomplete-padding-y:var(--p-form-field-padding-y);--p-autocomplete-border-radius:var(--p-form-field-border-radius);--p-autocomplete-transition-duration:var(--p-form-field-transition-duration);--p-autocomplete-focus-ring-width:var(--p-form-field-focus-ring-width);--p-autocomplete-focus-ring-style:var(--p-form-field-focus-ring-style);--p-autocomplete-focus-ring-color:var(--p-form-field-focus-ring-color);--p-autocomplete-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-autocomplete-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);--p-autocomplete-dropdown-background:var(--p-surface-100);--p-autocomplete-dropdown-hover-background:var(--p-surface-200);--p-autocomplete-dropdown-active-background:var(--p-surface-300);--p-autocomplete-dropdown-color:var(--p-surface-600);--p-autocomplete-dropdown-hover-color:var(--p-surface-700);--p-autocomplete-dropdown-active-color:var(--p-surface-800);--p-autocomplete-chip-focus-background:var(--p-surface-200);--p-autocomplete-chip-focus-color:var(--p-surface-800);}.p-dark{--p-autocomplete-dropdown-background:var(--p-surface-800);--p-autocomplete-dropdown-hover-background:var(--p-surface-700);--p-autocomplete-dropdown-active-background:var(--p-surface-600);--p-autocomplete-dropdown-color:var(--p-surface-300);--p-autocomplete-dropdown-hover-color:var(--p-surface-200);--p-autocomplete-dropdown-active-color:var(--p-surface-100);--p-autocomplete-chip-focus-background:var(--p-surface-700);--p-autocomplete-chip-focus-color:var(--p-surface-0);}"
-    },
-    {
-        "name": "autocomplete-style",
-        "value": ".p-autocomplete{display:inline-flex;}.p-autocomplete-loader{position:absolute;top:50%;margin-top:-0.5rem;inset-inline-end:var(--p-autocomplete-padding-x);}.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader{inset-inline-end:calc(var(--p-autocomplete-dropdown-width) + var(--p-autocomplete-padding-x));}.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input{flex:1 1 auto;width:1%;}.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple{border-start-end-radius:0;border-end-end-radius:0;}.p-autocomplete-dropdown{cursor:pointer;display:inline-flex;user-select:none;align-items:center;justify-content:center;overflow:hidden;position:relative;width:var(--p-autocomplete-dropdown-width);border-start-end-radius:var(--p-autocomplete-dropdown-border-radius);border-end-end-radius:var(--p-autocomplete-dropdown-border-radius);background:var(--p-autocomplete-dropdown-background);border:1px solid var(--p-autocomplete-dropdown-border-color);border-inline-start:0 none;color:var(--p-autocomplete-dropdown-color);transition:background var(--p-autocomplete-transition-duration),color var(--p-autocomplete-transition-duration),border-color var(--p-autocomplete-transition-duration),outline-color var(--p-autocomplete-transition-duration),box-shadow var(--p-autocomplete-transition-duration);outline-color:transparent;}.p-autocomplete-dropdown:not(:disabled):hover{background:var(--p-autocomplete-dropdown-hover-background);border-color:var(--p-autocomplete-dropdown-hover-border-color);color:var(--p-autocomplete-dropdown-hover-color);}.p-autocomplete-dropdown:not(:disabled):active{background:var(--p-autocomplete-dropdown-active-background);border-color:var(--p-autocomplete-dropdown-active-border-color);color:var(--p-autocomplete-dropdown-active-color);}.p-autocomplete-dropdown:focus-visible{box-shadow:var(--p-autocomplete-dropdown-focus-ring-shadow);outline:var(--p-autocomplete-dropdown-focus-ring-width) var(--p-autocomplete-dropdown-focus-ring-style) var(--p-autocomplete-dropdown-focus-ring-color);outline-offset:var(--p-autocomplete-dropdown-focus-ring-offset);}.p-autocomplete-overlay{position:absolute;top:0;left:0;background:var(--p-autocomplete-overlay-background);color:var(--p-autocomplete-overlay-color);border:1px solid var(--p-autocomplete-overlay-border-color);border-radius:var(--p-autocomplete-overlay-border-radius);box-shadow:var(--p-autocomplete-overlay-shadow);min-width:100%;}.p-autocomplete-list-container{overflow:auto;}.p-autocomplete-list{margin:0;list-style-type:none;display:flex;flex-direction:column;gap:var(--p-autocomplete-list-gap);padding:var(--p-autocomplete-list-padding);}.p-autocomplete-option{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;display:flex;align-items:center;padding:var(--p-autocomplete-option-padding);border:0 none;color:var(--p-autocomplete-option-color);background:transparent;transition:background var(--p-autocomplete-transition-duration),color var(--p-autocomplete-transition-duration),border-color var(--p-autocomplete-transition-duration);border-radius:var(--p-autocomplete-option-border-radius);}.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus{background:var(--p-autocomplete-option-focus-background);color:var(--p-autocomplete-option-focus-color);}.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled):hover{background:var(--p-autocomplete-option-focus-background);color:var(--p-autocomplete-option-focus-color);}.p-autocomplete-option-selected{background:var(--p-autocomplete-option-selected-background);color:var(--p-autocomplete-option-selected-color);}.p-autocomplete-option-selected.p-focus{background:var(--p-autocomplete-option-selected-focus-background);color:var(--p-autocomplete-option-selected-focus-color);}.p-autocomplete-option-group{margin:0;padding:var(--p-autocomplete-option-group-padding);color:var(--p-autocomplete-option-group-color);background:var(--p-autocomplete-option-group-background);font-weight:var(--p-autocomplete-option-group-font-weight);}.p-autocomplete-input-multiple{margin:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap;padding:calc(var(--p-autocomplete-padding-y) / 2) var(--p-autocomplete-padding-x);gap:calc(var(--p-autocomplete-padding-y) / 2);color:var(--p-autocomplete-color);background:var(--p-autocomplete-background);border:1px solid var(--p-autocomplete-border-color);border-radius:var(--p-autocomplete-border-radius);width:100%;transition:background var(--p-autocomplete-transition-duration),color var(--p-autocomplete-transition-duration),border-color var(--p-autocomplete-transition-duration),outline-color var(--p-autocomplete-transition-duration),box-shadow var(--p-autocomplete-transition-duration);outline-color:transparent;box-shadow:var(--p-autocomplete-shadow);}.p-autocomplete-input-multiple.p-disabled{opacity:1;background:var(--p-autocomplete-disabled-background);color:var(--p-autocomplete-disabled-color);}.p-autocomplete-input-multiple:not(.p-disabled):hover{border-color:var(--p-autocomplete-hover-border-color);}.p-autocomplete.p-focus .p-autocomplete-input-multiple:not(.p-disabled){border-color:var(--p-autocomplete-focus-border-color);box-shadow:var(--p-autocomplete-focus-ring-shadow);outline:var(--p-autocomplete-focus-ring-width) var(--p-autocomplete-focus-ring-style) var(--p-autocomplete-focus-ring-color);outline-offset:var(--p-autocomplete-focus-ring-offset);}.p-autocomplete.p-invalid .p-autocomplete-input-multiple{border-color:var(--p-autocomplete-invalid-border-color);}.p-variant-filled.p-autocomplete-input-multiple{background:var(--p-autocomplete-filled-background);}.p-autocomplete-input-multiple.p-variant-filled:not(.p-disabled):hover{background:var(--p-autocomplete-filled-hover-background);}.p-autocomplete.p-focus .p-autocomplete-input-multiple.p-variant-filled:not(.p-disabled){background:var(--p-autocomplete-filled-focus-background);}.p-autocomplete-chip.p-chip{padding-block-start:calc(var(--p-autocomplete-padding-y) / 2);padding-block-end:calc(var(--p-autocomplete-padding-y) / 2);border-radius:var(--p-autocomplete-chip-border-radius);}.p-autocomplete-input-multiple:has(.p-autocomplete-chip){padding-inline-start:calc(var(--p-autocomplete-padding-y) / 2);padding-inline-end:calc(var(--p-autocomplete-padding-y) / 2);}.p-autocomplete-chip-item.p-focus .p-autocomplete-chip{background:var(--p-autocomplete-chip-focus-background);color:var(--p-autocomplete-chip-focus-color);}.p-autocomplete-input-chip{flex:1 1 auto;display:inline-flex;padding-block-start:calc(var(--p-autocomplete-padding-y) / 2);padding-block-end:calc(var(--p-autocomplete-padding-y) / 2);}.p-autocomplete-input-chip input{border:0 none;outline:0 none;background:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%;font-family:inherit;font-feature-settings:inherit;font-size:1rem;color:inherit;}.p-autocomplete-input-chip input::placeholder{color:var(--p-autocomplete-placeholder-color);}.p-autocomplete.p-invalid .p-autocomplete-input-chip input::placeholder{color:var(--p-autocomplete-invalid-placeholder-color);}.p-autocomplete-empty-message{padding:var(--p-autocomplete-empty-message-padding);}.p-autocomplete-fluid{display:flex;}.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input{width:1%;}.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown{width:var(--p-autocomplete-dropdown-sm-width);}.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown .p-icon{font-size:var(--p-form-field-sm-font-size);width:var(--p-form-field-sm-font-size);height:var(--p-form-field-sm-font-size);}.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown{width:var(--p-autocomplete-dropdown-lg-width);}.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown .p-icon{font-size:var(--p-form-field-lg-font-size);width:var(--p-form-field-lg-font-size);height:var(--p-form-field-lg-font-size);}.p-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-0.5rem;cursor:pointer;color:var(--p-form-field-icon-color);inset-inline-end:var(--p-autocomplete-padding-x);}.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-clear-icon{inset-inline-end:calc(var(--p-autocomplete-padding-x) + var(--p-autocomplete-dropdown-width));}.p-autocomplete:has(.p-autocomplete-clear-icon) .p-autocomplete-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-inputgroup .p-autocomplete-dropdown{border-radius:0;}.p-inputgroup > .p-autocomplete:last-child:has(.p-autocomplete-dropdown) > .p-autocomplete-input{border-start-end-radius:0;border-end-end-radius:0;}.p-inputgroup > .p-autocomplete:last-child .p-autocomplete-dropdown{border-start-end-radius:var(--p-autocomplete-dropdown-border-radius);border-end-end-radius:var(--p-autocomplete-dropdown-border-radius);}"
-    },
-    {
-        "name": "cascadeselect-variables",
-        "value": ":root,:host{--p-cascadeselect-clear-icon-color:var(--p-form-field-icon-color);--p-cascadeselect-option-focus-background:var(--p-list-option-focus-background);--p-cascadeselect-option-selected-background:var(--p-list-option-selected-background);--p-cascadeselect-option-selected-focus-background:var(--p-list-option-selected-focus-background);--p-cascadeselect-option-color:var(--p-list-option-color);--p-cascadeselect-option-focus-color:var(--p-list-option-focus-color);--p-cascadeselect-option-selected-color:var(--p-list-option-selected-color);--p-cascadeselect-option-selected-focus-color:var(--p-list-option-selected-focus-color);--p-cascadeselect-option-padding:var(--p-list-option-padding);--p-cascadeselect-option-border-radius:var(--p-list-option-border-radius);--p-cascadeselect-option-icon-color:var(--p-list-option-icon-color);--p-cascadeselect-option-icon-focus-color:var(--p-list-option-icon-focus-color);--p-cascadeselect-option-icon-size:0.875rem;--p-cascadeselect-list-padding:var(--p-list-padding);--p-cascadeselect-list-gap:var(--p-list-gap);--p-cascadeselect-list-mobile-indent:1rem;--p-cascadeselect-overlay-background:var(--p-overlay-select-background);--p-cascadeselect-overlay-border-color:var(--p-overlay-select-border-color);--p-cascadeselect-overlay-border-radius:var(--p-overlay-select-border-radius);--p-cascadeselect-overlay-color:var(--p-overlay-select-color);--p-cascadeselect-overlay-shadow:var(--p-overlay-select-shadow);--p-cascadeselect-dropdown-width:2.5rem;--p-cascadeselect-dropdown-color:var(--p-form-field-icon-color);--p-cascadeselect-background:var(--p-form-field-background);--p-cascadeselect-disabled-background:var(--p-form-field-disabled-background);--p-cascadeselect-filled-background:var(--p-form-field-filled-background);--p-cascadeselect-filled-hover-background:var(--p-form-field-filled-hover-background);--p-cascadeselect-filled-focus-background:var(--p-form-field-filled-focus-background);--p-cascadeselect-border-color:var(--p-form-field-border-color);--p-cascadeselect-hover-border-color:var(--p-form-field-hover-border-color);--p-cascadeselect-focus-border-color:var(--p-form-field-focus-border-color);--p-cascadeselect-invalid-border-color:var(--p-form-field-invalid-border-color);--p-cascadeselect-color:var(--p-form-field-color);--p-cascadeselect-disabled-color:var(--p-form-field-disabled-color);--p-cascadeselect-placeholder-color:var(--p-form-field-placeholder-color);--p-cascadeselect-invalid-placeholder-color:var(--p-form-field-invalid-placeholder-color);--p-cascadeselect-shadow:var(--p-form-field-shadow);--p-cascadeselect-padding-x:var(--p-form-field-padding-x);--p-cascadeselect-padding-y:var(--p-form-field-padding-y);--p-cascadeselect-border-radius:var(--p-form-field-border-radius);--p-cascadeselect-transition-duration:var(--p-form-field-transition-duration);--p-cascadeselect-lg-font-size:var(--p-form-field-lg-font-size);--p-cascadeselect-lg-padding-x:var(--p-form-field-lg-padding-x);--p-cascadeselect-lg-padding-y:var(--p-form-field-lg-padding-y);--p-cascadeselect-sm-font-size:var(--p-form-field-sm-font-size);--p-cascadeselect-sm-padding-x:var(--p-form-field-sm-padding-x);--p-cascadeselect-sm-padding-y:var(--p-form-field-sm-padding-y);--p-cascadeselect-focus-ring-width:var(--p-form-field-focus-ring-width);--p-cascadeselect-focus-ring-style:var(--p-form-field-focus-ring-style);--p-cascadeselect-focus-ring-color:var(--p-form-field-focus-ring-color);--p-cascadeselect-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-cascadeselect-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);}"
-    },
-    {
-        "name": "cascadeselect-style",
-        "value": ".p-cascadeselect{display:inline-flex;cursor:pointer;position:relative;user-select:none;background:var(--p-cascadeselect-background);border:1px solid var(--p-cascadeselect-border-color);transition:background var(--p-cascadeselect-transition-duration),color var(--p-cascadeselect-transition-duration),border-color var(--p-cascadeselect-transition-duration),outline-color var(--p-cascadeselect-transition-duration),box-shadow var(--p-cascadeselect-transition-duration);border-radius:var(--p-cascadeselect-border-radius);outline-color:transparent;box-shadow:var(--p-cascadeselect-shadow);}.p-cascadeselect:not(.p-disabled):hover{border-color:var(--p-cascadeselect-hover-border-color);}.p-cascadeselect:not(.p-disabled).p-focus{border-color:var(--p-cascadeselect-focus-border-color);box-shadow:var(--p-cascadeselect-focus-ring-shadow);outline:var(--p-cascadeselect-focus-ring-width) var(--p-cascadeselect-focus-ring-style) var(--p-cascadeselect-focus-ring-color);outline-offset:var(--p-cascadeselect-focus-ring-offset);}.p-cascadeselect.p-variant-filled{background:var(--p-cascadeselect-filled-background);}.p-cascadeselect.p-variant-filled:not(.p-disabled):hover{background:var(--p-cascadeselect-filled-hover-background);}.p-cascadeselect.p-variant-filled.p-focus{background:var(--p-cascadeselect-filled-focus-background);}.p-cascadeselect.p-invalid{border-color:var(--p-cascadeselect-invalid-border-color);}.p-cascadeselect.p-disabled{opacity:1;background:var(--p-cascadeselect-disabled-background);}.p-cascadeselect-dropdown{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:var(--p-cascadeselect-dropdown-color);width:var(--p-cascadeselect-dropdown-width);border-start-end-radius:var(--p-border-radius-md);border-end-end-radius:var(--p-border-radius-md);}.p-cascadeselect-clear-icon{align-self:center;color:var(--p-cascadeselect-clear-icon-color);inset-inline-end:var(--p-cascadeselect-dropdown-width);}.p-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer;padding:var(--p-cascadeselect-padding-y) var(--p-cascadeselect-padding-x);background:transparent;border:0 none;outline:0 none;}.p-cascadeselect-label.p-placeholder{color:var(--p-cascadeselect-placeholder-color);}.p-cascadeselect.p-invalid .p-cascadeselect-label.p-placeholder{color:var(--p-cascadeselect-invalid-placeholder-color);}.p-cascadeselect.p-disabled .p-cascadeselect-label{color:var(--p-cascadeselect-disabled-color);}.p-cascadeselect-label-empty{overflow:hidden;visibility:hidden;}.p-cascadeselect-overlay{background:var(--p-cascadeselect-overlay-background);color:var(--p-cascadeselect-overlay-color);border:1px solid var(--p-cascadeselect-overlay-border-color);border-radius:var(--p-cascadeselect-overlay-border-radius);box-shadow:var(--p-cascadeselect-overlay-shadow);}.p-cascadeselect .p-cascadeselect-overlay{min-width:100%;}.p-cascadeselect-option-list{display:none;min-width:100%;position:absolute;z-index:1;}.p-cascadeselect-list{min-width:100%;margin:0;padding:0;list-style-type:none;padding:var(--p-cascadeselect-list-padding);display:flex;flex-direction:column;gap:var(--p-cascadeselect-list-gap);}.p-cascadeselect-option{cursor:pointer;font-weight:normal;white-space:nowrap;border:0 none;color:var(--p-cascadeselect-option-color);background:transparent;border-radius:var(--p-cascadeselect-option-border-radius);}.p-cascadeselect-option-active{overflow:visible;}.p-cascadeselect-option-active > .p-cascadeselect-option-content{background:var(--p-cascadeselect-option-focus-background);color:var(--p-cascadeselect-option-focus-color);}.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content{background:var(--p-cascadeselect-option-focus-background);color:var(--p-cascadeselect-option-focus-color);}.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled):hover > .p-cascadeselect-option-content{background:var(--p-cascadeselect-option-focus-background);color:var(--p-cascadeselect-option-focus-color);}.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content > .p-cascadeselect-group-icon-container > .p-cascadeselect-group-icon{color:var(--p-cascadeselect-option-icon-focus-color);}.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled):hover > .p-cascadeselect-option-content > .p-cascadeselect-group-icon-container > .p-cascadeselect-group-icon{color:var(--p-cascadeselect-option-icon-focus-color);}.p-cascadeselect-option-selected > .p-cascadeselect-option-content{background:var(--p-cascadeselect-option-selected-background);color:var(--p-cascadeselect-option-selected-color);}.p-cascadeselect-option-selected.p-focus > .p-cascadeselect-option-content{background:var(--p-cascadeselect-option-selected-focus-background);color:var(--p-cascadeselect-option-selected-focus-color);}.p-cascadeselect-option-active > .p-cascadeselect-option-list{inset-inline-start:100%;inset-block-start:0;}.p-cascadeselect-option-content{display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;padding:var(--p-cascadeselect-option-padding);border-radius:var(--p-cascadeselect-option-border-radius);transition:background var(--p-cascadeselect-transition-duration),color var(--p-cascadeselect-transition-duration),border-color var(--p-cascadeselect-transition-duration),box-shadow var(--p-cascadeselect-transition-duration),outline-color var(--p-cascadeselect-transition-duration);}.p-cascadeselect-group-icon{font-size:var(--p-cascadeselect-option-icon-size);width:var(--p-cascadeselect-option-icon-size);height:var(--p-cascadeselect-option-icon-size);color:var(--p-cascadeselect-option-icon-color);}.p-cascadeselect-group-icon:dir(rtl){transform:rotate(180deg);}.p-cascadeselect-mobile-active .p-cascadeselect-option-list{position:static;box-shadow:none;border:0 none;padding-inline-start:var(--p-tieredmenu-submenu-mobile-indent);padding-inline-end:0;}.p-cascadeselect-mobile-active .p-cascadeselect-group-icon{transition:transform 0.2s;transform:rotate(90deg);}.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon{transform:rotate(-90deg);}.p-cascadeselect-sm .p-cascadeselect-label{font-size:var(--p-cascadeselect-sm-font-size);padding-block:var(--p-cascadeselect-sm-padding-y);padding-inline:var(--p-cascadeselect-sm-padding-x);}.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon{font-size:var(--p-cascadeselect-sm-font-size);width:var(--p-cascadeselect-sm-font-size);height:var(--p-cascadeselect-sm-font-size);}.p-cascadeselect-lg .p-cascadeselect-label{font-size:var(--p-cascadeselect-lg-font-size);padding-block:var(--p-cascadeselect-lg-padding-y);padding-inline:var(--p-cascadeselect-lg-padding-x);}.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon{font-size:var(--p-cascadeselect-lg-font-size);width:var(--p-cascadeselect-lg-font-size);height:var(--p-cascadeselect-lg-font-size);}.p-cascadeselect-fluid{display:flex;}.p-cascadeselect-fluid .p-cascadeselect-label{width:1%;}.p-cascadeselect-fluid .p-cascadeselect-overlay .p-cascadeselect-overlay{min-width:12.5rem;}"
-    },
-    {
-        "name": "checkbox-variables",
-        "value": ":root,:host{--p-checkbox-icon-size:0.875rem;--p-checkbox-icon-color:var(--p-form-field-color);--p-checkbox-icon-checked-color:var(--p-primary-contrast-color);--p-checkbox-icon-checked-hover-color:var(--p-primary-contrast-color);--p-checkbox-icon-disabled-color:var(--p-form-field-disabled-color);--p-checkbox-icon-lg-size:1rem;--p-checkbox-icon-sm-size:0.75rem;--p-checkbox-border-radius:var(--p-border-radius-sm);--p-checkbox-width:1.25rem;--p-checkbox-height:1.25rem;--p-checkbox-background:var(--p-form-field-background);--p-checkbox-checked-background:var(--p-primary-color);--p-checkbox-checked-hover-background:var(--p-primary-hover-color);--p-checkbox-disabled-background:var(--p-form-field-disabled-background);--p-checkbox-filled-background:var(--p-form-field-filled-background);--p-checkbox-border-color:var(--p-form-field-border-color);--p-checkbox-hover-border-color:var(--p-form-field-hover-border-color);--p-checkbox-focus-border-color:var(--p-form-field-border-color);--p-checkbox-checked-border-color:var(--p-primary-color);--p-checkbox-checked-hover-border-color:var(--p-primary-hover-color);--p-checkbox-checked-focus-border-color:var(--p-primary-color);--p-checkbox-checked-disabled-border-color:var(--p-form-field-border-color);--p-checkbox-invalid-border-color:var(--p-form-field-invalid-border-color);--p-checkbox-shadow:var(--p-form-field-shadow);--p-checkbox-transition-duration:var(--p-form-field-transition-duration);--p-checkbox-lg-width:1.5rem;--p-checkbox-lg-height:1.5rem;--p-checkbox-sm-width:1rem;--p-checkbox-sm-height:1rem;--p-checkbox-focus-ring-width:var(--p-focus-ring-width);--p-checkbox-focus-ring-style:var(--p-focus-ring-style);--p-checkbox-focus-ring-color:var(--p-focus-ring-color);--p-checkbox-focus-ring-offset:var(--p-focus-ring-offset);--p-checkbox-focus-ring-shadow:var(--p-focus-ring-shadow);}"
-    },
-    {
-        "name": "checkbox-style",
-        "value": ".p-checkbox{position:relative;display:inline-flex;user-select:none;vertical-align:bottom;width:var(--p-checkbox-width);height:var(--p-checkbox-height);}.p-checkbox-input{cursor:pointer;appearance:none;position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:1;outline:0 none;border:1px solid transparent;border-radius:var(--p-checkbox-border-radius);}.p-checkbox-box{display:flex;justify-content:center;align-items:center;border-radius:var(--p-checkbox-border-radius);border:1px solid var(--p-checkbox-border-color);background:var(--p-checkbox-background);width:var(--p-checkbox-width);height:var(--p-checkbox-height);transition:background var(--p-checkbox-transition-duration),color var(--p-checkbox-transition-duration),border-color var(--p-checkbox-transition-duration),box-shadow var(--p-checkbox-transition-duration),outline-color var(--p-checkbox-transition-duration);outline-color:transparent;box-shadow:var(--p-checkbox-shadow);}.p-checkbox-icon{transition-duration:var(--p-checkbox-transition-duration);color:var(--p-checkbox-icon-color);font-size:var(--p-checkbox-icon-size);width:var(--p-checkbox-icon-size);height:var(--p-checkbox-icon-size);}.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-hover-border-color);}.p-checkbox-checked .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background);}.p-checkbox-checked .p-checkbox-icon{color:var(--p-checkbox-icon-checked-color);}.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{background:var(--p-checkbox-checked-hover-background);border-color:var(--p-checkbox-checked-hover-border-color);}.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon{color:var(--p-checkbox-icon-checked-hover-color);}.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box{border-color:var(--p-checkbox-focus-border-color);box-shadow:var(--p-checkbox-focus-ring-shadow);outline:var(--p-checkbox-focus-ring-width) var(--p-checkbox-focus-ring-style) var(--p-checkbox-focus-ring-color);outline-offset:var(--p-checkbox-focus-ring-offset);}.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box{border-color:var(--p-checkbox-checked-focus-border-color);}.p-checkbox.p-invalid > .p-checkbox-box{border-color:var(--p-checkbox-invalid-border-color);}.p-checkbox.p-variant-filled .p-checkbox-box{background:var(--p-checkbox-filled-background);}.p-checkbox-checked.p-variant-filled .p-checkbox-box{background:var(--p-checkbox-checked-background);}.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{background:var(--p-checkbox-checked-hover-background);}.p-checkbox.p-disabled{opacity:1;}.p-checkbox.p-disabled .p-checkbox-box{background:var(--p-checkbox-disabled-background);border-color:var(--p-checkbox-checked-disabled-border-color);}.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon{color:var(--p-checkbox-icon-disabled-color);}.p-checkbox-sm,.p-checkbox-sm .p-checkbox-box{width:var(--p-checkbox-sm-width);height:var(--p-checkbox-sm-height);}.p-checkbox-sm .p-checkbox-icon{font-size:var(--p-checkbox-icon-sm-size);width:var(--p-checkbox-icon-sm-size);height:var(--p-checkbox-icon-sm-size);}.p-checkbox-lg,.p-checkbox-lg .p-checkbox-box{width:var(--p-checkbox-lg-width);height:var(--p-checkbox-lg-height);}.p-checkbox-lg .p-checkbox-icon{font-size:var(--p-checkbox-icon-lg-size);width:var(--p-checkbox-icon-lg-size);height:var(--p-checkbox-icon-lg-size);}"
-    },
-    {
-        "name": "checkboxgroup-style",
-        "value": ".p-checkbox-group{display:inline-flex;}"
-    },
-    {
-        "name": "colorpicker-variables",
-        "value": ":root,:host{--p-colorpicker-panel-shadow:var(--p-overlay-popover-shadow);--p-colorpicker-panel-border-radius:var(--p-overlay-popover-border-radius);--p-colorpicker-preview-width:1.5rem;--p-colorpicker-preview-height:1.5rem;--p-colorpicker-preview-border-radius:var(--p-form-field-border-radius);--p-colorpicker-preview-focus-ring-width:var(--p-focus-ring-width);--p-colorpicker-preview-focus-ring-style:var(--p-focus-ring-style);--p-colorpicker-preview-focus-ring-color:var(--p-focus-ring-color);--p-colorpicker-preview-focus-ring-offset:var(--p-focus-ring-offset);--p-colorpicker-preview-focus-ring-shadow:var(--p-focus-ring-shadow);--p-colorpicker-transition-duration:var(--p-transition-duration);--p-colorpicker-handle-color:var(--p-surface-0);--p-colorpicker-panel-background:var(--p-surface-800);--p-colorpicker-panel-border-color:var(--p-surface-900);}.p-dark{--p-colorpicker-handle-color:var(--p-surface-0);--p-colorpicker-panel-background:var(--p-surface-900);--p-colorpicker-panel-border-color:var(--p-surface-700);}"
-    },
-    {
-        "name": "colorpicker-style",
-        "value": ".p-colorpicker{display:inline-block;position:relative;}.p-colorpicker-dragging{cursor:pointer;}.p-colorpicker-preview{width:var(--p-colorpicker-preview-width);height:var(--p-colorpicker-preview-height);padding:0;border:0 none;border-radius:var(--p-colorpicker-preview-border-radius);transition:background var(--p-colorpicker-transition-duration),color var(--p-colorpicker-transition-duration),border-color var(--p-colorpicker-transition-duration),outline-color var(--p-colorpicker-transition-duration),box-shadow var(--p-colorpicker-transition-duration);outline-color:transparent;cursor:pointer;}.p-colorpicker-preview:enabled:focus-visible{border-color:var(--p-colorpicker-preview-focus-border-color);box-shadow:var(--p-colorpicker-preview-focus-ring-shadow);outline:var(--p-colorpicker-preview-focus-ring-width) var(--p-colorpicker-preview-focus-ring-style) var(--p-colorpicker-preview-focus-ring-color);outline-offset:var(--p-colorpicker-preview-focus-ring-offset);}.p-colorpicker-panel{background:var(--p-colorpicker-panel-background);border:1px solid var(--p-colorpicker-panel-border-color);border-radius:var(--p-colorpicker-panel-border-radius);box-shadow:var(--p-colorpicker-panel-shadow);width:193px;height:166px;position:absolute;top:0;left:0;}.p-colorpicker-panel-inline{box-shadow:none;position:static;}.p-colorpicker-content{position:relative;}.p-colorpicker-color-selector{width:150px;height:150px;inset-block-start:8px;inset-inline-start:8px;position:absolute;}.p-colorpicker-color-background{width:100%;height:100%;background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 100%),linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%);}.p-colorpicker-color-handle{position:absolute;inset-block-start:0px;inset-inline-start:150px;border-radius:100%;width:10px;height:10px;border-width:1px;border-style:solid;margin:-5px 0 0 -5px;cursor:pointer;opacity:0.85;border-color:var(--p-colorpicker-handle-color);}.p-colorpicker-hue{width:17px;height:150px;inset-block-start:8px;inset-inline-start:167px;position:absolute;opacity:0.85;background:linear-gradient(0deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);}.p-colorpicker-hue-handle{position:absolute;inset-block-start:150px;inset-inline-start:0px;width:21px;margin-inline-start:-2px;margin-block-start:-5px;height:10px;border-width:2px;border-style:solid;opacity:0.85;cursor:pointer;border-color:var(--p-colorpicker-handle-color);}"
-    },
-    {
-        "name": "datepicker-variables",
-        "value": ":root,:host{--p-datepicker-time-picker-padding:0.5rem 0 0 0;--p-datepicker-time-picker-border-color:var(--p-content-border-color);--p-datepicker-time-picker-gap:0.5rem;--p-datepicker-time-picker-button-gap:0.25rem;--p-datepicker-buttonbar-padding:0.5rem 0 0 0;--p-datepicker-buttonbar-border-color:var(--p-content-border-color);--p-datepicker-year-padding:0.375rem;--p-datepicker-year-border-radius:var(--p-content-border-radius);--p-datepicker-year-view-margin:0.5rem 0 0 0;--p-datepicker-month-padding:0.375rem;--p-datepicker-month-border-radius:var(--p-content-border-radius);--p-datepicker-month-view-margin:0.5rem 0 0 0;--p-datepicker-date-hover-background:var(--p-content-hover-background);--p-datepicker-date-selected-background:var(--p-primary-color);--p-datepicker-date-range-selected-background:var(--p-highlight-background);--p-datepicker-date-color:var(--p-content-color);--p-datepicker-date-hover-color:var(--p-content-hover-color);--p-datepicker-date-selected-color:var(--p-primary-contrast-color);--p-datepicker-date-range-selected-color:var(--p-highlight-color);--p-datepicker-date-width:2rem;--p-datepicker-date-height:2rem;--p-datepicker-date-border-radius:50%;--p-datepicker-date-padding:0.25rem;--p-datepicker-date-focus-ring-width:var(--p-focus-ring-width);--p-datepicker-date-focus-ring-style:var(--p-focus-ring-style);--p-datepicker-date-focus-ring-color:var(--p-focus-ring-color);--p-datepicker-date-focus-ring-offset:var(--p-focus-ring-offset);--p-datepicker-date-focus-ring-shadow:var(--p-focus-ring-shadow);--p-datepicker-week-day-padding:0.25rem;--p-datepicker-week-day-font-weight:500;--p-datepicker-week-day-color:var(--p-content-color);--p-datepicker-day-view-margin:0.5rem 0 0 0;--p-datepicker-group-border-color:var(--p-content-border-color);--p-datepicker-group-gap:var(--p-overlay-popover-padding);--p-datepicker-select-year-hover-background:var(--p-content-hover-background);--p-datepicker-select-year-color:var(--p-content-color);--p-datepicker-select-year-hover-color:var(--p-content-hover-color);--p-datepicker-select-year-padding:0.25rem 0.5rem;--p-datepicker-select-year-border-radius:var(--p-content-border-radius);--p-datepicker-select-month-hover-background:var(--p-content-hover-background);--p-datepicker-select-month-color:var(--p-content-color);--p-datepicker-select-month-hover-color:var(--p-content-hover-color);--p-datepicker-select-month-padding:0.25rem 0.5rem;--p-datepicker-select-month-border-radius:var(--p-content-border-radius);--p-datepicker-input-icon-color:var(--p-form-field-icon-color);--p-datepicker-dropdown-width:2.5rem;--p-datepicker-dropdown-border-color:var(--p-form-field-border-color);--p-datepicker-dropdown-hover-border-color:var(--p-form-field-border-color);--p-datepicker-dropdown-active-border-color:var(--p-form-field-border-color);--p-datepicker-dropdown-border-radius:var(--p-form-field-border-radius);--p-datepicker-dropdown-focus-ring-width:var(--p-focus-ring-width);--p-datepicker-dropdown-focus-ring-style:var(--p-focus-ring-style);--p-datepicker-dropdown-focus-ring-color:var(--p-focus-ring-color);--p-datepicker-dropdown-focus-ring-offset:var(--p-focus-ring-offset);--p-datepicker-dropdown-focus-ring-shadow:var(--p-focus-ring-shadow);--p-datepicker-dropdown-lg-width:3rem;--p-datepicker-dropdown-sm-width:2rem;--p-datepicker-title-gap:0.5rem;--p-datepicker-title-font-weight:500;--p-datepicker-header-background:var(--p-content-background);--p-datepicker-header-border-color:var(--p-content-border-color);--p-datepicker-header-color:var(--p-content-color);--p-datepicker-header-padding:0 0 0.5rem 0;--p-datepicker-panel-background:var(--p-content-background);--p-datepicker-panel-border-color:var(--p-content-border-color);--p-datepicker-panel-color:var(--p-content-color);--p-datepicker-panel-border-radius:var(--p-content-border-radius);--p-datepicker-panel-shadow:var(--p-overlay-popover-shadow);--p-datepicker-panel-padding:var(--p-overlay-popover-padding);--p-datepicker-transition-duration:var(--p-transition-duration);--p-datepicker-today-background:var(--p-surface-200);--p-datepicker-today-color:var(--p-surface-900);--p-datepicker-dropdown-background:var(--p-surface-100);--p-datepicker-dropdown-hover-background:var(--p-surface-200);--p-datepicker-dropdown-active-background:var(--p-surface-300);--p-datepicker-dropdown-color:var(--p-surface-600);--p-datepicker-dropdown-hover-color:var(--p-surface-700);--p-datepicker-dropdown-active-color:var(--p-surface-800);}.p-dark{--p-datepicker-today-background:var(--p-surface-700);--p-datepicker-today-color:var(--p-surface-0);--p-datepicker-dropdown-background:var(--p-surface-800);--p-datepicker-dropdown-hover-background:var(--p-surface-700);--p-datepicker-dropdown-active-background:var(--p-surface-600);--p-datepicker-dropdown-color:var(--p-surface-300);--p-datepicker-dropdown-hover-color:var(--p-surface-200);--p-datepicker-dropdown-active-color:var(--p-surface-100);}"
-    },
-    {
-        "name": "datepicker-style",
-        "value": ".p-datepicker{display:inline-flex;max-width:100%;}.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input{border-start-end-radius:0;border-end-end-radius:0;}.p-datepicker-dropdown{cursor:pointer;display:inline-flex;user-select:none;align-items:center;justify-content:center;overflow:hidden;position:relative;width:var(--p-datepicker-dropdown-width);border-start-end-radius:var(--p-datepicker-dropdown-border-radius);border-end-end-radius:var(--p-datepicker-dropdown-border-radius);background:var(--p-datepicker-dropdown-background);border:1px solid var(--p-datepicker-dropdown-border-color);border-inline-start:0 none;color:var(--p-datepicker-dropdown-color);transition:background var(--p-datepicker-transition-duration),color var(--p-datepicker-transition-duration),border-color var(--p-datepicker-transition-duration),outline-color var(--p-datepicker-transition-duration);outline-color:transparent;}.p-datepicker-dropdown:not(:disabled):hover{background:var(--p-datepicker-dropdown-hover-background);border-color:var(--p-datepicker-dropdown-hover-border-color);color:var(--p-datepicker-dropdown-hover-color);}.p-datepicker-dropdown:not(:disabled):active{background:var(--p-datepicker-dropdown-active-background);border-color:var(--p-datepicker-dropdown-active-border-color);color:var(--p-datepicker-dropdown-active-color);}.p-datepicker-dropdown:focus-visible{box-shadow:var(--p-datepicker-dropdown-focus-ring-shadow);outline:var(--p-datepicker-dropdown-focus-ring-width) var(--p-datepicker-dropdown-focus-ring-style) var(--p-datepicker-dropdown-focus-ring-color);outline-offset:var(--p-datepicker-dropdown-focus-ring-offset);}.p-datepicker:has(.p-datepicker-input-icon-container){position:relative;}.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-datepicker-input-icon-container{cursor:pointer;position:absolute;top:50%;inset-inline-end:var(--p-form-field-padding-x);margin-block-start:calc(-1 * (var(--p-icon-size) / 2));color:var(--p-datepicker-input-icon-color);line-height:1;z-index:1;}.p-datepicker:has(.p-datepicker-input:disabled) .p-datepicker-input-icon-container{cursor:default;}.p-datepicker-fluid{display:flex;}.p-datepicker-fluid:has(.p-datepicker-dropdown) .p-datepicker-input{flex:1 1 auto;width:1%;}.p-datepicker .p-datepicker-panel{min-width:100%;}.p-datepicker-panel{width:auto;padding:var(--p-datepicker-panel-padding);background:var(--p-datepicker-panel-background);color:var(--p-datepicker-panel-color);border:1px solid var(--p-datepicker-panel-border-color);border-radius:var(--p-datepicker-panel-border-radius);box-shadow:var(--p-datepicker-panel-shadow);}.p-datepicker-panel-inline{display:inline-block;overflow-x:auto;box-shadow:none;}.p-datepicker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--p-datepicker-header-padding);background:var(--p-datepicker-header-background);color:var(--p-datepicker-header-color);border-block-end:1px solid var(--p-datepicker-header-border-color);}.p-datepicker-next-button:dir(rtl){order:-1;}.p-datepicker-prev-button:dir(rtl){order:1;}.p-datepicker-title{display:flex;align-items:center;justify-content:space-between;gap:var(--p-datepicker-title-gap);font-weight:var(--p-datepicker-title-font-weight);}.p-datepicker-select-year,.p-datepicker-select-month{border:none;background:transparent;margin:0;cursor:pointer;font-weight:inherit;transition:background var(--p-datepicker-transition-duration),color var(--p-datepicker-transition-duration),border-color var(--p-datepicker-transition-duration),outline-color var(--p-datepicker-transition-duration),box-shadow var(--p-datepicker-transition-duration);}.p-datepicker-select-month{padding:var(--p-datepicker-select-month-padding);color:var(--p-datepicker-select-month-color);border-radius:var(--p-datepicker-select-month-border-radius);}.p-datepicker-select-year{padding:var(--p-datepicker-select-year-padding);color:var(--p-datepicker-select-year-color);border-radius:var(--p-datepicker-select-year-border-radius);}.p-datepicker-select-month:enabled:hover{background:var(--p-datepicker-select-month-hover-background);color:var(--p-datepicker-select-month-hover-color);}.p-datepicker-select-year:enabled:hover{background:var(--p-datepicker-select-year-hover-background);color:var(--p-datepicker-select-year-hover-color);}.p-datepicker-select-month:focus-visible,.p-datepicker-select-year:focus-visible{box-shadow:var(--p-datepicker-date-focus-ring-shadow);outline:var(--p-datepicker-date-focus-ring-width) var(--p-datepicker-date-focus-ring-style) var(--p-datepicker-date-focus-ring-color);outline-offset:var(--p-datepicker-date-focus-ring-offset);}.p-datepicker-calendar-container{display:flex;}.p-datepicker-calendar-container .p-datepicker-calendar{flex:1 1 auto;border-inline-start:1px solid var(--p-datepicker-group-border-color);padding-inline-end:var(--p-datepicker-group-gap);padding-inline-start:var(--p-datepicker-group-gap);}.p-datepicker-calendar-container .p-datepicker-calendar:first-child{padding-inline-start:0;border-inline-start:0 none;}.p-datepicker-calendar-container .p-datepicker-calendar:last-child{padding-inline-end:0;}.p-datepicker-day-view{width:100%;border-collapse:collapse;font-size:1rem;margin:var(--p-datepicker-day-view-margin);}.p-datepicker-weekday-cell{padding:var(--p-datepicker-week-day-padding);}.p-datepicker-weekday{font-weight:var(--p-datepicker-week-day-font-weight);color:var(--p-datepicker-week-day-color);}.p-datepicker-day-cell{padding:var(--p-datepicker-date-padding);}.p-datepicker-day{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative;width:var(--p-datepicker-date-width);height:var(--p-datepicker-date-height);border-radius:var(--p-datepicker-date-border-radius);transition:background var(--p-datepicker-transition-duration),color var(--p-datepicker-transition-duration),border-color var(--p-datepicker-transition-duration),box-shadow var(--p-datepicker-transition-duration),outline-color var(--p-datepicker-transition-duration);border:1px solid transparent;outline-color:transparent;color:var(--p-datepicker-date-color);}.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover{background:var(--p-datepicker-date-hover-background);color:var(--p-datepicker-date-hover-color);}.p-datepicker-day:focus-visible{box-shadow:var(--p-datepicker-date-focus-ring-shadow);outline:var(--p-datepicker-date-focus-ring-width) var(--p-datepicker-date-focus-ring-style) var(--p-datepicker-date-focus-ring-color);outline-offset:var(--p-datepicker-date-focus-ring-offset);}.p-datepicker-day-selected{background:var(--p-datepicker-date-selected-background);color:var(--p-datepicker-date-selected-color);}.p-datepicker-day-selected-range{background:var(--p-datepicker-date-range-selected-background);color:var(--p-datepicker-date-range-selected-color);}.p-datepicker-today > .p-datepicker-day{background:var(--p-datepicker-today-background);color:var(--p-datepicker-today-color);}.p-datepicker-today > .p-datepicker-day-selected{background:var(--p-datepicker-date-selected-background);color:var(--p-datepicker-date-selected-color);}.p-datepicker-today > .p-datepicker-day-selected-range{background:var(--p-datepicker-date-range-selected-background);color:var(--p-datepicker-date-range-selected-color);}.p-datepicker-weeknumber{text-align:center;}.p-datepicker-month-view{margin:var(--p-datepicker-month-view-margin);}.p-datepicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;padding:var(--p-datepicker-month-padding);transition:background var(--p-datepicker-transition-duration),color var(--p-datepicker-transition-duration),border-color var(--p-datepicker-transition-duration),box-shadow var(--p-datepicker-transition-duration),outline-color var(--p-datepicker-transition-duration);border-radius:var(--p-datepicker-month-border-radius);outline-color:transparent;color:var(--p-datepicker-date-color);}.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover{color:var(--p-datepicker-date-hover-color);background:var(--p-datepicker-date-hover-background);}.p-datepicker-month-selected{color:var(--p-datepicker-date-selected-color);background:var(--p-datepicker-date-selected-background);}.p-datepicker-month:not(.p-disabled):focus-visible{box-shadow:var(--p-datepicker-date-focus-ring-shadow);outline:var(--p-datepicker-date-focus-ring-width) var(--p-datepicker-date-focus-ring-style) var(--p-datepicker-date-focus-ring-color);outline-offset:var(--p-datepicker-date-focus-ring-offset);}.p-datepicker-year-view{margin:var(--p-datepicker-year-view-margin);}.p-datepicker-year{width:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;padding:var(--p-datepicker-year-padding);transition:background var(--p-datepicker-transition-duration),color var(--p-datepicker-transition-duration),border-color var(--p-datepicker-transition-duration),box-shadow var(--p-datepicker-transition-duration),outline-color var(--p-datepicker-transition-duration);border-radius:var(--p-datepicker-year-border-radius);outline-color:transparent;color:var(--p-datepicker-date-color);}.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover{color:var(--p-datepicker-date-hover-color);background:var(--p-datepicker-date-hover-background);}.p-datepicker-year-selected{color:var(--p-datepicker-date-selected-color);background:var(--p-datepicker-date-selected-background);}.p-datepicker-year:not(.p-disabled):focus-visible{box-shadow:var(--p-datepicker-date-focus-ring-shadow);outline:var(--p-datepicker-date-focus-ring-width) var(--p-datepicker-date-focus-ring-style) var(--p-datepicker-date-focus-ring-color);outline-offset:var(--p-datepicker-date-focus-ring-offset);}.p-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center;padding:var(--p-datepicker-buttonbar-padding);border-block-start:1px solid var(--p-datepicker-buttonbar-border-color);}.p-datepicker-buttonbar .p-button{width:auto;}.p-datepicker-time-picker{display:flex;justify-content:center;align-items:center;border-block-start:1px solid var(--p-datepicker-time-picker-border-color);padding:0;gap:var(--p-datepicker-time-picker-gap);}.p-datepicker-calendar-container + .p-datepicker-time-picker{padding:var(--p-datepicker-time-picker-padding);}.p-datepicker-time-picker > div{display:flex;align-items:center;flex-direction:column;gap:var(--p-datepicker-time-picker-button-gap);}.p-datepicker-time-picker span{font-size:1rem;}.p-datepicker-timeonly .p-datepicker-time-picker{border-block-start:0 none;}.p-datepicker-time-picker:dir(rtl){flex-direction:row-reverse;}.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown{width:var(--p-datepicker-dropdown-sm-width);}.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,.p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon{font-size:var(--p-form-field-sm-font-size);width:var(--p-form-field-sm-font-size);height:var(--p-form-field-sm-font-size);}.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown{width:var(--p-datepicker-dropdown-lg-width);}.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon{font-size:var(--p-form-field-lg-font-size);width:var(--p-form-field-lg-font-size);height:var(--p-form-field-lg-font-size);}.p-datepicker-clear-icon{position:absolute;top:50%;margin-top:-0.5rem;cursor:pointer;color:var(--p-form-field-icon-color);inset-inline-end:var(--p-form-field-padding-x);}.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-clear-icon{inset-inline-end:calc(var(--p-datepicker-dropdown-width) + var(--p-form-field-padding-x));}.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-clear-icon{inset-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-datepicker:has(.p-datepicker-clear-icon) .p-datepicker-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-datepicker:has(.p-datepicker-input-icon-container):has(.p-datepicker-clear-icon) .p-datepicker-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 3) + calc(var(--p-icon-size) * 2));}.p-inputgroup .p-datepicker-dropdown{border-radius:0;}.p-inputgroup > .p-datepicker:last-child:has(.p-datepicker-dropdown) > .p-datepicker-input{border-start-end-radius:0;border-end-end-radius:0;}.p-inputgroup > .p-datepicker:last-child .p-datepicker-dropdown{border-start-end-radius:var(--p-datepicker-dropdown-border-radius);border-end-end-radius:var(--p-datepicker-dropdown-border-radius);}"
-    },
-    {
-        "name": "floatlabel-variables",
-        "value": ":root,:host{--p-floatlabel-on-border-radius:var(--p-border-radius-xs);--p-floatlabel-on-active-background:var(--p-form-field-background);--p-floatlabel-on-active-padding:0 0.125rem;--p-floatlabel-in-active-top:var(--p-form-field-padding-y);--p-floatlabel-in-input-padding-top:1.5rem;--p-floatlabel-in-input-padding-bottom:var(--p-form-field-padding-y);--p-floatlabel-over-active-top:-1.25rem;--p-floatlabel-color:var(--p-form-field-float-label-color);--p-floatlabel-focus-color:var(--p-form-field-float-label-focus-color);--p-floatlabel-active-color:var(--p-form-field-float-label-active-color);--p-floatlabel-invalid-color:var(--p-form-field-float-label-invalid-color);--p-floatlabel-transition-duration:0.2s;--p-floatlabel-position-x:var(--p-form-field-padding-x);--p-floatlabel-position-y:var(--p-form-field-padding-y);--p-floatlabel-font-weight:500;--p-floatlabel-active-font-size:0.75rem;--p-floatlabel-active-font-weight:400;}"
-    },
-    {
-        "name": "floatlabel-style",
-        "value": ".p-floatlabel{display:block;position:relative;}.p-floatlabel label{position:absolute;pointer-events:none;top:50%;transform:translateY(-50%);transition-property:all;transition-timing-function:ease;line-height:1;font-weight:var(--p-floatlabel-font-weight);inset-inline-start:var(--p-floatlabel-position-x);color:var(--p-floatlabel-color);transition-duration:var(--p-floatlabel-transition-duration);}.p-floatlabel:has(.p-textarea) label{top:var(--p-floatlabel-position-y);transform:translateY(0);}.p-floatlabel:has(.p-inputicon:first-child) label{inset-inline-start:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input.p-filled) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(textarea.p-filled) label,.p-floatlabel:has(.p-inputwrapper-focus) label,.p-floatlabel:has(.p-inputwrapper-filled) label,.p-floatlabel:has(input[placeholder]) label,.p-floatlabel:has(textarea[placeholder]) label{top:var(--p-floatlabel-over-active-top);transform:translateY(0);font-size:var(--p-floatlabel-active-font-size);font-weight:var(--p-floatlabel-active-font-weight);}.p-floatlabel:has(input.p-filled) label,.p-floatlabel:has(textarea.p-filled) label,.p-floatlabel:has(.p-inputwrapper-filled) label{color:var(--p-floatlabel-active-color);}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--p-floatlabel-focus-color);}.p-floatlabel-in .p-inputtext,.p-floatlabel-in .p-textarea,.p-floatlabel-in .p-select-label,.p-floatlabel-in .p-multiselect-label,.p-floatlabel-in .p-multiselect-label:has(.p-chip),.p-floatlabel-in .p-autocomplete-input-multiple,.p-floatlabel-in .p-cascadeselect-label,.p-floatlabel-in .p-treeselect-label{padding-block-start:var(--p-floatlabel-in-input-padding-top);padding-block-end:var(--p-floatlabel-in-input-padding-bottom);}.p-floatlabel-in:has(input:focus) label,.p-floatlabel-in:has(input.p-filled) label,.p-floatlabel-in:has(input:-webkit-autofill) label,.p-floatlabel-in:has(textarea:focus) label,.p-floatlabel-in:has(textarea.p-filled) label,.p-floatlabel-in:has(.p-inputwrapper-focus) label,.p-floatlabel-in:has(.p-inputwrapper-filled) label,.p-floatlabel-in:has(input[placeholder]) label,.p-floatlabel-in:has(textarea[placeholder]) label{top:var(--p-floatlabel-in-active-top);}.p-floatlabel-on:has(input:focus) label,.p-floatlabel-on:has(input.p-filled) label,.p-floatlabel-on:has(input:-webkit-autofill) label,.p-floatlabel-on:has(textarea:focus) label,.p-floatlabel-on:has(textarea.p-filled) label,.p-floatlabel-on:has(.p-inputwrapper-focus) label,.p-floatlabel-on:has(.p-inputwrapper-filled) label,.p-floatlabel-on:has(input[placeholder]) label,.p-floatlabel-on:has(textarea[placeholder]) label{top:0;transform:translateY(-50%);border-radius:var(--p-floatlabel-on-border-radius);background:var(--p-floatlabel-on-active-background);padding:var(--p-floatlabel-on-active-padding);}.p-floatlabel:has([class^='p-'][class$='-fluid']){width:100%;}.p-floatlabel:has(.p-invalid) label{color:var(--p-floatlabel-invalid-color);}"
-    },
-    {
-        "name": "iconfield-variables",
-        "value": ":root,:host{--p-iconfield-icon-color:var(--p-form-field-icon-color);}"
-    },
-    {
-        "name": "iconfield-style",
-        "value": ".p-iconfield{position:relative;display:block;}.p-inputicon{position:absolute;top:50%;margin-top:calc(-1 * (var(--p-icon-size) / 2));color:var(--p-iconfield-icon-color);line-height:1;z-index:1;}.p-iconfield .p-inputicon:first-child{inset-inline-start:var(--p-form-field-padding-x);}.p-iconfield .p-inputicon:last-child{inset-inline-end:var(--p-form-field-padding-x);}.p-iconfield .p-inputtext:not(:first-child),.p-iconfield .p-inputwrapper:not(:first-child) .p-inputtext{padding-inline-start:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-iconfield .p-inputtext:not(:last-child){padding-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-iconfield:has(.p-inputfield-sm) .p-inputicon{font-size:var(--p-form-field-sm-font-size);width:var(--p-form-field-sm-font-size);height:var(--p-form-field-sm-font-size);margin-top:calc(-1 * (var(--p-form-field-sm-font-size) / 2));}.p-iconfield:has(.p-inputfield-lg) .p-inputicon{font-size:var(--p-form-field-lg-font-size);width:var(--p-form-field-lg-font-size);height:var(--p-form-field-lg-font-size);margin-top:calc(-1 * (var(--p-form-field-lg-font-size) / 2));}"
-    },
-    {
-        "name": "iftalabel-variables",
-        "value": ":root,:host{--p-iftalabel-input-padding-top:1.5rem;--p-iftalabel-input-padding-bottom:var(--p-form-field-padding-y);--p-iftalabel-color:var(--p-form-field-float-label-color);--p-iftalabel-focus-color:var(--p-form-field-float-label-focus-color);--p-iftalabel-invalid-color:var(--p-form-field-float-label-invalid-color);--p-iftalabel-transition-duration:0.2s;--p-iftalabel-position-x:var(--p-form-field-padding-x);--p-iftalabel-top:var(--p-form-field-padding-y);--p-iftalabel-font-size:0.75rem;--p-iftalabel-font-weight:400;}"
-    },
-    {
-        "name": "iftalabel-style",
-        "value": ".p-iftalabel{display:block;position:relative;}.p-iftalabel label{position:absolute;pointer-events:none;top:var(--p-iftalabel-top);transition-property:all;transition-timing-function:ease;line-height:1;font-size:var(--p-iftalabel-font-size);font-weight:var(--p-iftalabel-font-weight);inset-inline-start:var(--p-iftalabel-position-x);color:var(--p-iftalabel-color);transition-duration:var(--p-iftalabel-transition-duration);}.p-iftalabel .p-inputtext,.p-iftalabel .p-textarea,.p-iftalabel .p-select-label,.p-iftalabel .p-multiselect-label,.p-iftalabel .p-multiselect-label:has(.p-chip),.p-iftalabel .p-autocomplete-input-multiple,.p-iftalabel .p-cascadeselect-label,.p-iftalabel .p-treeselect-label{padding-block-start:var(--p-iftalabel-input-padding-top);padding-block-end:var(--p-iftalabel-input-padding-bottom);}.p-iftalabel:has(.p-invalid) label{color:var(--p-iftalabel-invalid-color);}.p-iftalabel:has(input:focus) label,.p-iftalabel:has(input:-webkit-autofill) label,.p-iftalabel:has(textarea:focus) label,.p-iftalabel:has(.p-inputwrapper-focus) label{color:var(--p-iftalabel-focus-color);}.p-iftalabel .p-inputicon{top:var(--p-iftalabel-input-padding-top);transform:translateY(25%);margin-top:0;}"
-    },
-    {
-        "name": "inputchips-variables",
-        "value": ":root,:host{--p-inputchips-chip-border-radius:var(--p-border-radius-sm);--p-inputchips-background:var(--p-form-field-background);--p-inputchips-disabled-background:var(--p-form-field-disabled-background);--p-inputchips-filled-background:var(--p-form-field-filled-background);--p-inputchips-filled-focus-background:var(--p-form-field-filled-focus-background);--p-inputchips-border-color:var(--p-form-field-border-color);--p-inputchips-hover-border-color:var(--p-form-field-hover-border-color);--p-inputchips-focus-border-color:var(--p-form-field-focus-border-color);--p-inputchips-invalid-border-color:var(--p-form-field-invalid-border-color);--p-inputchips-color:var(--p-form-field-color);--p-inputchips-disabled-color:var(--p-form-field-disabled-color);--p-inputchips-placeholder-color:var(--p-form-field-placeholder-color);--p-inputchips-shadow:var(--p-form-field-shadow);--p-inputchips-padding-x:var(--p-form-field-padding-x);--p-inputchips-padding-y:var(--p-form-field-padding-y);--p-inputchips-border-radius:var(--p-form-field-border-radius);--p-inputchips-transition-duration:var(--p-form-field-transition-duration);--p-inputchips-focus-ring-width:var(--p-form-field-focus-ring-width);--p-inputchips-focus-ring-style:var(--p-form-field-focus-ring-style);--p-inputchips-focus-ring-color:var(--p-form-field-focus-ring-color);--p-inputchips-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-inputchips-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);--p-inputchips-chip-focus-background:var(--p-surface-200);--p-inputchips-chip-color:var(--p-surface-800);}.p-dark{--p-inputchips-chip-focus-background:var(--p-surface-700);--p-inputchips-chip-color:var(--p-surface-0);}"
-    },
-    {
-        "name": "inputchips-style",
-        "value": ".p-inputchips{display:inline-flex;}.p-inputchips-input{margin:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap;padding:calc(var(--p-inputchips-padding-y) / 2) var(--p-inputchips-padding-x);gap:calc(var(--p-inputchips-padding-y) / 2);color:var(--p-inputchips-color);background:var(--p-inputchips-background);border:1px solid var(--p-inputchips-border-color);border-radius:var(--p-inputchips-border-radius);width:100%;transition:background var(--p-inputchips-transition-duration),color var(--p-inputchips-transition-duration),border-color var(--p-inputchips-transition-duration),outline-color var(--p-inputchips-transition-duration),box-shadow var(--p-inputchips-transition-duration);outline-color:transparent;box-shadow:var(--p-inputchips-shadow);}.p-inputchips:not(.p-disabled):hover .p-inputchips-input{border-color:var(--p-inputchips-hover-border-color);}.p-inputchips:not(.p-disabled).p-focus .p-inputchips-input{border-color:var(--p-inputchips-focus-border-color);box-shadow:var(--p-inputchips-focus-ring-shadow);outline:var(--p-inputchips-focus-ring-width) var(--p-inputchips-focus-ring-style) var(--p-inputchips-focus-ring-color);outline-offset:var(--p-inputchips-focus-ring-offset);}.p-inputchips.p-invalid .p-inputchips-input{border-color:var(--p-inputchips-invalid-border-color);}.p-variant-filled.p-inputchips-input{background:var(--p-inputchips-filled-background);}.p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-input{background:var(--p-inputchips-filled-focus-background);}.p-inputchips.p-disabled .p-inputchips-input{opacity:1;background:var(--p-inputchips-disabled-background);color:var(--p-inputchips-disabled-color);}.p-inputchips-chip.p-chip{padding-top:calc(var(--p-inputchips-padding-y) / 2);padding-bottom:calc(var(--p-inputchips-padding-y) / 2);border-radius:var(--p-inputchips-chip-border-radius);transition:background var(--p-inputchips-transition-duration),color var(--p-inputchips-transition-duration);}.p-inputchips-chip-item.p-focus .p-inputchips-chip{background:var(--p-inputchips-chip-focus-background);color:var(--p-inputchips-chip-focus-color);}.p-inputchips-input:has(.p-inputchips-chip){padding-left:calc(var(--p-inputchips-padding-y) / 2);padding-right:calc(var(--p-inputchips-padding-y) / 2);}.p-inputchips-input-item{flex:1 1 auto;display:inline-flex;padding-top:calc(var(--p-inputchips-padding-y) / 2);padding-bottom:calc(var(--p-inputchips-padding-y) / 2);}.p-inputchips-input-item input{border:0 none;outline:0 none;background:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%;font-family:inherit;font-feature-settings:inherit;font-size:1rem;color:inherit;}.p-inputchips-input-item input::placeholder{color:var(--p-inputchips-placeholder-color);}"
-    },
-    {
-        "name": "inputgroup-variables",
-        "value": ":root,:host{--p-inputgroup-addon-background:var(--p-form-field-background);--p-inputgroup-addon-border-color:var(--p-form-field-border-color);--p-inputgroup-addon-color:var(--p-form-field-icon-color);--p-inputgroup-addon-border-radius:var(--p-form-field-border-radius);--p-inputgroup-addon-padding:0.5rem;--p-inputgroup-addon-min-width:2.5rem;}"
-    },
-    {
-        "name": "inputgroup-style",
-        "value": ".p-inputgroup,.p-inputgroup .p-iconfield,.p-inputgroup .p-floatlabel,.p-inputgroup .p-iftalabel{display:flex;align-items:stretch;width:100%;}.p-inputgroup .p-inputtext,.p-inputgroup .p-inputwrapper{flex:1 1 auto;width:1%;}.p-inputgroupaddon{display:flex;align-items:center;justify-content:center;padding:var(--p-inputgroup-addon-padding);background:var(--p-inputgroup-addon-background);color:var(--p-inputgroup-addon-color);border-block-start:1px solid var(--p-inputgroup-addon-border-color);border-block-end:1px solid var(--p-inputgroup-addon-border-color);min-width:var(--p-inputgroup-addon-min-width);}.p-inputgroupaddon:first-child,.p-inputgroupaddon + .p-inputgroupaddon{border-inline-start:1px solid var(--p-inputgroup-addon-border-color);}.p-inputgroupaddon:last-child{border-inline-end:1px solid var(--p-inputgroup-addon-border-color);}.p-inputgroupaddon:has(.p-button){padding:0;overflow:hidden;}.p-inputgroupaddon .p-button{border-radius:0;}.p-inputgroup > .p-component,.p-inputgroup > .p-inputwrapper > .p-component,.p-inputgroup > .p-iconfield > .p-component,.p-inputgroup > .p-floatlabel > .p-component,.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,.p-inputgroup > .p-iftalabel > .p-component,.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component{border-radius:0;margin:0;}.p-inputgroupaddon:first-child,.p-inputgroup > .p-component:first-child,.p-inputgroup > .p-inputwrapper:first-child > .p-component,.p-inputgroup > .p-iconfield:first-child > .p-component,.p-inputgroup > .p-floatlabel:first-child > .p-component,.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,.p-inputgroup > .p-iftalabel:first-child > .p-component,.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component{border-start-start-radius:var(--p-inputgroup-addon-border-radius);border-end-start-radius:var(--p-inputgroup-addon-border-radius);}.p-inputgroupaddon:last-child,.p-inputgroup > .p-component:last-child,.p-inputgroup > .p-inputwrapper:last-child > .p-component,.p-inputgroup > .p-iconfield:last-child > .p-component,.p-inputgroup > .p-floatlabel:last-child > .p-component,.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,.p-inputgroup > .p-iftalabel:last-child > .p-component,.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component{border-start-end-radius:var(--p-inputgroup-addon-border-radius);border-end-end-radius:var(--p-inputgroup-addon-border-radius);}.p-inputgroup .p-component:focus,.p-inputgroup .p-component.p-focus,.p-inputgroup .p-inputwrapper-focus,.p-inputgroup .p-component:focus ~ label,.p-inputgroup .p-component.p-focus ~ label,.p-inputgroup .p-inputwrapper-focus ~ label{z-index:1;}.p-inputgroup > .p-button:not(.p-button-icon-only){width:auto;}.p-inputgroup .p-iconfield + .p-iconfield .p-inputtext{border-inline-start:0;}"
-    },
-    {
-        "name": "inputnumber-variables",
-        "value": ":root,:host{--p-inputnumber-button-width:2.5rem;--p-inputnumber-button-border-radius:var(--p-form-field-border-radius);--p-inputnumber-button-vertical-padding:var(--p-form-field-padding-y);--p-inputnumber-transition-duration:var(--p-transition-duration);--p-inputnumber-button-background:transparent;--p-inputnumber-button-hover-background:var(--p-surface-100);--p-inputnumber-button-active-background:var(--p-surface-200);--p-inputnumber-button-border-color:var(--p-form-field-border-color);--p-inputnumber-button-hover-border-color:var(--p-form-field-border-color);--p-inputnumber-button-active-border-color:var(--p-form-field-border-color);--p-inputnumber-button-color:var(--p-surface-400);--p-inputnumber-button-hover-color:var(--p-surface-500);--p-inputnumber-button-active-color:var(--p-surface-600);}.p-dark{--p-inputnumber-button-background:transparent;--p-inputnumber-button-hover-background:var(--p-surface-800);--p-inputnumber-button-active-background:var(--p-surface-700);--p-inputnumber-button-border-color:var(--p-form-field-border-color);--p-inputnumber-button-hover-border-color:var(--p-form-field-border-color);--p-inputnumber-button-active-border-color:var(--p-form-field-border-color);--p-inputnumber-button-color:var(--p-surface-400);--p-inputnumber-button-hover-color:var(--p-surface-300);--p-inputnumber-button-active-color:var(--p-surface-200);}"
-    },
-    {
-        "name": "inputnumber-style",
-        "value": ".p-inputnumber{display:inline-flex;position:relative;}.p-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;background:var(--p-inputnumber-button-background);color:var(--p-inputnumber-button-color);width:var(--p-inputnumber-button-width);transition:background var(--p-inputnumber-transition-duration),color var(--p-inputnumber-transition-duration),border-color var(--p-inputnumber-transition-duration),outline-color var(--p-inputnumber-transition-duration);}.p-inputnumber-button:disabled{cursor:auto;}.p-inputnumber-button:not(:disabled):hover{background:var(--p-inputnumber-button-hover-background);color:var(--p-inputnumber-button-hover-color);}.p-inputnumber-button:not(:disabled):active{background:var(--p-inputnumber-button-active-background);color:var(--p-inputnumber-button-active-color);}.p-inputnumber-stacked .p-inputnumber-button{position:relative;flex:1 1 auto;border:0 none;}.p-inputnumber-stacked .p-inputnumber-button-group{display:flex;flex-direction:column;position:absolute;inset-block-start:1px;inset-inline-end:1px;height:calc(100% - 2px);z-index:1;}.p-inputnumber-stacked .p-inputnumber-increment-button{padding:0;border-start-end-radius:calc(var(--p-inputnumber-button-border-radius) - 1px);}.p-inputnumber-stacked .p-inputnumber-decrement-button{padding:0;border-end-end-radius:calc(var(--p-inputnumber-button-border-radius) - 1px);}.p-inputnumber-stacked .p-inputnumber-input{padding-inline-end:calc(var(--p-inputnumber-button-width) + var(--p-form-field-padding-x));}.p-inputnumber-horizontal .p-inputnumber-button{border:1px solid var(--p-inputnumber-button-border-color);}.p-inputnumber-horizontal .p-inputnumber-button:hover{border-color:var(--p-inputnumber-button-hover-border-color);}.p-inputnumber-horizontal .p-inputnumber-button:active{border-color:var(--p-inputnumber-button-active-border-color);}.p-inputnumber-horizontal .p-inputnumber-increment-button{order:3;border-start-end-radius:var(--p-inputnumber-button-border-radius);border-end-end-radius:var(--p-inputnumber-button-border-radius);border-inline-start:0 none;}.p-inputnumber-horizontal .p-inputnumber-input{order:2;border-radius:0;}.p-inputnumber-horizontal .p-inputnumber-decrement-button{order:1;border-start-start-radius:var(--p-inputnumber-button-border-radius);border-end-start-radius:var(--p-inputnumber-button-border-radius);border-inline-end:0 none;}.p-floatlabel:has(.p-inputnumber-horizontal) label{margin-inline-start:var(--p-inputnumber-button-width);}.p-inputnumber-vertical{flex-direction:column;}.p-inputnumber-vertical .p-inputnumber-button{border:1px solid var(--p-inputnumber-button-border-color);padding:var(--p-inputnumber-button-vertical-padding);}.p-inputnumber-vertical .p-inputnumber-button:hover{border-color:var(--p-inputnumber-button-hover-border-color);}.p-inputnumber-vertical .p-inputnumber-button:active{border-color:var(--p-inputnumber-button-active-border-color);}.p-inputnumber-vertical .p-inputnumber-increment-button{order:1;border-start-start-radius:var(--p-inputnumber-button-border-radius);border-start-end-radius:var(--p-inputnumber-button-border-radius);width:100%;border-block-end:0 none;}.p-inputnumber-vertical .p-inputnumber-input{order:2;border-radius:0;text-align:center;}.p-inputnumber-vertical .p-inputnumber-decrement-button{order:3;border-end-start-radius:var(--p-inputnumber-button-border-radius);border-end-end-radius:var(--p-inputnumber-button-border-radius);width:100%;border-block-start:0 none;}.p-inputnumber-input{flex:1 1 auto;}.p-inputnumber-fluid{width:100%;}.p-inputnumber-fluid .p-inputnumber-input{width:1%;}.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input{width:100%;}.p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon{font-size:var(--p-form-field-sm-font-size);width:var(--p-form-field-sm-font-size);height:var(--p-form-field-sm-font-size);}.p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon{font-size:var(--p-form-field-lg-font-size);width:var(--p-form-field-lg-font-size);height:var(--p-form-field-lg-font-size);}.p-inputnumber-clear-icon{position:absolute;top:50%;margin-top:-0.5rem;cursor:pointer;inset-inline-end:var(--p-form-field-padding-x);color:var(--p-form-field-icon-color);}.p-inputnumber:has(.p-inputnumber-clear-icon) .p-inputnumber-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-inputnumber-stacked .p-inputnumber-clear-icon{inset-inline-end:calc(var(--p-inputnumber-button-width) + var(--p-form-field-padding-x));}.p-inputnumber-stacked:has(.p-inputnumber-clear-icon) .p-inputnumber-input{padding-inline-end:calc(var(--p-inputnumber-button-width) + (var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-inputnumber-horizontal .p-inputnumber-clear-icon{inset-inline-end:calc(var(--p-inputnumber-button-width) + var(--p-form-field-padding-x));}"
-    },
-    {
-        "name": "inputotp-variables",
-        "value": ":root,:host{--p-inputotp-input-width:2.5rem;--p-inputotp-input-lg-width:3rem;--p-inputotp-input-sm-width:2rem;--p-inputotp-gap:0.5rem;}"
-    },
-    {
-        "name": "inputotp-style",
-        "value": ".p-inputotp{display:flex;align-items:center;gap:var(--p-inputotp-gap);}.p-inputotp-input{text-align:center;width:var(--p-inputotp-input-width);}.p-inputotp-input.p-inputtext-sm{text-align:center;width:var(--p-inputotp-input-sm-width);}.p-inputotp-input.p-inputtext-lg{text-align:center;width:var(--p-inputotp-input-lg-width);}"
-    },
-    {
-        "name": "inputtext-variables",
-        "value": ":root,:host{--p-inputtext-background:var(--p-form-field-background);--p-inputtext-disabled-background:var(--p-form-field-disabled-background);--p-inputtext-filled-background:var(--p-form-field-filled-background);--p-inputtext-filled-hover-background:var(--p-form-field-filled-hover-background);--p-inputtext-filled-focus-background:var(--p-form-field-filled-focus-background);--p-inputtext-border-color:var(--p-form-field-border-color);--p-inputtext-hover-border-color:var(--p-form-field-hover-border-color);--p-inputtext-focus-border-color:var(--p-form-field-focus-border-color);--p-inputtext-invalid-border-color:var(--p-form-field-invalid-border-color);--p-inputtext-color:var(--p-form-field-color);--p-inputtext-disabled-color:var(--p-form-field-disabled-color);--p-inputtext-placeholder-color:var(--p-form-field-placeholder-color);--p-inputtext-invalid-placeholder-color:var(--p-form-field-invalid-placeholder-color);--p-inputtext-shadow:var(--p-form-field-shadow);--p-inputtext-padding-x:var(--p-form-field-padding-x);--p-inputtext-padding-y:var(--p-form-field-padding-y);--p-inputtext-border-radius:var(--p-form-field-border-radius);--p-inputtext-transition-duration:var(--p-form-field-transition-duration);--p-inputtext-lg-font-size:var(--p-form-field-lg-font-size);--p-inputtext-lg-padding-x:var(--p-form-field-lg-padding-x);--p-inputtext-lg-padding-y:var(--p-form-field-lg-padding-y);--p-inputtext-sm-font-size:var(--p-form-field-sm-font-size);--p-inputtext-sm-padding-x:var(--p-form-field-sm-padding-x);--p-inputtext-sm-padding-y:var(--p-form-field-sm-padding-y);--p-inputtext-focus-ring-width:var(--p-form-field-focus-ring-width);--p-inputtext-focus-ring-style:var(--p-form-field-focus-ring-style);--p-inputtext-focus-ring-color:var(--p-form-field-focus-ring-color);--p-inputtext-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-inputtext-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);}"
-    },
-    {
-        "name": "inputtext-style",
-        "value": ".p-inputtext{font-family:inherit;font-feature-settings:inherit;font-size:1rem;color:var(--p-inputtext-color);background:var(--p-inputtext-background);padding-block:var(--p-inputtext-padding-y);padding-inline:var(--p-inputtext-padding-x);border:1px solid var(--p-inputtext-border-color);transition:background var(--p-inputtext-transition-duration),color var(--p-inputtext-transition-duration),border-color var(--p-inputtext-transition-duration),outline-color var(--p-inputtext-transition-duration),box-shadow var(--p-inputtext-transition-duration);appearance:none;border-radius:var(--p-inputtext-border-radius);outline-color:transparent;box-shadow:var(--p-inputtext-shadow);}.p-inputtext:enabled:hover{border-color:var(--p-inputtext-hover-border-color);}.p-inputtext:enabled:focus{border-color:var(--p-inputtext-focus-border-color);box-shadow:var(--p-inputtext-focus-ring-shadow);outline:var(--p-inputtext-focus-ring-width) var(--p-inputtext-focus-ring-style) var(--p-inputtext-focus-ring-color);outline-offset:var(--p-inputtext-focus-ring-offset);}.p-inputtext.p-invalid{border-color:var(--p-inputtext-invalid-border-color);}.p-inputtext.p-variant-filled{background:var(--p-inputtext-filled-background);}.p-inputtext.p-variant-filled:enabled:hover{background:var(--p-inputtext-filled-hover-background);}.p-inputtext.p-variant-filled:enabled:focus{background:var(--p-inputtext-filled-focus-background);}.p-inputtext:disabled{opacity:1;background:var(--p-inputtext-disabled-background);color:var(--p-inputtext-disabled-color);}.p-inputtext::placeholder{color:var(--p-inputtext-placeholder-color);}.p-inputtext.p-invalid::placeholder{color:var(--p-inputtext-invalid-placeholder-color);}.p-inputtext-sm{font-size:var(--p-inputtext-sm-font-size);padding-block:var(--p-inputtext-sm-padding-y);padding-inline:var(--p-inputtext-sm-padding-x);}.p-inputtext-lg{font-size:var(--p-inputtext-lg-font-size);padding-block:var(--p-inputtext-lg-padding-y);padding-inline:var(--p-inputtext-lg-padding-x);}.p-inputtext-fluid{width:100%;}"
-    },
-    {
-        "name": "knob-variables",
-        "value": ":root,:host{--p-knob-text-color:var(--p-text-muted-color);--p-knob-range-background:var(--p-content-border-color);--p-knob-value-background:var(--p-primary-color);--p-knob-transition-duration:var(--p-transition-duration);--p-knob-focus-ring-width:var(--p-focus-ring-width);--p-knob-focus-ring-style:var(--p-focus-ring-style);--p-knob-focus-ring-color:var(--p-focus-ring-color);--p-knob-focus-ring-offset:var(--p-focus-ring-offset);--p-knob-focus-ring-shadow:var(--p-focus-ring-shadow);}"
-    },
-    {
-        "name": "knob-style",
-        "value": ".p-knob-range{fill:none;transition:stroke 0.1s ease-in;}.p-knob-value{animation-name:p-knob-dash-frame;animation-fill-mode:forwards;fill:none;}.p-knob-text{font-size:1.3rem;text-align:center;}.p-knob svg{border-radius:50%;outline-color:transparent;transition:background var(--p-knob-transition-duration),color var(--p-knob-transition-duration),outline-color var(--p-knob-transition-duration),box-shadow var(--p-knob-transition-duration);}.p-knob svg:focus-visible{box-shadow:var(--p-knob-focus-ring-shadow);outline:var(--p-knob-focus-ring-width) var(--p-knob-focus-ring-style) var(--p-knob-focus-ring-color);outline-offset:var(--p-knob-focus-ring-offset);}@keyframes p-knob-dash-frame{100%{stroke-dashoffset:0;}}"
-    },
-    {
-        "name": "listbox-variables",
-        "value": ":root,:host{--p-listbox-empty-message-padding:var(--p-list-option-padding);--p-listbox-checkmark-color:var(--p-list-option-color);--p-listbox-checkmark-gutter-start:-0.375rem;--p-listbox-checkmark-gutter-end:0.375rem;--p-listbox-option-group-background:var(--p-list-option-group-background);--p-listbox-option-group-color:var(--p-list-option-group-color);--p-listbox-option-group-font-weight:var(--p-list-option-group-font-weight);--p-listbox-option-group-padding:var(--p-list-option-group-padding);--p-listbox-option-focus-background:var(--p-list-option-focus-background);--p-listbox-option-selected-background:var(--p-list-option-selected-background);--p-listbox-option-selected-focus-background:var(--p-list-option-selected-focus-background);--p-listbox-option-color:var(--p-list-option-color);--p-listbox-option-focus-color:var(--p-list-option-focus-color);--p-listbox-option-selected-color:var(--p-list-option-selected-color);--p-listbox-option-selected-focus-color:var(--p-list-option-selected-focus-color);--p-listbox-option-padding:var(--p-list-option-padding);--p-listbox-option-border-radius:var(--p-list-option-border-radius);--p-listbox-list-padding:var(--p-list-padding);--p-listbox-list-gap:var(--p-list-gap);--p-listbox-list-header-padding:var(--p-list-header-padding);--p-listbox-background:var(--p-form-field-background);--p-listbox-disabled-background:var(--p-form-field-disabled-background);--p-listbox-border-color:var(--p-form-field-border-color);--p-listbox-invalid-border-color:var(--p-form-field-invalid-border-color);--p-listbox-color:var(--p-form-field-color);--p-listbox-disabled-color:var(--p-form-field-disabled-color);--p-listbox-shadow:var(--p-form-field-shadow);--p-listbox-border-radius:var(--p-form-field-border-radius);--p-listbox-transition-duration:var(--p-form-field-transition-duration);--p-listbox-option-striped-background:var(--p-surface-50);}.p-dark{--p-listbox-option-striped-background:var(--p-surface-900);}"
-    },
-    {
-        "name": "listbox-style",
-        "value": ".p-listbox{display:block;background:var(--p-listbox-background);color:var(--p-listbox-color);border:1px solid var(--p-listbox-border-color);border-radius:var(--p-listbox-border-radius);transition:background var(--p-listbox-transition-duration),color var(--p-listbox-transition-duration),border-color var(--p-listbox-transition-duration),box-shadow var(--p-listbox-transition-duration),outline-color var(--p-listbox-transition-duration);outline-color:transparent;box-shadow:var(--p-listbox-shadow);}.p-listbox.p-disabled{opacity:1;background:var(--p-listbox-disabled-background);color:var(--p-listbox-disabled-color);}.p-listbox.p-disabled .p-listbox-option{color:var(--p-listbox-disabled-color);}.p-listbox.p-invalid{border-color:var(--p-listbox-invalid-border-color);}.p-listbox-header{padding:var(--p-listbox-list-header-padding);}.p-listbox-filter{width:100%;}.p-listbox-list-container{overflow:auto;}.p-listbox-list{list-style-type:none;margin:0;padding:var(--p-listbox-list-padding);outline:0 none;display:flex;flex-direction:column;gap:var(--p-listbox-list-gap);}.p-listbox-option{display:flex;align-items:center;cursor:pointer;position:relative;overflow:hidden;padding:var(--p-listbox-option-padding);border:0 none;border-radius:var(--p-listbox-option-border-radius);color:var(--p-listbox-option-color);transition:background var(--p-listbox-transition-duration),color var(--p-listbox-transition-duration),border-color var(--p-listbox-transition-duration),box-shadow var(--p-listbox-transition-duration),outline-color var(--p-listbox-transition-duration);}.p-listbox-striped li:nth-child(even of .p-listbox-option){background:var(--p-listbox-option-striped-background);}.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected{background:var(--p-listbox-option-selected-background);color:var(--p-listbox-option-selected-color);}.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus{background:var(--p-listbox-option-selected-focus-background);color:var(--p-listbox-option-selected-focus-color);}.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus{background:var(--p-listbox-option-focus-background);color:var(--p-listbox-option-focus-color);}.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover{background:var(--p-listbox-option-focus-background);color:var(--p-listbox-option-focus-color);}.p-listbox-option-blank-icon{flex-shrink:0;}.p-listbox-option-check-icon{position:relative;flex-shrink:0;margin-inline-start:var(--p-listbox-checkmark-gutter-start);margin-inline-end:var(--p-listbox-checkmark-gutter-end);color:var(--p-listbox-checkmark-color);}.p-listbox-option-group{margin:0;padding:var(--p-listbox-option-group-padding);color:var(--p-listbox-option-group-color);background:var(--p-listbox-option-group-background);font-weight:var(--p-listbox-option-group-font-weight);}.p-listbox-empty-message{padding:var(--p-listbox-empty-message-padding);}.p-listbox-fluid{width:100%;}"
-    },
-    {
-        "name": "multiselect-variables",
-        "value": ":root,:host{--p-multiselect-empty-message-padding:var(--p-list-option-padding);--p-multiselect-clear-icon-color:var(--p-form-field-icon-color);--p-multiselect-chip-border-radius:var(--p-border-radius-sm);--p-multiselect-option-group-background:var(--p-list-option-group-background);--p-multiselect-option-group-color:var(--p-list-option-group-color);--p-multiselect-option-group-font-weight:var(--p-list-option-group-font-weight);--p-multiselect-option-group-padding:var(--p-list-option-group-padding);--p-multiselect-option-focus-background:var(--p-list-option-focus-background);--p-multiselect-option-selected-background:var(--p-list-option-selected-background);--p-multiselect-option-selected-focus-background:var(--p-list-option-selected-focus-background);--p-multiselect-option-color:var(--p-list-option-color);--p-multiselect-option-focus-color:var(--p-list-option-focus-color);--p-multiselect-option-selected-color:var(--p-list-option-selected-color);--p-multiselect-option-selected-focus-color:var(--p-list-option-selected-focus-color);--p-multiselect-option-padding:var(--p-list-option-padding);--p-multiselect-option-border-radius:var(--p-list-option-border-radius);--p-multiselect-option-gap:0.5rem;--p-multiselect-list-padding:var(--p-list-padding);--p-multiselect-list-gap:var(--p-list-gap);--p-multiselect-list-header-padding:var(--p-list-header-padding);--p-multiselect-overlay-background:var(--p-overlay-select-background);--p-multiselect-overlay-border-color:var(--p-overlay-select-border-color);--p-multiselect-overlay-border-radius:var(--p-overlay-select-border-radius);--p-multiselect-overlay-color:var(--p-overlay-select-color);--p-multiselect-overlay-shadow:var(--p-overlay-select-shadow);--p-multiselect-dropdown-width:2.5rem;--p-multiselect-dropdown-color:var(--p-form-field-icon-color);--p-multiselect-background:var(--p-form-field-background);--p-multiselect-disabled-background:var(--p-form-field-disabled-background);--p-multiselect-filled-background:var(--p-form-field-filled-background);--p-multiselect-filled-hover-background:var(--p-form-field-filled-hover-background);--p-multiselect-filled-focus-background:var(--p-form-field-filled-focus-background);--p-multiselect-border-color:var(--p-form-field-border-color);--p-multiselect-hover-border-color:var(--p-form-field-hover-border-color);--p-multiselect-focus-border-color:var(--p-form-field-focus-border-color);--p-multiselect-invalid-border-color:var(--p-form-field-invalid-border-color);--p-multiselect-color:var(--p-form-field-color);--p-multiselect-disabled-color:var(--p-form-field-disabled-color);--p-multiselect-placeholder-color:var(--p-form-field-placeholder-color);--p-multiselect-invalid-placeholder-color:var(--p-form-field-invalid-placeholder-color);--p-multiselect-shadow:var(--p-form-field-shadow);--p-multiselect-padding-x:var(--p-form-field-padding-x);--p-multiselect-padding-y:var(--p-form-field-padding-y);--p-multiselect-border-radius:var(--p-form-field-border-radius);--p-multiselect-transition-duration:var(--p-form-field-transition-duration);--p-multiselect-lg-font-size:var(--p-form-field-lg-font-size);--p-multiselect-lg-padding-x:var(--p-form-field-lg-padding-x);--p-multiselect-lg-padding-y:var(--p-form-field-lg-padding-y);--p-multiselect-sm-font-size:var(--p-form-field-sm-font-size);--p-multiselect-sm-padding-x:var(--p-form-field-sm-padding-x);--p-multiselect-sm-padding-y:var(--p-form-field-sm-padding-y);--p-multiselect-focus-ring-width:var(--p-form-field-focus-ring-width);--p-multiselect-focus-ring-style:var(--p-form-field-focus-ring-style);--p-multiselect-focus-ring-color:var(--p-form-field-focus-ring-color);--p-multiselect-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-multiselect-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);}"
-    },
-    {
-        "name": "multiselect-style",
-        "value": ".p-multiselect{display:inline-flex;cursor:pointer;position:relative;user-select:none;background:var(--p-multiselect-background);border:1px solid var(--p-multiselect-border-color);transition:background var(--p-multiselect-transition-duration),color var(--p-multiselect-transition-duration),border-color var(--p-multiselect-transition-duration),outline-color var(--p-multiselect-transition-duration),box-shadow var(--p-multiselect-transition-duration);border-radius:var(--p-multiselect-border-radius);outline-color:transparent;box-shadow:var(--p-multiselect-shadow);}.p-multiselect:not(.p-disabled):hover{border-color:var(--p-multiselect-hover-border-color);}.p-multiselect:not(.p-disabled).p-focus{border-color:var(--p-multiselect-focus-border-color);box-shadow:var(--p-multiselect-focus-ring-shadow);outline:var(--p-multiselect-focus-ring-width) var(--p-multiselect-focus-ring-style) var(--p-multiselect-focus-ring-color);outline-offset:var(--p-multiselect-focus-ring-offset);}.p-multiselect.p-variant-filled{background:var(--p-multiselect-filled-background);}.p-multiselect.p-variant-filled:not(.p-disabled):hover{background:var(--p-multiselect-filled-hover-background);}.p-multiselect.p-variant-filled.p-focus{background:var(--p-multiselect-filled-focus-background);}.p-multiselect.p-invalid{border-color:var(--p-multiselect-invalid-border-color);}.p-multiselect.p-disabled{opacity:1;background:var(--p-multiselect-disabled-background);}.p-multiselect-dropdown{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:var(--p-multiselect-dropdown-color);width:var(--p-multiselect-dropdown-width);border-start-end-radius:var(--p-multiselect-border-radius);border-end-end-radius:var(--p-multiselect-border-radius);}.p-multiselect-clear-icon{align-self:center;color:var(--p-multiselect-clear-icon-color);inset-inline-end:var(--p-multiselect-dropdown-width);}.p-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;}.p-multiselect-label{white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis;padding:var(--p-multiselect-padding-y) var(--p-multiselect-padding-x);color:var(--p-multiselect-color);}.p-multiselect-display-chip .p-multiselect-label{display:flex;align-items:center;gap:calc(var(--p-multiselect-padding-y) / 2);}.p-multiselect-label.p-placeholder{color:var(--p-multiselect-placeholder-color);}.p-multiselect.p-invalid .p-multiselect-label.p-placeholder{color:var(--p-multiselect-invalid-placeholder-color);}.p-multiselect.p-disabled .p-multiselect-label{color:var(--p-multiselect-disabled-color);}.p-multiselect-label-empty{overflow:hidden;visibility:hidden;}.p-multiselect-overlay{position:absolute;top:0;left:0;background:var(--p-multiselect-overlay-background);color:var(--p-multiselect-overlay-color);border:1px solid var(--p-multiselect-overlay-border-color);border-radius:var(--p-multiselect-overlay-border-radius);box-shadow:var(--p-multiselect-overlay-shadow);min-width:100%;}.p-multiselect-header{display:flex;align-items:center;padding:var(--p-multiselect-list-header-padding);}.p-multiselect-header .p-checkbox{margin-inline-end:var(--p-multiselect-option-gap);}.p-multiselect-filter-container{flex:1 1 auto;}.p-multiselect-filter{width:100%;}.p-multiselect-list-container{overflow:auto;}.p-multiselect-list{margin:0;padding:0;list-style-type:none;padding:var(--p-multiselect-list-padding);display:flex;flex-direction:column;gap:var(--p-multiselect-list-gap);}.p-multiselect-option{cursor:pointer;font-weight:normal;white-space:nowrap;position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--p-multiselect-option-gap);padding:var(--p-multiselect-option-padding);border:0 none;color:var(--p-multiselect-option-color);background:transparent;transition:background var(--p-multiselect-transition-duration),color var(--p-multiselect-transition-duration),border-color var(--p-multiselect-transition-duration),box-shadow var(--p-multiselect-transition-duration),outline-color var(--p-multiselect-transition-duration);border-radius:var(--p-multiselect-option-border-radius);}.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus{background:var(--p-multiselect-option-focus-background);color:var(--p-multiselect-option-focus-color);}.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled):hover{background:var(--p-multiselect-option-focus-background);color:var(--p-multiselect-option-focus-color);}.p-multiselect-option.p-multiselect-option-selected{background:var(--p-multiselect-option-selected-background);color:var(--p-multiselect-option-selected-color);}.p-multiselect-option.p-multiselect-option-selected.p-focus{background:var(--p-multiselect-option-selected-focus-background);color:var(--p-multiselect-option-selected-focus-color);}.p-multiselect-option-group{cursor:auto;margin:0;padding:var(--p-multiselect-option-group-padding);background:var(--p-multiselect-option-group-background);color:var(--p-multiselect-option-group-color);font-weight:var(--p-multiselect-option-group-font-weight);}.p-multiselect-empty-message{padding:var(--p-multiselect-empty-message-padding);}.p-multiselect-label .p-chip{padding-block-start:calc(var(--p-multiselect-padding-y) / 2);padding-block-end:calc(var(--p-multiselect-padding-y) / 2);border-radius:var(--p-multiselect-chip-border-radius);}.p-multiselect-label:has(.p-chip){padding:calc(var(--p-multiselect-padding-y) / 2) calc(var(--p-multiselect-padding-x) / 2);}.p-multiselect-fluid{display:flex;width:100%;}.p-multiselect-sm .p-multiselect-label{font-size:var(--p-multiselect-sm-font-size);padding-block:var(--p-multiselect-sm-padding-y);padding-inline:var(--p-multiselect-sm-padding-x);}.p-multiselect-sm .p-multiselect-dropdown .p-icon{font-size:var(--p-multiselect-sm-font-size);width:var(--p-multiselect-sm-font-size);height:var(--p-multiselect-sm-font-size);}.p-multiselect-lg .p-multiselect-label{font-size:var(--p-multiselect-lg-font-size);padding-block:var(--p-multiselect-lg-padding-y);padding-inline:var(--p-multiselect-lg-padding-x);}.p-multiselect-lg .p-multiselect-dropdown .p-icon{font-size:var(--p-multiselect-lg-font-size);width:var(--p-multiselect-lg-font-size);height:var(--p-multiselect-lg-font-size);}.p-floatlabel-in .p-multiselect-filter{padding-block-start:var(--p-multiselect-padding-y);padding-block-end:var(--p-multiselect-padding-y);}"
-    },
-    {
-        "name": "password-variables",
-        "value": ":root,:host{--p-password-content-gap:0.5rem;--p-password-overlay-background:var(--p-overlay-popover-background);--p-password-overlay-border-color:var(--p-overlay-popover-border-color);--p-password-overlay-border-radius:var(--p-overlay-popover-border-radius);--p-password-overlay-color:var(--p-overlay-popover-color);--p-password-overlay-padding:var(--p-overlay-popover-padding);--p-password-overlay-shadow:var(--p-overlay-popover-shadow);--p-password-icon-color:var(--p-form-field-icon-color);--p-password-meter-background:var(--p-content-border-color);--p-password-meter-border-radius:var(--p-content-border-radius);--p-password-meter-height:.75rem;--p-password-strength-weak-background:var(--p-red-500);--p-password-strength-medium-background:var(--p-amber-500);--p-password-strength-strong-background:var(--p-green-500);}.p-dark{--p-password-strength-weak-background:var(--p-red-400);--p-password-strength-medium-background:var(--p-amber-400);--p-password-strength-strong-background:var(--p-green-400);}"
-    },
-    {
-        "name": "password-style",
-        "value": ".p-password{display:inline-flex;position:relative;}.p-password .p-password-overlay{min-width:100%;}.p-password-meter{height:var(--p-password-meter-height);background:var(--p-password-meter-background);border-radius:var(--p-password-meter-border-radius);}.p-password-meter-label{height:100%;width:0;transition:width 1s ease-in-out;border-radius:var(--p-password-meter-border-radius);}.p-password-meter-weak{background:var(--p-password-strength-weak-background);}.p-password-meter-medium{background:var(--p-password-strength-medium-background);}.p-password-meter-strong{background:var(--p-password-strength-strong-background);}.p-password-fluid{display:flex;}.p-password-fluid .p-password-input{width:100%;}.p-password-input::-ms-reveal,.p-password-input::-ms-clear{display:none;}.p-password-overlay{padding:var(--p-password-overlay-padding);background:var(--p-password-overlay-background);color:var(--p-password-overlay-color);border:1px solid var(--p-password-overlay-border-color);box-shadow:var(--p-password-overlay-shadow);border-radius:var(--p-password-overlay-border-radius);}.p-password-content{display:flex;flex-direction:column;gap:var(--p-password-content-gap);}.p-password-toggle-mask-icon{inset-inline-end:var(--p-form-field-padding-x);color:var(--p-password-icon-color);position:absolute;top:50%;margin-top:calc(-1 * calc(var(--p-icon-size) / 2));width:var(--p-icon-size);height:var(--p-icon-size);}.p-password-clear-icon{position:absolute;top:50%;margin-top:-0.5rem;cursor:pointer;inset-inline-end:var(--p-form-field-padding-x);color:var(--p-form-field-icon-color);}.p-password:has(.p-password-toggle-mask-icon) .p-password-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-password:has(.p-password-toggle-mask-icon) .p-password-clear-icon{inset-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-password:has(.p-password-clear-icon) .p-password-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 2) + var(--p-icon-size));}.p-password:has(.p-password-clear-icon):has(.p-password-toggle-mask-icon) .p-password-input{padding-inline-end:calc((var(--p-form-field-padding-x) * 3) + calc(var(--p-icon-size) * 2));}"
-    },
-    {
-        "name": "radiobutton-variables",
-        "value": ":root,:host{--p-radiobutton-icon-size:0.75rem;--p-radiobutton-icon-checked-color:var(--p-primary-contrast-color);--p-radiobutton-icon-checked-hover-color:var(--p-primary-contrast-color);--p-radiobutton-icon-disabled-color:var(--p-form-field-disabled-color);--p-radiobutton-icon-lg-size:1rem;--p-radiobutton-icon-sm-size:0.5rem;--p-radiobutton-width:1.25rem;--p-radiobutton-height:1.25rem;--p-radiobutton-background:var(--p-form-field-background);--p-radiobutton-checked-background:var(--p-primary-color);--p-radiobutton-checked-hover-background:var(--p-primary-hover-color);--p-radiobutton-disabled-background:var(--p-form-field-disabled-background);--p-radiobutton-filled-background:var(--p-form-field-filled-background);--p-radiobutton-border-color:var(--p-form-field-border-color);--p-radiobutton-hover-border-color:var(--p-form-field-hover-border-color);--p-radiobutton-focus-border-color:var(--p-form-field-border-color);--p-radiobutton-checked-border-color:var(--p-primary-color);--p-radiobutton-checked-hover-border-color:var(--p-primary-hover-color);--p-radiobutton-checked-focus-border-color:var(--p-primary-color);--p-radiobutton-checked-disabled-border-color:var(--p-form-field-border-color);--p-radiobutton-invalid-border-color:var(--p-form-field-invalid-border-color);--p-radiobutton-shadow:var(--p-form-field-shadow);--p-radiobutton-transition-duration:var(--p-form-field-transition-duration);--p-radiobutton-lg-width:1.5rem;--p-radiobutton-lg-height:1.5rem;--p-radiobutton-sm-width:1rem;--p-radiobutton-sm-height:1rem;--p-radiobutton-focus-ring-width:var(--p-focus-ring-width);--p-radiobutton-focus-ring-style:var(--p-focus-ring-style);--p-radiobutton-focus-ring-color:var(--p-focus-ring-color);--p-radiobutton-focus-ring-offset:var(--p-focus-ring-offset);--p-radiobutton-focus-ring-shadow:var(--p-focus-ring-shadow);}"
-    },
-    {
-        "name": "radiobutton-style",
-        "value": ".p-radiobutton{position:relative;display:inline-flex;user-select:none;vertical-align:bottom;width:var(--p-radiobutton-width);height:var(--p-radiobutton-height);}.p-radiobutton-input{cursor:pointer;appearance:none;position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:1;outline:0 none;border:1px solid transparent;border-radius:50%;}.p-radiobutton-box{display:flex;justify-content:center;align-items:center;border-radius:50%;border:1px solid var(--p-radiobutton-border-color);background:var(--p-radiobutton-background);width:var(--p-radiobutton-width);height:var(--p-radiobutton-height);transition:background var(--p-radiobutton-transition-duration),color var(--p-radiobutton-transition-duration),border-color var(--p-radiobutton-transition-duration),box-shadow var(--p-radiobutton-transition-duration),outline-color var(--p-radiobutton-transition-duration);outline-color:transparent;box-shadow:var(--p-radiobutton-shadow);}.p-radiobutton-icon{transition-duration:var(--p-radiobutton-transition-duration);background:transparent;font-size:var(--p-radiobutton-icon-size);width:var(--p-radiobutton-icon-size);height:var(--p-radiobutton-icon-size);border-radius:50%;backface-visibility:hidden;transform:translateZ(0) scale(0.1);}.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box{border-color:var(--p-radiobutton-hover-border-color);}.p-radiobutton-checked .p-radiobutton-box{border-color:var(--p-radiobutton-checked-border-color);background:var(--p-radiobutton-checked-background);}.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon{background:var(--p-radiobutton-icon-checked-color);transform:translateZ(0) scale(1,1);visibility:visible;}.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box{border-color:var(--p-radiobutton-checked-hover-border-color);background:var(--p-radiobutton-checked-hover-background);}.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon{background:var(--p-radiobutton-icon-checked-hover-color);}.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box{border-color:var(--p-radiobutton-focus-border-color);box-shadow:var(--p-radiobutton-focus-ring-shadow);outline:var(--p-radiobutton-focus-ring-width) var(--p-radiobutton-focus-ring-style) var(--p-radiobutton-focus-ring-color);outline-offset:var(--p-radiobutton-focus-ring-offset);}.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box{border-color:var(--p-radiobutton-checked-focus-border-color);}.p-radiobutton.p-invalid > .p-radiobutton-box{border-color:var(--p-radiobutton-invalid-border-color);}.p-radiobutton.p-variant-filled .p-radiobutton-box{background:var(--p-radiobutton-filled-background);}.p-radiobutton.p-variant-filled.p-radiobutton-checked .p-radiobutton-box{background:var(--p-radiobutton-checked-background);}.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box{background:var(--p-radiobutton-checked-hover-background);}.p-radiobutton.p-disabled{opacity:1;}.p-radiobutton.p-disabled .p-radiobutton-box{background:var(--p-radiobutton-disabled-background);border-color:var(--p-radiobutton-checked-disabled-border-color);}.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon{background:var(--p-radiobutton-icon-disabled-color);}.p-radiobutton-sm,.p-radiobutton-sm .p-radiobutton-box{width:var(--p-radiobutton-sm-width);height:var(--p-radiobutton-sm-height);}.p-radiobutton-sm .p-radiobutton-icon{font-size:var(--p-radiobutton-icon-sm-size);width:var(--p-radiobutton-icon-sm-size);height:var(--p-radiobutton-icon-sm-size);}.p-radiobutton-lg,.p-radiobutton-lg .p-radiobutton-box{width:var(--p-radiobutton-lg-width);height:var(--p-radiobutton-lg-height);}.p-radiobutton-lg .p-radiobutton-icon{font-size:var(--p-radiobutton-icon-lg-size);width:var(--p-radiobutton-icon-lg-size);height:var(--p-radiobutton-icon-lg-size);}"
-    },
-    {
-        "name": "radiobuttongroup-style",
-        "value": ".p-radiobutton-group{display:inline-flex;}"
-    },
-    {
-        "name": "rating-variables",
-        "value": ":root,:host{--p-rating-icon-size:1rem;--p-rating-icon-color:var(--p-text-muted-color);--p-rating-icon-hover-color:var(--p-primary-color);--p-rating-icon-active-color:var(--p-primary-color);--p-rating-gap:0.25rem;--p-rating-transition-duration:var(--p-transition-duration);--p-rating-focus-ring-width:var(--p-focus-ring-width);--p-rating-focus-ring-style:var(--p-focus-ring-style);--p-rating-focus-ring-color:var(--p-focus-ring-color);--p-rating-focus-ring-offset:var(--p-focus-ring-offset);--p-rating-focus-ring-shadow:var(--p-focus-ring-shadow);}"
-    },
-    {
-        "name": "rating-style",
-        "value": ".p-rating{position:relative;display:inline-flex;align-items:center;gap:var(--p-rating-gap);}.p-rating-option{display:inline-flex;align-items:center;cursor:pointer;outline-color:transparent;border-radius:50%;transition:background var(--p-rating-transition-duration),color var(--p-rating-transition-duration),border-color var(--p-rating-transition-duration),outline-color var(--p-rating-transition-duration),box-shadow var(--p-rating-transition-duration);}.p-rating-option.p-focus-visible{box-shadow:var(--p-rating-focus-ring-shadow);outline:var(--p-rating-focus-ring-width) var(--p-rating-focus-ring-style) var(--p-rating-focus-ring-color);outline-offset:var(--p-rating-focus-ring-offset);}.p-rating-icon{color:var(--p-rating-icon-color);transition:background var(--p-rating-transition-duration),color var(--p-rating-transition-duration),border-color var(--p-rating-transition-duration),outline-color var(--p-rating-transition-duration),box-shadow var(--p-rating-transition-duration);font-size:var(--p-rating-icon-size);width:var(--p-rating-icon-size);height:var(--p-rating-icon-size);}.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon{color:var(--p-rating-icon-hover-color);}.p-rating-option-active .p-rating-icon{color:var(--p-rating-icon-active-color);}.p-rating-icon.p-invalid{stroke:var(--p-rating-invalid-icon-color);}.p-rating.p-readonly .p-rating-option{cursor:not-allowed;}"
-    },
-    {
-        "name": "select-variables",
-        "value": ":root,:host{--p-select-empty-message-padding:var(--p-list-option-padding);--p-select-checkmark-color:var(--p-list-option-color);--p-select-checkmark-gutter-start:-0.375rem;--p-select-checkmark-gutter-end:0.375rem;--p-select-clear-icon-color:var(--p-form-field-icon-color);--p-select-option-group-background:var(--p-list-option-group-background);--p-select-option-group-color:var(--p-list-option-group-color);--p-select-option-group-font-weight:var(--p-list-option-group-font-weight);--p-select-option-group-padding:var(--p-list-option-group-padding);--p-select-option-focus-background:var(--p-list-option-focus-background);--p-select-option-selected-background:var(--p-list-option-selected-background);--p-select-option-selected-focus-background:var(--p-list-option-selected-focus-background);--p-select-option-color:var(--p-list-option-color);--p-select-option-focus-color:var(--p-list-option-focus-color);--p-select-option-selected-color:var(--p-list-option-selected-color);--p-select-option-selected-focus-color:var(--p-list-option-selected-focus-color);--p-select-option-padding:var(--p-list-option-padding);--p-select-option-border-radius:var(--p-list-option-border-radius);--p-select-list-padding:var(--p-list-padding);--p-select-list-gap:var(--p-list-gap);--p-select-list-header-padding:var(--p-list-header-padding);--p-select-overlay-background:var(--p-overlay-select-background);--p-select-overlay-border-color:var(--p-overlay-select-border-color);--p-select-overlay-border-radius:var(--p-overlay-select-border-radius);--p-select-overlay-color:var(--p-overlay-select-color);--p-select-overlay-shadow:var(--p-overlay-select-shadow);--p-select-dropdown-width:2.5rem;--p-select-dropdown-color:var(--p-form-field-icon-color);--p-select-background:var(--p-form-field-background);--p-select-disabled-background:var(--p-form-field-disabled-background);--p-select-filled-background:var(--p-form-field-filled-background);--p-select-filled-hover-background:var(--p-form-field-filled-hover-background);--p-select-filled-focus-background:var(--p-form-field-filled-focus-background);--p-select-border-color:var(--p-form-field-border-color);--p-select-hover-border-color:var(--p-form-field-hover-border-color);--p-select-focus-border-color:var(--p-form-field-focus-border-color);--p-select-invalid-border-color:var(--p-form-field-invalid-border-color);--p-select-color:var(--p-form-field-color);--p-select-disabled-color:var(--p-form-field-disabled-color);--p-select-placeholder-color:var(--p-form-field-placeholder-color);--p-select-invalid-placeholder-color:var(--p-form-field-invalid-placeholder-color);--p-select-shadow:var(--p-form-field-shadow);--p-select-padding-x:var(--p-form-field-padding-x);--p-select-padding-y:var(--p-form-field-padding-y);--p-select-border-radius:var(--p-form-field-border-radius);--p-select-transition-duration:var(--p-form-field-transition-duration);--p-select-lg-font-size:var(--p-form-field-lg-font-size);--p-select-lg-padding-x:var(--p-form-field-lg-padding-x);--p-select-lg-padding-y:var(--p-form-field-lg-padding-y);--p-select-sm-font-size:var(--p-form-field-sm-font-size);--p-select-sm-padding-x:var(--p-form-field-sm-padding-x);--p-select-sm-padding-y:var(--p-form-field-sm-padding-y);--p-select-focus-ring-width:var(--p-form-field-focus-ring-width);--p-select-focus-ring-style:var(--p-form-field-focus-ring-style);--p-select-focus-ring-color:var(--p-form-field-focus-ring-color);--p-select-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-select-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);}"
-    },
-    {
-        "name": "select-style",
-        "value": ".p-select{display:inline-flex;cursor:pointer;position:relative;user-select:none;background:var(--p-select-background);border:1px solid var(--p-select-border-color);transition:background var(--p-select-transition-duration),color var(--p-select-transition-duration),border-color var(--p-select-transition-duration),outline-color var(--p-select-transition-duration),box-shadow var(--p-select-transition-duration);border-radius:var(--p-select-border-radius);outline-color:transparent;box-shadow:var(--p-select-shadow);}.p-select:not(.p-disabled):hover{border-color:var(--p-select-hover-border-color);}.p-select:not(.p-disabled).p-focus{border-color:var(--p-select-focus-border-color);box-shadow:var(--p-select-focus-ring-shadow);outline:var(--p-select-focus-ring-width) var(--p-select-focus-ring-style) var(--p-select-focus-ring-color);outline-offset:var(--p-select-focus-ring-offset);}.p-select.p-variant-filled{background:var(--p-select-filled-background);}.p-select.p-variant-filled:not(.p-disabled):hover{background:var(--p-select-filled-hover-background);}.p-select.p-variant-filled:not(.p-disabled).p-focus{background:var(--p-select-filled-focus-background);}.p-select.p-invalid{border-color:var(--p-select-invalid-border-color);}.p-select.p-disabled{opacity:1;background:var(--p-select-disabled-background);}.p-select-clear-icon{align-self:center;color:var(--p-select-clear-icon-color);inset-inline-end:var(--p-select-dropdown-width);}.p-select-dropdown{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:var(--p-select-dropdown-color);width:var(--p-select-dropdown-width);border-start-end-radius:var(--p-select-border-radius);border-end-end-radius:var(--p-select-border-radius);}.p-select-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;padding:var(--p-select-padding-y) var(--p-select-padding-x);text-overflow:ellipsis;cursor:pointer;color:var(--p-select-color);background:transparent;border:0 none;outline:0 none;font-size:1rem;}.p-select-label.p-placeholder{color:var(--p-select-placeholder-color);}.p-select.p-invalid .p-select-label.p-placeholder{color:var(--p-select-invalid-placeholder-color);}.p-select.p-disabled .p-select-label{color:var(--p-select-disabled-color);}.p-select-label-empty{overflow:hidden;opacity:0;}input.p-select-label{cursor:default;}.p-select-overlay{position:absolute;top:0;left:0;background:var(--p-select-overlay-background);color:var(--p-select-overlay-color);border:1px solid var(--p-select-overlay-border-color);border-radius:var(--p-select-overlay-border-radius);box-shadow:var(--p-select-overlay-shadow);min-width:100%;transform-origin:inherit;will-change:transform;}.p-select-header{padding:var(--p-select-list-header-padding);}.p-select-filter{width:100%;}.p-select-list-container{overflow:auto;}.p-select-option-group{cursor:auto;margin:0;padding:var(--p-select-option-group-padding);background:var(--p-select-option-group-background);color:var(--p-select-option-group-color);font-weight:var(--p-select-option-group-font-weight);}.p-select-list{margin:0;padding:0;list-style-type:none;padding:var(--p-select-list-padding);gap:var(--p-select-list-gap);display:flex;flex-direction:column;}.p-select-option{cursor:pointer;font-weight:normal;white-space:nowrap;position:relative;overflow:hidden;display:flex;align-items:center;padding:var(--p-select-option-padding);border:0 none;color:var(--p-select-option-color);background:transparent;transition:background var(--p-select-transition-duration),color var(--p-select-transition-duration),border-color var(--p-select-transition-duration),box-shadow var(--p-select-transition-duration),outline-color var(--p-select-transition-duration);border-radius:var(--p-select-option-border-radius);}.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus{background:var(--p-select-option-focus-background);color:var(--p-select-option-focus-color);}.p-select-option:not(.p-select-option-selected):not(.p-disabled):hover{background:var(--p-select-option-focus-background);color:var(--p-select-option-focus-color);}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background);color:var(--p-select-option-selected-color);}.p-select-option.p-select-option-selected.p-focus{background:var(--p-select-option-selected-focus-background);color:var(--p-select-option-selected-focus-color);}.p-select-option-blank-icon{flex-shrink:0;}.p-select-option-check-icon{position:relative;flex-shrink:0;margin-inline-start:var(--p-select-checkmark-gutter-start);margin-inline-end:var(--p-select-checkmark-gutter-end);color:var(--p-select-checkmark-color);}.p-select-empty-message{padding:var(--p-select-empty-message-padding);}.p-select-fluid{display:flex;width:100%;}.p-select-sm .p-select-label{font-size:var(--p-select-sm-font-size);padding-block:var(--p-select-sm-padding-y);padding-inline:var(--p-select-sm-padding-x);}.p-select-sm .p-select-dropdown .p-icon{font-size:var(--p-select-sm-font-size);width:var(--p-select-sm-font-size);height:var(--p-select-sm-font-size);}.p-select-lg .p-select-label{font-size:var(--p-select-lg-font-size);padding-block:var(--p-select-lg-padding-y);padding-inline:var(--p-select-lg-padding-x);}.p-select-lg .p-select-dropdown .p-icon{font-size:var(--p-select-lg-font-size);width:var(--p-select-lg-font-size);height:var(--p-select-lg-font-size);}.p-floatlabel-in .p-select-filter{padding-block-start:var(--p-select-padding-y);padding-block-end:var(--p-select-padding-y);}"
-    },
-    {
-        "name": "selectbutton-variables",
-        "value": ":root,:host{--p-selectbutton-border-radius:var(--p-form-field-border-radius);--p-selectbutton-invalid-border-color:var(--p-form-field-invalid-border-color);}.p-dark{--p-selectbutton-invalid-border-color:var(--p-form-field-invalid-border-color);}"
-    },
-    {
-        "name": "selectbutton-style",
-        "value": ".p-selectbutton{display:inline-flex;user-select:none;vertical-align:bottom;outline-color:transparent;border-radius:var(--p-selectbutton-border-radius);}.p-selectbutton .p-togglebutton{border-radius:0;border-width:1px 1px 1px 0;}.p-selectbutton .p-togglebutton:focus-visible{position:relative;z-index:1;}.p-selectbutton .p-togglebutton:first-child{border-inline-start-width:1px;border-start-start-radius:var(--p-selectbutton-border-radius);border-end-start-radius:var(--p-selectbutton-border-radius);}.p-selectbutton .p-togglebutton:last-child{border-start-end-radius:var(--p-selectbutton-border-radius);border-end-end-radius:var(--p-selectbutton-border-radius);}.p-selectbutton.p-invalid{outline:1px solid var(--p-selectbutton-invalid-border-color);outline-offset:0;}.p-selectbutton-fluid{width:100%;}.p-selectbutton-fluid .p-togglebutton{flex:1 1 0;}"
-    },
-    {
-        "name": "slider-variables",
-        "value": ":root,:host{--p-slider-handle-width:20px;--p-slider-handle-height:20px;--p-slider-handle-border-radius:50%;--p-slider-handle-background:var(--p-content-border-color);--p-slider-handle-hover-background:var(--p-content-border-color);--p-slider-handle-focus-ring-width:var(--p-focus-ring-width);--p-slider-handle-focus-ring-style:var(--p-focus-ring-style);--p-slider-handle-focus-ring-color:var(--p-focus-ring-color);--p-slider-handle-focus-ring-offset:var(--p-focus-ring-offset);--p-slider-handle-focus-ring-shadow:var(--p-focus-ring-shadow);--p-slider-handle-content-border-radius:50%;--p-slider-handle-content-hover-background:var(--p-content-background);--p-slider-handle-content-width:16px;--p-slider-handle-content-height:16px;--p-slider-handle-content-shadow:0px 0.5px 0px 0px rgba(0,0,0,0.08),0px 1px 1px 0px rgba(0,0,0,0.14);--p-slider-range-background:var(--p-primary-color);--p-slider-track-background:var(--p-content-border-color);--p-slider-track-border-radius:var(--p-content-border-radius);--p-slider-track-size:3px;--p-slider-transition-duration:var(--p-transition-duration);--p-slider-handle-content-background:var(--p-surface-0);}.p-dark{--p-slider-handle-content-background:var(--p-surface-950);}"
-    },
-    {
-        "name": "slider-style",
-        "value": ".p-slider{display:block;position:relative;background:var(--p-slider-track-background);border-radius:var(--p-slider-track-border-radius);}.p-slider-handle{cursor:grab;touch-action:none;user-select:none;display:flex;justify-content:center;align-items:center;height:var(--p-slider-handle-height);width:var(--p-slider-handle-width);background:var(--p-slider-handle-background);border-radius:var(--p-slider-handle-border-radius);transition:background var(--p-slider-transition-duration),color var(--p-slider-transition-duration),border-color var(--p-slider-transition-duration),box-shadow var(--p-slider-transition-duration),outline-color var(--p-slider-transition-duration);outline-color:transparent;}.p-slider-handle::before{content:'';width:var(--p-slider-handle-content-width);height:var(--p-slider-handle-content-height);display:block;background:var(--p-slider-handle-content-background);border-radius:var(--p-slider-handle-content-border-radius);box-shadow:var(--p-slider-handle-content-shadow);transition:background var(--p-slider-transition-duration);}.p-slider:not(.p-disabled) .p-slider-handle:hover{background:var(--p-slider-handle-hover-background);}.p-slider:not(.p-disabled) .p-slider-handle:hover::before{background:var(--p-slider-handle-content-hover-background);}.p-slider-handle:focus-visible{box-shadow:var(--p-slider-handle-focus-ring-shadow);outline:var(--p-slider-handle-focus-ring-width) var(--p-slider-handle-focus-ring-style) var(--p-slider-handle-focus-ring-color);outline-offset:var(--p-slider-handle-focus-ring-offset);}.p-slider-range{display:block;background:var(--p-slider-range-background);border-radius:var(--p-slider-track-border-radius);}.p-slider.p-slider-horizontal{height:var(--p-slider-track-size);}.p-slider-horizontal .p-slider-range{inset-block-start:0;inset-inline-start:0;height:100%;}.p-slider-horizontal .p-slider-handle{inset-block-start:50%;margin-block-start:calc(-1 * calc(var(--p-slider-handle-height) / 2));margin-inline-start:calc(-1 * calc(var(--p-slider-handle-width) / 2));}.p-slider-vertical{min-height:100px;width:var(--p-slider-track-size);}.p-slider-vertical .p-slider-handle{inset-inline-start:50%;margin-inline-start:calc(-1 * calc(var(--p-slider-handle-width) / 2));margin-block-end:calc(-1 * calc(var(--p-slider-handle-height) / 2));}.p-slider-vertical .p-slider-range{inset-block-end:0;inset-inline-start:0;width:100%;}"
-    },
-    {
-        "name": "textarea-variables",
-        "value": ":root,:host{--p-textarea-background:var(--p-form-field-background);--p-textarea-disabled-background:var(--p-form-field-disabled-background);--p-textarea-filled-background:var(--p-form-field-filled-background);--p-textarea-filled-hover-background:var(--p-form-field-filled-hover-background);--p-textarea-filled-focus-background:var(--p-form-field-filled-focus-background);--p-textarea-border-color:var(--p-form-field-border-color);--p-textarea-hover-border-color:var(--p-form-field-hover-border-color);--p-textarea-focus-border-color:var(--p-form-field-focus-border-color);--p-textarea-invalid-border-color:var(--p-form-field-invalid-border-color);--p-textarea-color:var(--p-form-field-color);--p-textarea-disabled-color:var(--p-form-field-disabled-color);--p-textarea-placeholder-color:var(--p-form-field-placeholder-color);--p-textarea-invalid-placeholder-color:var(--p-form-field-invalid-placeholder-color);--p-textarea-shadow:var(--p-form-field-shadow);--p-textarea-padding-x:var(--p-form-field-padding-x);--p-textarea-padding-y:var(--p-form-field-padding-y);--p-textarea-border-radius:var(--p-form-field-border-radius);--p-textarea-transition-duration:var(--p-form-field-transition-duration);--p-textarea-lg-font-size:var(--p-form-field-lg-font-size);--p-textarea-lg-padding-x:var(--p-form-field-lg-padding-x);--p-textarea-lg-padding-y:var(--p-form-field-lg-padding-y);--p-textarea-sm-font-size:var(--p-form-field-sm-font-size);--p-textarea-sm-padding-x:var(--p-form-field-sm-padding-x);--p-textarea-sm-padding-y:var(--p-form-field-sm-padding-y);--p-textarea-focus-ring-width:var(--p-form-field-focus-ring-width);--p-textarea-focus-ring-style:var(--p-form-field-focus-ring-style);--p-textarea-focus-ring-color:var(--p-form-field-focus-ring-color);--p-textarea-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-textarea-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);}"
-    },
-    {
-        "name": "textarea-style",
-        "value": ".p-textarea{font-family:inherit;font-feature-settings:inherit;font-size:1rem;color:var(--p-textarea-color);background:var(--p-textarea-background);padding-block:var(--p-textarea-padding-y);padding-inline:var(--p-textarea-padding-x);border:1px solid var(--p-textarea-border-color);transition:background var(--p-textarea-transition-duration),color var(--p-textarea-transition-duration),border-color var(--p-textarea-transition-duration),outline-color var(--p-textarea-transition-duration),box-shadow var(--p-textarea-transition-duration);appearance:none;border-radius:var(--p-textarea-border-radius);outline-color:transparent;box-shadow:var(--p-textarea-shadow);}.p-textarea:enabled:hover{border-color:var(--p-textarea-hover-border-color);}.p-textarea:enabled:focus{border-color:var(--p-textarea-focus-border-color);box-shadow:var(--p-textarea-focus-ring-shadow);outline:var(--p-textarea-focus-ring-width) var(--p-textarea-focus-ring-style) var(--p-textarea-focus-ring-color);outline-offset:var(--p-textarea-focus-ring-offset);}.p-textarea.p-invalid{border-color:var(--p-textarea-invalid-border-color);}.p-textarea.p-variant-filled{background:var(--p-textarea-filled-background);}.p-textarea.p-variant-filled:enabled:hover{background:var(--p-textarea-filled-hover-background);}.p-textarea.p-variant-filled:enabled:focus{background:var(--p-textarea-filled-focus-background);}.p-textarea:disabled{opacity:1;background:var(--p-textarea-disabled-background);color:var(--p-textarea-disabled-color);}.p-textarea::placeholder{color:var(--p-textarea-placeholder-color);}.p-textarea.p-invalid::placeholder{color:var(--p-textarea-invalid-placeholder-color);}.p-textarea-fluid{width:100%;}.p-textarea-resizable{overflow:hidden;resize:none;}.p-textarea-sm{font-size:var(--p-textarea-sm-font-size);padding-block:var(--p-textarea-sm-padding-y);padding-inline:var(--p-textarea-sm-padding-x);}.p-textarea-lg{font-size:var(--p-textarea-lg-font-size);padding-block:var(--p-textarea-lg-padding-y);padding-inline:var(--p-textarea-lg-padding-x);}"
-    },
-    {
-        "name": "togglebutton-variables",
-        "value": ":root,:host{--p-togglebutton-content-padding:0.25rem 0.75rem;--p-togglebutton-content-border-radius:var(--p-content-border-radius);--p-togglebutton-content-checked-shadow:0px 1px 2px 0px rgba(0,0,0,0.02),0px 1px 2px 0px rgba(0,0,0,0.04);--p-togglebutton-content-lg-padding:0.25rem 0.75rem;--p-togglebutton-content-sm-padding:0.25rem 0.75rem;--p-togglebutton-icon-disabled-color:var(--p-form-field-disabled-color);--p-togglebutton-padding:0.25rem;--p-togglebutton-border-radius:var(--p-content-border-radius);--p-togglebutton-gap:0.5rem;--p-togglebutton-font-weight:500;--p-togglebutton-disabled-background:var(--p-form-field-disabled-background);--p-togglebutton-disabled-border-color:var(--p-form-field-disabled-background);--p-togglebutton-disabled-color:var(--p-form-field-disabled-color);--p-togglebutton-invalid-border-color:var(--p-form-field-invalid-border-color);--p-togglebutton-transition-duration:var(--p-form-field-transition-duration);--p-togglebutton-lg-font-size:var(--p-form-field-lg-font-size);--p-togglebutton-lg-padding:0.25rem;--p-togglebutton-sm-font-size:var(--p-form-field-sm-font-size);--p-togglebutton-sm-padding:0.25rem;--p-togglebutton-focus-ring-width:var(--p-focus-ring-width);--p-togglebutton-focus-ring-style:var(--p-focus-ring-style);--p-togglebutton-focus-ring-color:var(--p-focus-ring-color);--p-togglebutton-focus-ring-offset:var(--p-focus-ring-offset);--p-togglebutton-focus-ring-shadow:var(--p-focus-ring-shadow);--p-togglebutton-icon-color:var(--p-surface-500);--p-togglebutton-icon-hover-color:var(--p-surface-700);--p-togglebutton-icon-checked-color:var(--p-surface-900);--p-togglebutton-content-checked-background:var(--p-surface-0);--p-togglebutton-background:var(--p-surface-100);--p-togglebutton-checked-background:var(--p-surface-100);--p-togglebutton-hover-background:var(--p-surface-100);--p-togglebutton-border-color:var(--p-surface-100);--p-togglebutton-color:var(--p-surface-500);--p-togglebutton-hover-color:var(--p-surface-700);--p-togglebutton-checked-color:var(--p-surface-900);--p-togglebutton-checked-border-color:var(--p-surface-100);}.p-dark{--p-togglebutton-icon-color:var(--p-surface-400);--p-togglebutton-icon-hover-color:var(--p-surface-300);--p-togglebutton-icon-checked-color:var(--p-surface-0);--p-togglebutton-content-checked-background:var(--p-surface-800);--p-togglebutton-background:var(--p-surface-950);--p-togglebutton-checked-background:var(--p-surface-950);--p-togglebutton-hover-background:var(--p-surface-950);--p-togglebutton-border-color:var(--p-surface-950);--p-togglebutton-color:var(--p-surface-400);--p-togglebutton-hover-color:var(--p-surface-300);--p-togglebutton-checked-color:var(--p-surface-0);--p-togglebutton-checked-border-color:var(--p-surface-950);}"
-    },
-    {
-        "name": "togglebutton-style",
-        "value": ".p-togglebutton{display:inline-flex;cursor:pointer;user-select:none;overflow:hidden;position:relative;color:var(--p-togglebutton-color);background:var(--p-togglebutton-background);border:1px solid var(--p-togglebutton-border-color);padding:var(--p-togglebutton-padding);font-size:1rem;font-family:inherit;font-feature-settings:inherit;transition:background var(--p-togglebutton-transition-duration),color var(--p-togglebutton-transition-duration),border-color var(--p-togglebutton-transition-duration),outline-color var(--p-togglebutton-transition-duration),box-shadow var(--p-togglebutton-transition-duration);border-radius:var(--p-togglebutton-border-radius);outline-color:transparent;font-weight:var(--p-togglebutton-font-weight);}.p-togglebutton-content{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;gap:var(--p-togglebutton-gap);padding:var(--p-togglebutton-content-padding);background:transparent;border-radius:var(--p-togglebutton-content-border-radius);transition:background var(--p-togglebutton-transition-duration),color var(--p-togglebutton-transition-duration),border-color var(--p-togglebutton-transition-duration),outline-color var(--p-togglebutton-transition-duration),box-shadow var(--p-togglebutton-transition-duration);}.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover{background:var(--p-togglebutton-hover-background);color:var(--p-togglebutton-hover-color);}.p-togglebutton.p-togglebutton-checked{background:var(--p-togglebutton-checked-background);border-color:var(--p-togglebutton-checked-border-color);color:var(--p-togglebutton-checked-color);}.p-togglebutton-checked .p-togglebutton-content{background:var(--p-togglebutton-content-checked-background);box-shadow:var(--p-togglebutton-content-checked-shadow);}.p-togglebutton:focus-visible{box-shadow:var(--p-togglebutton-focus-ring-shadow);outline:var(--p-togglebutton-focus-ring-width) var(--p-togglebutton-focus-ring-style) var(--p-togglebutton-focus-ring-color);outline-offset:var(--p-togglebutton-focus-ring-offset);}.p-togglebutton.p-invalid{border-color:var(--p-togglebutton-invalid-border-color);}.p-togglebutton:disabled{opacity:1;cursor:default;background:var(--p-togglebutton-disabled-background);border-color:var(--p-togglebutton-disabled-border-color);color:var(--p-togglebutton-disabled-color);}.p-togglebutton-label,.p-togglebutton-icon{position:relative;transition:none;}.p-togglebutton-icon{color:var(--p-togglebutton-icon-color);}.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon{color:var(--p-togglebutton-icon-hover-color);}.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon{color:var(--p-togglebutton-icon-checked-color);}.p-togglebutton:disabled .p-togglebutton-icon{color:var(--p-togglebutton-icon-disabled-color);}.p-togglebutton-sm{padding:var(--p-togglebutton-sm-padding);font-size:var(--p-togglebutton-sm-font-size);}.p-togglebutton-sm .p-togglebutton-content{padding:var(--p-togglebutton-content-sm-padding);}.p-togglebutton-lg{padding:var(--p-togglebutton-lg-padding);font-size:var(--p-togglebutton-lg-font-size);}.p-togglebutton-lg .p-togglebutton-content{padding:var(--p-togglebutton-content-lg-padding);}.p-togglebutton-fluid{width:100%;}"
-    },
-    {
-        "name": "toggleswitch-variables",
-        "value": ":root,:host{--p-toggleswitch-handle-border-radius:50%;--p-toggleswitch-handle-size:1rem;--p-toggleswitch-width:2.5rem;--p-toggleswitch-height:1.5rem;--p-toggleswitch-border-radius:30px;--p-toggleswitch-gap:0.25rem;--p-toggleswitch-shadow:var(--p-form-field-shadow);--p-toggleswitch-border-width:1px;--p-toggleswitch-border-color:transparent;--p-toggleswitch-hover-border-color:transparent;--p-toggleswitch-checked-border-color:transparent;--p-toggleswitch-checked-hover-border-color:transparent;--p-toggleswitch-invalid-border-color:var(--p-form-field-invalid-border-color);--p-toggleswitch-transition-duration:var(--p-form-field-transition-duration);--p-toggleswitch-slide-duration:0.2s;--p-toggleswitch-focus-ring-width:var(--p-focus-ring-width);--p-toggleswitch-focus-ring-style:var(--p-focus-ring-style);--p-toggleswitch-focus-ring-color:var(--p-focus-ring-color);--p-toggleswitch-focus-ring-offset:var(--p-focus-ring-offset);--p-toggleswitch-focus-ring-shadow:var(--p-focus-ring-shadow);--p-toggleswitch-handle-background:var(--p-surface-0);--p-toggleswitch-handle-disabled-background:var(--p-form-field-disabled-color);--p-toggleswitch-handle-hover-background:var(--p-surface-0);--p-toggleswitch-handle-checked-background:var(--p-surface-0);--p-toggleswitch-handle-checked-hover-background:var(--p-surface-0);--p-toggleswitch-handle-color:var(--p-text-muted-color);--p-toggleswitch-handle-hover-color:var(--p-text-color);--p-toggleswitch-handle-checked-color:var(--p-primary-color);--p-toggleswitch-handle-checked-hover-color:var(--p-primary-hover-color);--p-toggleswitch-background:var(--p-surface-300);--p-toggleswitch-disabled-background:var(--p-form-field-disabled-background);--p-toggleswitch-hover-background:var(--p-surface-400);--p-toggleswitch-checked-background:var(--p-primary-color);--p-toggleswitch-checked-hover-background:var(--p-primary-hover-color);}.p-dark{--p-toggleswitch-handle-background:var(--p-surface-400);--p-toggleswitch-handle-disabled-background:var(--p-surface-900);--p-toggleswitch-handle-hover-background:var(--p-surface-300);--p-toggleswitch-handle-checked-background:var(--p-surface-900);--p-toggleswitch-handle-checked-hover-background:var(--p-surface-900);--p-toggleswitch-handle-color:var(--p-surface-900);--p-toggleswitch-handle-hover-color:var(--p-surface-800);--p-toggleswitch-handle-checked-color:var(--p-primary-color);--p-toggleswitch-handle-checked-hover-color:var(--p-primary-hover-color);--p-toggleswitch-background:var(--p-surface-700);--p-toggleswitch-disabled-background:var(--p-surface-600);--p-toggleswitch-hover-background:var(--p-surface-600);--p-toggleswitch-checked-background:var(--p-primary-color);--p-toggleswitch-checked-hover-background:var(--p-primary-hover-color);}"
-    },
-    {
-        "name": "toggleswitch-style",
-        "value": ".p-toggleswitch{display:inline-block;width:var(--p-toggleswitch-width);height:var(--p-toggleswitch-height);}.p-toggleswitch-input{cursor:pointer;appearance:none;position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:1;outline:0 none;border-radius:var(--p-toggleswitch-border-radius);}.p-toggleswitch-slider{cursor:pointer;width:100%;height:100%;border-width:var(--p-toggleswitch-border-width);border-style:solid;border-color:var(--p-toggleswitch-border-color);background:var(--p-toggleswitch-background);transition:background var(--p-toggleswitch-transition-duration),color var(--p-toggleswitch-transition-duration),border-color var(--p-toggleswitch-transition-duration),outline-color var(--p-toggleswitch-transition-duration),box-shadow var(--p-toggleswitch-transition-duration);border-radius:var(--p-toggleswitch-border-radius);outline-color:transparent;box-shadow:var(--p-toggleswitch-shadow);}.p-toggleswitch-handle{position:absolute;top:50%;display:flex;justify-content:center;align-items:center;background:var(--p-toggleswitch-handle-background);color:var(--p-toggleswitch-handle-color);width:var(--p-toggleswitch-handle-size);height:var(--p-toggleswitch-handle-size);inset-inline-start:var(--p-toggleswitch-gap);margin-block-start:calc(-1 * calc(var(--p-toggleswitch-handle-size) / 2));border-radius:var(--p-toggleswitch-handle-border-radius);transition:background var(--p-toggleswitch-transition-duration),color var(--p-toggleswitch-transition-duration),inset-inline-start var(--p-toggleswitch-slide-duration),box-shadow var(--p-toggleswitch-slide-duration);}.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider{background:var(--p-toggleswitch-checked-background);border-color:var(--p-toggleswitch-checked-border-color);}.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle{background:var(--p-toggleswitch-handle-checked-background);color:var(--p-toggleswitch-handle-checked-color);inset-inline-start:calc(var(--p-toggleswitch-width) - calc(var(--p-toggleswitch-handle-size) + var(--p-toggleswitch-gap)));}.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider{background:var(--p-toggleswitch-hover-background);border-color:var(--p-toggleswitch-hover-border-color);}.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle{background:var(--p-toggleswitch-handle-hover-background);color:var(--p-toggleswitch-handle-hover-color);}.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider{background:var(--p-toggleswitch-checked-hover-background);border-color:var(--p-toggleswitch-checked-hover-border-color);}.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle{background:var(--p-toggleswitch-handle-checked-hover-background);color:var(--p-toggleswitch-handle-checked-hover-color);}.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider{box-shadow:var(--p-toggleswitch-focus-ring-shadow);outline:var(--p-toggleswitch-focus-ring-width) var(--p-toggleswitch-focus-ring-style) var(--p-toggleswitch-focus-ring-color);outline-offset:var(--p-toggleswitch-focus-ring-offset);}.p-toggleswitch.p-invalid > .p-toggleswitch-slider{border-color:var(--p-toggleswitch-invalid-border-color);}.p-toggleswitch.p-disabled{opacity:1;}.p-toggleswitch.p-disabled .p-toggleswitch-slider{background:var(--p-toggleswitch-disabled-background);}.p-toggleswitch.p-disabled .p-toggleswitch-handle{background:var(--p-toggleswitch-handle-disabled-background);}"
-    },
-    {
-        "name": "treeselect-variables",
-        "value": ":root,:host{--p-treeselect-clear-icon-color:var(--p-form-field-icon-color);--p-treeselect-chip-border-radius:var(--p-border-radius-sm);--p-treeselect-empty-message-padding:var(--p-list-option-padding);--p-treeselect-tree-padding:var(--p-list-padding);--p-treeselect-overlay-background:var(--p-overlay-select-background);--p-treeselect-overlay-border-color:var(--p-overlay-select-border-color);--p-treeselect-overlay-border-radius:var(--p-overlay-select-border-radius);--p-treeselect-overlay-color:var(--p-overlay-select-color);--p-treeselect-overlay-shadow:var(--p-overlay-select-shadow);--p-treeselect-dropdown-width:2.5rem;--p-treeselect-dropdown-color:var(--p-form-field-icon-color);--p-treeselect-background:var(--p-form-field-background);--p-treeselect-disabled-background:var(--p-form-field-disabled-background);--p-treeselect-filled-background:var(--p-form-field-filled-background);--p-treeselect-filled-hover-background:var(--p-form-field-filled-hover-background);--p-treeselect-filled-focus-background:var(--p-form-field-filled-focus-background);--p-treeselect-border-color:var(--p-form-field-border-color);--p-treeselect-hover-border-color:var(--p-form-field-hover-border-color);--p-treeselect-focus-border-color:var(--p-form-field-focus-border-color);--p-treeselect-invalid-border-color:var(--p-form-field-invalid-border-color);--p-treeselect-color:var(--p-form-field-color);--p-treeselect-disabled-color:var(--p-form-field-disabled-color);--p-treeselect-placeholder-color:var(--p-form-field-placeholder-color);--p-treeselect-invalid-placeholder-color:var(--p-form-field-invalid-placeholder-color);--p-treeselect-shadow:var(--p-form-field-shadow);--p-treeselect-padding-x:var(--p-form-field-padding-x);--p-treeselect-padding-y:var(--p-form-field-padding-y);--p-treeselect-border-radius:var(--p-form-field-border-radius);--p-treeselect-transition-duration:var(--p-form-field-transition-duration);--p-treeselect-lg-font-size:var(--p-form-field-lg-font-size);--p-treeselect-lg-padding-x:var(--p-form-field-lg-padding-x);--p-treeselect-lg-padding-y:var(--p-form-field-lg-padding-y);--p-treeselect-sm-font-size:var(--p-form-field-sm-font-size);--p-treeselect-sm-padding-x:var(--p-form-field-sm-padding-x);--p-treeselect-sm-padding-y:var(--p-form-field-sm-padding-y);--p-treeselect-focus-ring-width:var(--p-form-field-focus-ring-width);--p-treeselect-focus-ring-style:var(--p-form-field-focus-ring-style);--p-treeselect-focus-ring-color:var(--p-form-field-focus-ring-color);--p-treeselect-focus-ring-offset:var(--p-form-field-focus-ring-offset);--p-treeselect-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);}"
-    },
-    {
-        "name": "treeselect-style",
-        "value": ".p-treeselect{display:inline-flex;cursor:pointer;position:relative;user-select:none;background:var(--p-treeselect-background);border:1px solid var(--p-treeselect-border-color);transition:background var(--p-treeselect-transition-duration),color var(--p-treeselect-transition-duration),border-color var(--p-treeselect-transition-duration),outline-color var(--p-treeselect-transition-duration),box-shadow var(--p-treeselect-transition-duration);border-radius:var(--p-treeselect-border-radius);outline-color:transparent;box-shadow:var(--p-treeselect-shadow);}.p-treeselect:not(.p-disabled):hover{border-color:var(--p-treeselect-hover-border-color);}.p-treeselect:not(.p-disabled).p-focus{border-color:var(--p-treeselect-focus-border-color);box-shadow:var(--p-treeselect-focus-ring-shadow);outline:var(--p-treeselect-focus-ring-width) var(--p-treeselect-focus-ring-style) var(--p-treeselect-focus-ring-color);outline-offset:var(--p-treeselect-focus-ring-offset);}.p-treeselect.p-variant-filled{background:var(--p-treeselect-filled-background);}.p-treeselect.p-variant-filled:not(.p-disabled):hover{background:var(--p-treeselect-filled-hover-background);}.p-treeselect.p-variant-filled.p-focus{background:var(--p-treeselect-filled-focus-background);}.p-treeselect.p-invalid{border-color:var(--p-treeselect-invalid-border-color);}.p-treeselect.p-disabled{opacity:1;background:var(--p-treeselect-disabled-background);}.p-treeselect-clear-icon{align-self:center;color:var(--p-treeselect-clear-icon-color);inset-inline-end:var(--p-treeselect-dropdown-width);}.p-treeselect-dropdown{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:var(--p-treeselect-dropdown-color);width:var(--p-treeselect-dropdown-width);border-start-end-radius:var(--p-border-radius-md);border-end-end-radius:var(--p-border-radius-md);}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;}.p-treeselect-label{display:flex;align-items:center;gap:calc(var(--p-treeselect-padding-y) / 2);white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis;padding:var(--p-treeselect-padding-y) var(--p-treeselect-padding-x);color:var(--p-treeselect-color);}.p-treeselect-label.p-placeholder{color:var(--p-treeselect-placeholder-color);}.p-treeselect.p-invalid .p-treeselect-label.p-placeholder{color:var(--p-treeselect-invalid-placeholder-color);}.p-treeselect:has(.p-select-clear-icon) .p-treeselect-label{padding-inline-end:var(--p-treeselect-padding-x);}.p-treeselect.p-disabled .p-treeselect-label{color:var(--p-treeselect-disabled-color);}.p-treeselect-label-empty{overflow:hidden;visibility:hidden;}.p-treeselect-overlay{position:absolute;top:0;left:0;background:var(--p-treeselect-overlay-background);color:var(--p-treeselect-overlay-color);border:1px solid var(--p-treeselect-overlay-border-color);border-radius:var(--p-treeselect-overlay-border-radius);box-shadow:var(--p-treeselect-overlay-shadow);overflow:hidden;min-width:100%;will-change:transform;}.p-treeselect-tree-container{overflow:auto;}.p-treeselect-empty-message{padding:var(--p-treeselect-empty-message-padding);background:transparent;}.p-treeselect-fluid{display:flex;}.p-treeselect-overlay .p-tree{padding:var(--p-treeselect-tree-padding);}.p-treeselect-overlay .p-tree-loading{min-height:3rem;}.p-treeselect-label .p-chip{padding-block-start:calc(var(--p-treeselect-padding-y) / 2);padding-block-end:calc(var(--p-treeselect-padding-y) / 2);border-radius:var(--p-treeselect-chip-border-radius);}.p-treeselect-label:has(.p-chip){padding:calc(var(--p-treeselect-padding-y) / 2) calc(var(--p-treeselect-padding-x) / 2);}.p-treeselect-sm .p-treeselect-label{font-size:var(--p-treeselect-sm-font-size);padding-block:var(--p-treeselect-sm-padding-y);padding-inline:var(--p-treeselect-sm-padding-x);}.p-treeselect-sm .p-treeselect-dropdown .p-icon{font-size:var(--p-treeselect-sm-font-size);width:var(--p-treeselect-sm-font-size);height:var(--p-treeselect-sm-font-size);}.p-treeselect-lg .p-treeselect-label{font-size:var(--p-treeselect-lg-font-size);padding-block:var(--p-treeselect-lg-padding-y);padding-inline:var(--p-treeselect-lg-padding-x);}.p-treeselect-lg .p-treeselect-dropdown .p-icon{font-size:var(--p-treeselect-lg-font-size);width:var(--p-treeselect-lg-font-size);height:var(--p-treeselect-lg-font-size);}"
-    },
-    {
-        "name": "button-variables",
-        "value": ":root,:host{--p-button-border-radius:var(--p-form-field-border-radius);--p-button-rounded-border-radius:2rem;--p-button-gap:0.5rem;--p-button-padding-x:var(--p-form-field-padding-x);--p-button-padding-y:var(--p-form-field-padding-y);--p-button-icon-only-width:2.5rem;--p-button-raised-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);--p-button-badge-size:1rem;--p-button-transition-duration:var(--p-form-field-transition-duration);--p-button-focus-ring-width:var(--p-focus-ring-width);--p-button-focus-ring-style:var(--p-focus-ring-style);--p-button-focus-ring-offset:var(--p-focus-ring-offset);--p-button-label-font-weight:500;--p-button-lg-font-size:var(--p-form-field-lg-font-size);--p-button-lg-padding-x:var(--p-form-field-lg-padding-x);--p-button-lg-padding-y:var(--p-form-field-lg-padding-y);--p-button-lg-icon-only-width:3rem;--p-button-sm-font-size:var(--p-form-field-sm-font-size);--p-button-sm-padding-x:var(--p-form-field-sm-padding-x);--p-button-sm-padding-y:var(--p-form-field-sm-padding-y);--p-button-sm-icon-only-width:2rem;--p-button-link-color:var(--p-primary-color);--p-button-link-hover-color:var(--p-primary-color);--p-button-link-active-color:var(--p-primary-color);--p-button-text-plain-hover-background:var(--p-surface-50);--p-button-text-plain-active-background:var(--p-surface-100);--p-button-text-plain-color:var(--p-surface-700);--p-button-text-contrast-hover-background:var(--p-surface-50);--p-button-text-contrast-active-background:var(--p-surface-100);--p-button-text-contrast-color:var(--p-surface-950);--p-button-text-danger-hover-background:var(--p-red-50);--p-button-text-danger-active-background:var(--p-red-100);--p-button-text-danger-color:var(--p-red-500);--p-button-text-help-hover-background:var(--p-purple-50);--p-button-text-help-active-background:var(--p-purple-100);--p-button-text-help-color:var(--p-purple-500);--p-button-text-warn-hover-background:var(--p-orange-50);--p-button-text-warn-active-background:var(--p-orange-100);--p-button-text-warn-color:var(--p-orange-500);--p-button-text-info-hover-background:var(--p-sky-50);--p-button-text-info-active-background:var(--p-sky-100);--p-button-text-info-color:var(--p-sky-500);--p-button-text-success-hover-background:var(--p-green-50);--p-button-text-success-active-background:var(--p-green-100);--p-button-text-success-color:var(--p-green-500);--p-button-text-secondary-hover-background:var(--p-surface-50);--p-button-text-secondary-active-background:var(--p-surface-100);--p-button-text-secondary-color:var(--p-surface-500);--p-button-text-primary-hover-background:var(--p-primary-50);--p-button-text-primary-active-background:var(--p-primary-100);--p-button-text-primary-color:var(--p-primary-color);--p-button-outlined-plain-hover-background:var(--p-surface-50);--p-button-outlined-plain-active-background:var(--p-surface-100);--p-button-outlined-plain-border-color:var(--p-surface-200);--p-button-outlined-plain-color:var(--p-surface-700);--p-button-outlined-contrast-hover-background:var(--p-surface-50);--p-button-outlined-contrast-active-background:var(--p-surface-100);--p-button-outlined-contrast-border-color:var(--p-surface-700);--p-button-outlined-contrast-color:var(--p-surface-950);--p-button-outlined-danger-hover-background:var(--p-red-50);--p-button-outlined-danger-active-background:var(--p-red-100);--p-button-outlined-danger-border-color:var(--p-red-200);--p-button-outlined-danger-color:var(--p-red-500);--p-button-outlined-help-hover-background:var(--p-purple-50);--p-button-outlined-help-active-background:var(--p-purple-100);--p-button-outlined-help-border-color:var(--p-purple-200);--p-button-outlined-help-color:var(--p-purple-500);--p-button-outlined-warn-hover-background:var(--p-orange-50);--p-button-outlined-warn-active-background:var(--p-orange-100);--p-button-outlined-warn-border-color:var(--p-orange-200);--p-button-outlined-warn-color:var(--p-orange-500);--p-button-outlined-info-hover-background:var(--p-sky-50);--p-button-outlined-info-active-background:var(--p-sky-100);--p-button-outlined-info-border-color:var(--p-sky-200);--p-button-outlined-info-color:var(--p-sky-500);--p-button-outlined-success-hover-background:var(--p-green-50);--p-button-outlined-success-active-background:var(--p-green-100);--p-button-outlined-success-border-color:var(--p-green-200);--p-button-outlined-success-color:var(--p-green-500);--p-button-outlined-secondary-hover-background:var(--p-surface-50);--p-button-outlined-secondary-active-background:var(--p-surface-100);--p-button-outlined-secondary-border-color:var(--p-surface-200);--p-button-outlined-secondary-color:var(--p-surface-500);--p-button-outlined-primary-hover-background:var(--p-primary-50);--p-button-outlined-primary-active-background:var(--p-primary-100);--p-button-outlined-primary-border-color:var(--p-primary-200);--p-button-outlined-primary-color:var(--p-primary-color);--p-button-contrast-background:var(--p-surface-950);--p-button-contrast-hover-background:var(--p-surface-900);--p-button-contrast-active-background:var(--p-surface-800);--p-button-contrast-border-color:var(--p-surface-950);--p-button-contrast-hover-border-color:var(--p-surface-900);--p-button-contrast-active-border-color:var(--p-surface-800);--p-button-contrast-color:var(--p-surface-0);--p-button-contrast-hover-color:var(--p-surface-0);--p-button-contrast-active-color:var(--p-surface-0);--p-button-contrast-focus-ring-color:var(--p-surface-950);--p-button-contrast-focus-ring-shadow:none;--p-button-danger-background:var(--p-red-500);--p-button-danger-hover-background:var(--p-red-600);--p-button-danger-active-background:var(--p-red-700);--p-button-danger-border-color:var(--p-red-500);--p-button-danger-hover-border-color:var(--p-red-600);--p-button-danger-active-border-color:var(--p-red-700);--p-button-danger-color:#ffffff;--p-button-danger-hover-color:#ffffff;--p-button-danger-active-color:#ffffff;--p-button-danger-focus-ring-color:var(--p-red-500);--p-button-danger-focus-ring-shadow:none;--p-button-help-background:var(--p-purple-500);--p-button-help-hover-background:var(--p-purple-600);--p-button-help-active-background:var(--p-purple-700);--p-button-help-border-color:var(--p-purple-500);--p-button-help-hover-border-color:var(--p-purple-600);--p-button-help-active-border-color:var(--p-purple-700);--p-button-help-color:#ffffff;--p-button-help-hover-color:#ffffff;--p-button-help-active-color:#ffffff;--p-button-help-focus-ring-color:var(--p-purple-500);--p-button-help-focus-ring-shadow:none;--p-button-warn-background:var(--p-orange-500);--p-button-warn-hover-background:var(--p-orange-600);--p-button-warn-active-background:var(--p-orange-700);--p-button-warn-border-color:var(--p-orange-500);--p-button-warn-hover-border-color:var(--p-orange-600);--p-button-warn-active-border-color:var(--p-orange-700);--p-button-warn-color:#ffffff;--p-button-warn-hover-color:#ffffff;--p-button-warn-active-color:#ffffff;--p-button-warn-focus-ring-color:var(--p-orange-500);--p-button-warn-focus-ring-shadow:none;--p-button-success-background:var(--p-green-500);--p-button-success-hover-background:var(--p-green-600);--p-button-success-active-background:var(--p-green-700);--p-button-success-border-color:var(--p-green-500);--p-button-success-hover-border-color:var(--p-green-600);--p-button-success-active-border-color:var(--p-green-700);--p-button-success-color:#ffffff;--p-button-success-hover-color:#ffffff;--p-button-success-active-color:#ffffff;--p-button-success-focus-ring-color:var(--p-green-500);--p-button-success-focus-ring-shadow:none;--p-button-info-background:var(--p-sky-500);--p-button-info-hover-background:var(--p-sky-600);--p-button-info-active-background:var(--p-sky-700);--p-button-info-border-color:var(--p-sky-500);--p-button-info-hover-border-color:var(--p-sky-600);--p-button-info-active-border-color:var(--p-sky-700);--p-button-info-color:#ffffff;--p-button-info-hover-color:#ffffff;--p-button-info-active-color:#ffffff;--p-button-info-focus-ring-color:var(--p-sky-500);--p-button-info-focus-ring-shadow:none;--p-button-secondary-background:var(--p-surface-100);--p-button-secondary-hover-background:var(--p-surface-200);--p-button-secondary-active-background:var(--p-surface-300);--p-button-secondary-border-color:var(--p-surface-100);--p-button-secondary-hover-border-color:var(--p-surface-200);--p-button-secondary-active-border-color:var(--p-surface-300);--p-button-secondary-color:var(--p-surface-600);--p-button-secondary-hover-color:var(--p-surface-700);--p-button-secondary-active-color:var(--p-surface-800);--p-button-secondary-focus-ring-color:var(--p-surface-600);--p-button-secondary-focus-ring-shadow:none;--p-button-primary-background:var(--p-primary-color);--p-button-primary-hover-background:var(--p-primary-hover-color);--p-button-primary-active-background:var(--p-primary-active-color);--p-button-primary-border-color:var(--p-primary-color);--p-button-primary-hover-border-color:var(--p-primary-hover-color);--p-button-primary-active-border-color:var(--p-primary-active-color);--p-button-primary-color:var(--p-primary-contrast-color);--p-button-primary-hover-color:var(--p-primary-contrast-color);--p-button-primary-active-color:var(--p-primary-contrast-color);--p-button-primary-focus-ring-color:var(--p-primary-color);--p-button-primary-focus-ring-shadow:none;}.p-dark{--p-button-link-color:var(--p-primary-color);--p-button-link-hover-color:var(--p-primary-color);--p-button-link-active-color:var(--p-primary-color);--p-button-text-plain-hover-background:var(--p-surface-800);--p-button-text-plain-active-background:var(--p-surface-700);--p-button-text-plain-color:var(--p-surface-0);--p-button-text-contrast-hover-background:var(--p-surface-800);--p-button-text-contrast-active-background:var(--p-surface-700);--p-button-text-contrast-color:var(--p-surface-0);--p-button-text-danger-hover-background:color-mix(in srgb,var(--p-red-400),transparent 96%);--p-button-text-danger-active-background:color-mix(in srgb,var(--p-red-400),transparent 84%);--p-button-text-danger-color:var(--p-red-400);--p-button-text-help-hover-background:color-mix(in srgb,var(--p-purple-400),transparent 96%);--p-button-text-help-active-background:color-mix(in srgb,var(--p-purple-400),transparent 84%);--p-button-text-help-color:var(--p-purple-400);--p-button-text-warn-hover-background:color-mix(in srgb,var(--p-orange-400),transparent 96%);--p-button-text-warn-active-background:color-mix(in srgb,var(--p-orange-400),transparent 84%);--p-button-text-warn-color:var(--p-orange-400);--p-button-text-info-hover-background:color-mix(in srgb,var(--p-sky-400),transparent 96%);--p-button-text-info-active-background:color-mix(in srgb,var(--p-sky-400),transparent 84%);--p-button-text-info-color:var(--p-sky-400);--p-button-text-success-hover-background:color-mix(in srgb,var(--p-green-400),transparent 96%);--p-button-text-success-active-background:color-mix(in srgb,var(--p-green-400),transparent 84%);--p-button-text-success-color:var(--p-green-400);--p-button-text-secondary-hover-background:var(--p-surface-800);--p-button-text-secondary-active-background:var(--p-surface-700);--p-button-text-secondary-color:var(--p-surface-400);--p-button-text-primary-hover-background:color-mix(in srgb,var(--p-primary-color),transparent 96%);--p-button-text-primary-active-background:color-mix(in srgb,var(--p-primary-color),transparent 84%);--p-button-text-primary-color:var(--p-primary-color);--p-button-outlined-plain-hover-background:var(--p-surface-800);--p-button-outlined-plain-active-background:var(--p-surface-700);--p-button-outlined-plain-border-color:var(--p-surface-600);--p-button-outlined-plain-color:var(--p-surface-0);--p-button-outlined-contrast-hover-background:var(--p-surface-800);--p-button-outlined-contrast-active-background:var(--p-surface-700);--p-button-outlined-contrast-border-color:var(--p-surface-500);--p-button-outlined-contrast-color:var(--p-surface-0);--p-button-outlined-danger-hover-background:color-mix(in srgb,var(--p-red-400),transparent 96%);--p-button-outlined-danger-active-background:color-mix(in srgb,var(--p-red-400),transparent 84%);--p-button-outlined-danger-border-color:var(--p-red-700);--p-button-outlined-danger-color:var(--p-red-400);--p-button-outlined-help-hover-background:color-mix(in srgb,var(--p-purple-400),transparent 96%);--p-button-outlined-help-active-background:color-mix(in srgb,var(--p-purple-400),transparent 84%);--p-button-outlined-help-border-color:var(--p-purple-700);--p-button-outlined-help-color:var(--p-purple-400);--p-button-outlined-warn-hover-background:color-mix(in srgb,var(--p-orange-400),transparent 96%);--p-button-outlined-warn-active-background:color-mix(in srgb,var(--p-orange-400),transparent 84%);--p-button-outlined-warn-border-color:var(--p-orange-700);--p-button-outlined-warn-color:var(--p-orange-400);--p-button-outlined-info-hover-background:color-mix(in srgb,var(--p-sky-400),transparent 96%);--p-button-outlined-info-active-background:color-mix(in srgb,var(--p-sky-400),transparent 84%);--p-button-outlined-info-border-color:var(--p-sky-700);--p-button-outlined-info-color:var(--p-sky-400);--p-button-outlined-success-hover-background:color-mix(in srgb,var(--p-green-400),transparent 96%);--p-button-outlined-success-active-background:color-mix(in srgb,var(--p-green-400),transparent 84%);--p-button-outlined-success-border-color:var(--p-green-700);--p-button-outlined-success-color:var(--p-green-400);--p-button-outlined-secondary-hover-background:rgba(255,255,255,0.04);--p-button-outlined-secondary-active-background:rgba(255,255,255,0.16);--p-button-outlined-secondary-border-color:var(--p-surface-700);--p-button-outlined-secondary-color:var(--p-surface-400);--p-button-outlined-primary-hover-background:color-mix(in srgb,var(--p-primary-color),transparent 96%);--p-button-outlined-primary-active-background:color-mix(in srgb,var(--p-primary-color),transparent 84%);--p-button-outlined-primary-border-color:var(--p-primary-700);--p-button-outlined-primary-color:var(--p-primary-color);--p-button-contrast-background:var(--p-surface-0);--p-button-contrast-hover-background:var(--p-surface-100);--p-button-contrast-active-background:var(--p-surface-200);--p-button-contrast-border-color:var(--p-surface-0);--p-button-contrast-hover-border-color:var(--p-surface-100);--p-button-contrast-active-border-color:var(--p-surface-200);--p-button-contrast-color:var(--p-surface-950);--p-button-contrast-hover-color:var(--p-surface-950);--p-button-contrast-active-color:var(--p-surface-950);--p-button-contrast-focus-ring-color:var(--p-surface-0);--p-button-contrast-focus-ring-shadow:none;--p-button-danger-background:var(--p-red-400);--p-button-danger-hover-background:var(--p-red-300);--p-button-danger-active-background:var(--p-red-200);--p-button-danger-border-color:var(--p-red-400);--p-button-danger-hover-border-color:var(--p-red-300);--p-button-danger-active-border-color:var(--p-red-200);--p-button-danger-color:var(--p-red-950);--p-button-danger-hover-color:var(--p-red-950);--p-button-danger-active-color:var(--p-red-950);--p-button-danger-focus-ring-color:var(--p-red-400);--p-button-danger-focus-ring-shadow:none;--p-button-help-background:var(--p-purple-400);--p-button-help-hover-background:var(--p-purple-300);--p-button-help-active-background:var(--p-purple-200);--p-button-help-border-color:var(--p-purple-400);--p-button-help-hover-border-color:var(--p-purple-300);--p-button-help-active-border-color:var(--p-purple-200);--p-button-help-color:var(--p-purple-950);--p-button-help-hover-color:var(--p-purple-950);--p-button-help-active-color:var(--p-purple-950);--p-button-help-focus-ring-color:var(--p-purple-400);--p-button-help-focus-ring-shadow:none;--p-button-warn-background:var(--p-orange-400);--p-button-warn-hover-background:var(--p-orange-300);--p-button-warn-active-background:var(--p-orange-200);--p-button-warn-border-color:var(--p-orange-400);--p-button-warn-hover-border-color:var(--p-orange-300);--p-button-warn-active-border-color:var(--p-orange-200);--p-button-warn-color:var(--p-orange-950);--p-button-warn-hover-color:var(--p-orange-950);--p-button-warn-active-color:var(--p-orange-950);--p-button-warn-focus-ring-color:var(--p-orange-400);--p-button-warn-focus-ring-shadow:none;--p-button-success-background:var(--p-green-400);--p-button-success-hover-background:var(--p-green-300);--p-button-success-active-background:var(--p-green-200);--p-button-success-border-color:var(--p-green-400);--p-button-success-hover-border-color:var(--p-green-300);--p-button-success-active-border-color:var(--p-green-200);--p-button-success-color:var(--p-green-950);--p-button-success-hover-color:var(--p-green-950);--p-button-success-active-color:var(--p-green-950);--p-button-success-focus-ring-color:var(--p-green-400);--p-button-success-focus-ring-shadow:none;--p-button-info-background:var(--p-sky-400);--p-button-info-hover-background:var(--p-sky-300);--p-button-info-active-background:var(--p-sky-200);--p-button-info-border-color:var(--p-sky-400);--p-button-info-hover-border-color:var(--p-sky-300);--p-button-info-active-border-color:var(--p-sky-200);--p-button-info-color:var(--p-sky-950);--p-button-info-hover-color:var(--p-sky-950);--p-button-info-active-color:var(--p-sky-950);--p-button-info-focus-ring-color:var(--p-sky-400);--p-button-info-focus-ring-shadow:none;--p-button-secondary-background:var(--p-surface-800);--p-button-secondary-hover-background:var(--p-surface-700);--p-button-secondary-active-background:var(--p-surface-600);--p-button-secondary-border-color:var(--p-surface-800);--p-button-secondary-hover-border-color:var(--p-surface-700);--p-button-secondary-active-border-color:var(--p-surface-600);--p-button-secondary-color:var(--p-surface-300);--p-button-secondary-hover-color:var(--p-surface-200);--p-button-secondary-active-color:var(--p-surface-100);--p-button-secondary-focus-ring-color:var(--p-surface-300);--p-button-secondary-focus-ring-shadow:none;--p-button-primary-background:var(--p-primary-color);--p-button-primary-hover-background:var(--p-primary-hover-color);--p-button-primary-active-background:var(--p-primary-active-color);--p-button-primary-border-color:var(--p-primary-color);--p-button-primary-hover-border-color:var(--p-primary-hover-color);--p-button-primary-active-border-color:var(--p-primary-active-color);--p-button-primary-color:var(--p-primary-contrast-color);--p-button-primary-hover-color:var(--p-primary-contrast-color);--p-button-primary-active-color:var(--p-primary-contrast-color);--p-button-primary-focus-ring-color:var(--p-primary-color);--p-button-primary-focus-ring-shadow:none;}"
-    },
-    {
-        "name": "button-style",
-        "value": ".p-button{display:inline-flex;cursor:pointer;user-select:none;align-items:center;justify-content:center;overflow:hidden;position:relative;color:var(--p-button-primary-color);background:var(--p-button-primary-background);border:1px solid var(--p-button-primary-border-color);padding:var(--p-button-padding-y) var(--p-button-padding-x);font-size:1rem;font-family:inherit;font-feature-settings:inherit;transition:background var(--p-button-transition-duration),color var(--p-button-transition-duration),border-color var(--p-button-transition-duration),outline-color var(--p-button-transition-duration),box-shadow var(--p-button-transition-duration);border-radius:var(--p-button-border-radius);outline-color:transparent;gap:var(--p-button-gap);}.p-button:disabled{cursor:default;}.p-button-icon-right{order:1;}.p-button-icon-right:dir(rtl){order:-1;}.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl){order:1;}.p-button-icon-bottom{order:2;}.p-button-icon-only{width:var(--p-button-icon-only-width);padding-inline-start:0;padding-inline-end:0;gap:0;}.p-button-icon-only.p-button-rounded{border-radius:50%;height:var(--p-button-icon-only-width);}.p-button-icon-only .p-button-label{visibility:hidden;width:0;}.p-button-icon-only::after{content:\"\u0000A0\";visibility:hidden;width:0;}.p-button-sm{font-size:var(--p-button-sm-font-size);padding:var(--p-button-sm-padding-y) var(--p-button-sm-padding-x);}.p-button-sm .p-button-icon{font-size:var(--p-button-sm-font-size);}.p-button-sm.p-button-icon-only{width:var(--p-button-sm-icon-only-width);}.p-button-sm.p-button-icon-only.p-button-rounded{height:var(--p-button-sm-icon-only-width);}.p-button-lg{font-size:var(--p-button-lg-font-size);padding:var(--p-button-lg-padding-y) var(--p-button-lg-padding-x);}.p-button-lg .p-button-icon{font-size:var(--p-button-lg-font-size);}.p-button-lg.p-button-icon-only{width:var(--p-button-lg-icon-only-width);}.p-button-lg.p-button-icon-only.p-button-rounded{height:var(--p-button-lg-icon-only-width);}.p-button-vertical{flex-direction:column;}.p-button-label{font-weight:var(--p-button-label-font-weight);}.p-button-fluid{width:100%;}.p-button-fluid.p-button-icon-only{width:var(--p-button-icon-only-width);}.p-button:not(:disabled):hover{background:var(--p-button-primary-hover-background);border:1px solid var(--p-button-primary-hover-border-color);color:var(--p-button-primary-hover-color);}.p-button:not(:disabled):active{background:var(--p-button-primary-active-background);border:1px solid var(--p-button-primary-active-border-color);color:var(--p-button-primary-active-color);}.p-button:focus-visible{box-shadow:var(--p-button-primary-focus-ring-shadow);outline:var(--p-button-focus-ring-width) var(--p-button-focus-ring-style) var(--p-button-primary-focus-ring-color);outline-offset:var(--p-button-focus-ring-offset);}.p-button .p-badge{min-width:var(--p-button-badge-size);height:var(--p-button-badge-size);line-height:var(--p-button-badge-size);}.p-button-raised{box-shadow:var(--p-button-raised-shadow);}.p-button-rounded{border-radius:var(--p-button-rounded-border-radius);}.p-button-secondary{background:var(--p-button-secondary-background);border:1px solid var(--p-button-secondary-border-color);color:var(--p-button-secondary-color);}.p-button-secondary:not(:disabled):hover{background:var(--p-button-secondary-hover-background);border:1px solid var(--p-button-secondary-hover-border-color);color:var(--p-button-secondary-hover-color);}.p-button-secondary:not(:disabled):active{background:var(--p-button-secondary-active-background);border:1px solid var(--p-button-secondary-active-border-color);color:var(--p-button-secondary-active-color);}.p-button-secondary:focus-visible{outline-color:var(--p-button-secondary-focus-ring-color);box-shadow:var(--p-button-secondary-focus-ring-shadow);}.p-button-success{background:var(--p-button-success-background);border:1px solid var(--p-button-success-border-color);color:var(--p-button-success-color);}.p-button-success:not(:disabled):hover{background:var(--p-button-success-hover-background);border:1px solid var(--p-button-success-hover-border-color);color:var(--p-button-success-hover-color);}.p-button-success:not(:disabled):active{background:var(--p-button-success-active-background);border:1px solid var(--p-button-success-active-border-color);color:var(--p-button-success-active-color);}.p-button-success:focus-visible{outline-color:var(--p-button-success-focus-ring-color);box-shadow:var(--p-button-success-focus-ring-shadow);}.p-button-info{background:var(--p-button-info-background);border:1px solid var(--p-button-info-border-color);color:var(--p-button-info-color);}.p-button-info:not(:disabled):hover{background:var(--p-button-info-hover-background);border:1px solid var(--p-button-info-hover-border-color);color:var(--p-button-info-hover-color);}.p-button-info:not(:disabled):active{background:var(--p-button-info-active-background);border:1px solid var(--p-button-info-active-border-color);color:var(--p-button-info-active-color);}.p-button-info:focus-visible{outline-color:var(--p-button-info-focus-ring-color);box-shadow:var(--p-button-info-focus-ring-shadow);}.p-button-warn{background:var(--p-button-warn-background);border:1px solid var(--p-button-warn-border-color);color:var(--p-button-warn-color);}.p-button-warn:not(:disabled):hover{background:var(--p-button-warn-hover-background);border:1px solid var(--p-button-warn-hover-border-color);color:var(--p-button-warn-hover-color);}.p-button-warn:not(:disabled):active{background:var(--p-button-warn-active-background);border:1px solid var(--p-button-warn-active-border-color);color:var(--p-button-warn-active-color);}.p-button-warn:focus-visible{outline-color:var(--p-button-warn-focus-ring-color);box-shadow:var(--p-button-warn-focus-ring-shadow);}.p-button-help{background:var(--p-button-help-background);border:1px solid var(--p-button-help-border-color);color:var(--p-button-help-color);}.p-button-help:not(:disabled):hover{background:var(--p-button-help-hover-background);border:1px solid var(--p-button-help-hover-border-color);color:var(--p-button-help-hover-color);}.p-button-help:not(:disabled):active{background:var(--p-button-help-active-background);border:1px solid var(--p-button-help-active-border-color);color:var(--p-button-help-active-color);}.p-button-help:focus-visible{outline-color:var(--p-button-help-focus-ring-color);box-shadow:var(--p-button-help-focus-ring-shadow);}.p-button-danger{background:var(--p-button-danger-background);border:1px solid var(--p-button-danger-border-color);color:var(--p-button-danger-color);}.p-button-danger:not(:disabled):hover{background:var(--p-button-danger-hover-background);border:1px solid var(--p-button-danger-hover-border-color);color:var(--p-button-danger-hover-color);}.p-button-danger:not(:disabled):active{background:var(--p-button-danger-active-background);border:1px solid var(--p-button-danger-active-border-color);color:var(--p-button-danger-active-color);}.p-button-danger:focus-visible{outline-color:var(--p-button-danger-focus-ring-color);box-shadow:var(--p-button-danger-focus-ring-shadow);}.p-button-contrast{background:var(--p-button-contrast-background);border:1px solid var(--p-button-contrast-border-color);color:var(--p-button-contrast-color);}.p-button-contrast:not(:disabled):hover{background:var(--p-button-contrast-hover-background);border:1px solid var(--p-button-contrast-hover-border-color);color:var(--p-button-contrast-hover-color);}.p-button-contrast:not(:disabled):active{background:var(--p-button-contrast-active-background);border:1px solid var(--p-button-contrast-active-border-color);color:var(--p-button-contrast-active-color);}.p-button-contrast:focus-visible{outline-color:var(--p-button-contrast-focus-ring-color);box-shadow:var(--p-button-contrast-focus-ring-shadow);}.p-button-outlined{background:transparent;border-color:var(--p-button-outlined-primary-border-color);color:var(--p-button-outlined-primary-color);}.p-button-outlined:not(:disabled):hover{background:var(--p-button-outlined-primary-hover-background);border-color:var(--p-button-outlined-primary-border-color);color:var(--p-button-outlined-primary-color);}.p-button-outlined:not(:disabled):active{background:var(--p-button-outlined-primary-active-background);border-color:var(--p-button-outlined-primary-border-color);color:var(--p-button-outlined-primary-color);}.p-button-outlined.p-button-secondary{border-color:var(--p-button-outlined-secondary-border-color);color:var(--p-button-outlined-secondary-color);}.p-button-outlined.p-button-secondary:not(:disabled):hover{background:var(--p-button-outlined-secondary-hover-background);border-color:var(--p-button-outlined-secondary-border-color);color:var(--p-button-outlined-secondary-color);}.p-button-outlined.p-button-secondary:not(:disabled):active{background:var(--p-button-outlined-secondary-active-background);border-color:var(--p-button-outlined-secondary-border-color);color:var(--p-button-outlined-secondary-color);}.p-button-outlined.p-button-success{border-color:var(--p-button-outlined-success-border-color);color:var(--p-button-outlined-success-color);}.p-button-outlined.p-button-success:not(:disabled):hover{background:var(--p-button-outlined-success-hover-background);border-color:var(--p-button-outlined-success-border-color);color:var(--p-button-outlined-success-color);}.p-button-outlined.p-button-success:not(:disabled):active{background:var(--p-button-outlined-success-active-background);border-color:var(--p-button-outlined-success-border-color);color:var(--p-button-outlined-success-color);}.p-button-outlined.p-button-info{border-color:var(--p-button-outlined-info-border-color);color:var(--p-button-outlined-info-color);}.p-button-outlined.p-button-info:not(:disabled):hover{background:var(--p-button-outlined-info-hover-background);border-color:var(--p-button-outlined-info-border-color);color:var(--p-button-outlined-info-color);}.p-button-outlined.p-button-info:not(:disabled):active{background:var(--p-button-outlined-info-active-background);border-color:var(--p-button-outlined-info-border-color);color:var(--p-button-outlined-info-color);}.p-button-outlined.p-button-warn{border-color:var(--p-button-outlined-warn-border-color);color:var(--p-button-outlined-warn-color);}.p-button-outlined.p-button-warn:not(:disabled):hover{background:var(--p-button-outlined-warn-hover-background);border-color:var(--p-button-outlined-warn-border-color);color:var(--p-button-outlined-warn-color);}.p-button-outlined.p-button-warn:not(:disabled):active{background:var(--p-button-outlined-warn-active-background);border-color:var(--p-button-outlined-warn-border-color);color:var(--p-button-outlined-warn-color);}.p-button-outlined.p-button-help{border-color:var(--p-button-outlined-help-border-color);color:var(--p-button-outlined-help-color);}.p-button-outlined.p-button-help:not(:disabled):hover{background:var(--p-button-outlined-help-hover-background);border-color:var(--p-button-outlined-help-border-color);color:var(--p-button-outlined-help-color);}.p-button-outlined.p-button-help:not(:disabled):active{background:var(--p-button-outlined-help-active-background);border-color:var(--p-button-outlined-help-border-color);color:var(--p-button-outlined-help-color);}.p-button-outlined.p-button-danger{border-color:var(--p-button-outlined-danger-border-color);color:var(--p-button-outlined-danger-color);}.p-button-outlined.p-button-danger:not(:disabled):hover{background:var(--p-button-outlined-danger-hover-background);border-color:var(--p-button-outlined-danger-border-color);color:var(--p-button-outlined-danger-color);}.p-button-outlined.p-button-danger:not(:disabled):active{background:var(--p-button-outlined-danger-active-background);border-color:var(--p-button-outlined-danger-border-color);color:var(--p-button-outlined-danger-color);}.p-button-outlined.p-button-contrast{border-color:var(--p-button-outlined-contrast-border-color);color:var(--p-button-outlined-contrast-color);}.p-button-outlined.p-button-contrast:not(:disabled):hover{background:var(--p-button-outlined-contrast-hover-background);border-color:var(--p-button-outlined-contrast-border-color);color:var(--p-button-outlined-contrast-color);}.p-button-outlined.p-button-contrast:not(:disabled):active{background:var(--p-button-outlined-contrast-active-background);border-color:var(--p-button-outlined-contrast-border-color);color:var(--p-button-outlined-contrast-color);}.p-button-outlined.p-button-plain{border-color:var(--p-button-outlined-plain-border-color);color:var(--p-button-outlined-plain-color);}.p-button-outlined.p-button-plain:not(:disabled):hover{background:var(--p-button-outlined-plain-hover-background);border-color:var(--p-button-outlined-plain-border-color);color:var(--p-button-outlined-plain-color);}.p-button-outlined.p-button-plain:not(:disabled):active{background:var(--p-button-outlined-plain-active-background);border-color:var(--p-button-outlined-plain-border-color);color:var(--p-button-outlined-plain-color);}.p-button-text{background:transparent;border-color:transparent;color:var(--p-button-text-primary-color);}.p-button-text:not(:disabled):hover{background:var(--p-button-text-primary-hover-background);border-color:transparent;color:var(--p-button-text-primary-color);}.p-button-text:not(:disabled):active{background:var(--p-button-text-primary-active-background);border-color:transparent;color:var(--p-button-text-primary-color);}.p-button-text.p-button-secondary{background:transparent;border-color:transparent;color:var(--p-button-text-secondary-color);}.p-button-text.p-button-secondary:not(:disabled):hover{background:var(--p-button-text-secondary-hover-background);border-color:transparent;color:var(--p-button-text-secondary-color);}.p-button-text.p-button-secondary:not(:disabled):active{background:var(--p-button-text-secondary-active-background);border-color:transparent;color:var(--p-button-text-secondary-color);}.p-button-text.p-button-success{background:transparent;border-color:transparent;color:var(--p-button-text-success-color);}.p-button-text.p-button-success:not(:disabled):hover{background:var(--p-button-text-success-hover-background);border-color:transparent;color:var(--p-button-text-success-color);}.p-button-text.p-button-success:not(:disabled):active{background:var(--p-button-text-success-active-background);border-color:transparent;color:var(--p-button-text-success-color);}.p-button-text.p-button-info{background:transparent;border-color:transparent;color:var(--p-button-text-info-color);}.p-button-text.p-button-info:not(:disabled):hover{background:var(--p-button-text-info-hover-background);border-color:transparent;color:var(--p-button-text-info-color);}.p-button-text.p-button-info:not(:disabled):active{background:var(--p-button-text-info-active-background);border-color:transparent;color:var(--p-button-text-info-color);}.p-button-text.p-button-warn{background:transparent;border-color:transparent;color:var(--p-button-text-warn-color);}.p-button-text.p-button-warn:not(:disabled):hover{background:var(--p-button-text-warn-hover-background);border-color:transparent;color:var(--p-button-text-warn-color);}.p-button-text.p-button-warn:not(:disabled):active{background:var(--p-button-text-warn-active-background);border-color:transparent;color:var(--p-button-text-warn-color);}.p-button-text.p-button-help{background:transparent;border-color:transparent;color:var(--p-button-text-help-color);}.p-button-text.p-button-help:not(:disabled):hover{background:var(--p-button-text-help-hover-background);border-color:transparent;color:var(--p-button-text-help-color);}.p-button-text.p-button-help:not(:disabled):active{background:var(--p-button-text-help-active-background);border-color:transparent;color:var(--p-button-text-help-color);}.p-button-text.p-button-danger{background:transparent;border-color:transparent;color:var(--p-button-text-danger-color);}.p-button-text.p-button-danger:not(:disabled):hover{background:var(--p-button-text-danger-hover-background);border-color:transparent;color:var(--p-button-text-danger-color);}.p-button-text.p-button-danger:not(:disabled):active{background:var(--p-button-text-danger-active-background);border-color:transparent;color:var(--p-button-text-danger-color);}.p-button-text.p-button-contrast{background:transparent;border-color:transparent;color:var(--p-button-text-contrast-color);}.p-button-text.p-button-contrast:not(:disabled):hover{background:var(--p-button-text-contrast-hover-background);border-color:transparent;color:var(--p-button-text-contrast-color);}.p-button-text.p-button-contrast:not(:disabled):active{background:var(--p-button-text-contrast-active-background);border-color:transparent;color:var(--p-button-text-contrast-color);}.p-button-text.p-button-plain{background:transparent;border-color:transparent;color:var(--p-button-text-plain-color);}.p-button-text.p-button-plain:not(:disabled):hover{background:var(--p-button-text-plain-hover-background);border-color:transparent;color:var(--p-button-text-plain-color);}.p-button-text.p-button-plain:not(:disabled):active{background:var(--p-button-text-plain-active-background);border-color:transparent;color:var(--p-button-text-plain-color);}.p-button-link{background:transparent;border-color:transparent;color:var(--p-button-link-color);}.p-button-link:not(:disabled):hover{background:transparent;border-color:transparent;color:var(--p-button-link-hover-color);}.p-button-link:not(:disabled):hover .p-button-label{text-decoration:underline;}.p-button-link:not(:disabled):active{background:transparent;border-color:transparent;color:var(--p-button-link-active-color);}"
-    },
-    {
-        "name": "buttongroup-style",
-        "value": ".p-buttongroup{display:inline-flex;}.p-buttongroup .p-button{margin:0;}.p-buttongroup .p-button:not(:last-child),.p-buttongroup .p-button:not(:last-child):hover{border-inline-end:0 none;}.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type){border-radius:0;}.p-buttongroup .p-button:first-of-type:not(:only-of-type){border-start-end-radius:0;border-end-end-radius:0;}.p-buttongroup .p-button:last-of-type:not(:only-of-type){border-start-start-radius:0;border-end-start-radius:0;}.p-buttongroup .p-button:focus{position:relative;z-index:1;}"
-    },
-    {
-        "name": "speeddial-variables",
-        "value": ":root,:host{--p-speeddial-gap:0.5rem;--p-speeddial-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "speeddial-style",
-        "value": ".p-speeddial{position:static;display:flex;gap:var(--p-speeddial-gap);}.p-speeddial-button{z-index:1;}.p-speeddial-button.p-speeddial-rotate{transition:transform 250ms cubic-bezier(0.4,0,0.2,1) 0ms,background var(--p-speeddial-transition-duration),color var(--p-speeddial-transition-duration),border-color var(--p-speeddial-transition-duration),box-shadow var(--p-speeddial-transition-duration),outline-color var(--p-speeddial-transition-duration);will-change:transform;}.p-speeddial-list{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;transition:inset-block-start 0s linear var(--p-speeddial-transition-duration);pointer-events:none;outline:0 none;z-index:2;gap:var(--p-speeddial-gap);}.p-speeddial-item{transform:scale(0);opacity:0;transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0ms,opacity 0.8s;will-change:transform;}.p-speeddial-circle .p-speeddial-item,.p-speeddial-semi-circle .p-speeddial-item,.p-speeddial-quarter-circle .p-speeddial-item{position:absolute;}.p-speeddial-mask{position:absolute;border-radius:var(--p-content-border-radius);}.p-speeddial-open .p-speeddial-list{pointer-events:auto;}.p-speeddial-open .p-speeddial-item{transform:scale(1);opacity:1;}.p-speeddial-open .p-speeddial-rotate{transform:rotate(45deg);}"
-    },
-    {
-        "name": "splitbutton-variables",
-        "value": ":root,:host{--p-splitbutton-border-radius:var(--p-form-field-border-radius);--p-splitbutton-rounded-border-radius:2rem;--p-splitbutton-raised-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);}"
-    },
-    {
-        "name": "splitbutton-style",
-        "value": ".p-splitbutton{display:inline-flex;position:relative;border-radius:var(--p-splitbutton-border-radius);}.p-splitbutton-button.p-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0 none;}.p-splitbutton-button.p-button:focus-visible,.p-splitbutton-dropdown.p-button:focus-visible{z-index:1;}.p-splitbutton-button.p-button:not(:disabled):hover,.p-splitbutton-button.p-button:not(:disabled):active{border-inline-end:0 none;}.p-splitbutton-dropdown.p-button{border-start-start-radius:0;border-end-start-radius:0;}.p-splitbutton .p-menu{min-width:100%;}.p-splitbutton-fluid{display:flex;}.p-splitbutton-rounded .p-splitbutton-dropdown.p-button{border-start-end-radius:var(--p-splitbutton-rounded-border-radius);border-end-end-radius:var(--p-splitbutton-rounded-border-radius);}.p-splitbutton-rounded .p-splitbutton-button.p-button{border-start-start-radius:var(--p-splitbutton-rounded-border-radius);border-end-start-radius:var(--p-splitbutton-rounded-border-radius);}.p-splitbutton-raised{box-shadow:var(--p-splitbutton-raised-shadow);}"
-    },
-    {
-        "name": "datatable-variables",
-        "value": ":root,:host{--p-datatable-paginator-bottom-border-color:var(--p-datatable-border-color);--p-datatable-paginator-bottom-border-width:0 0 1px 0;--p-datatable-paginator-top-border-color:var(--p-datatable-border-color);--p-datatable-paginator-top-border-width:0 0 1px 0;--p-datatable-filter-inline-gap:0.5rem;--p-datatable-filter-constraint-focus-background:var(--p-list-option-focus-background);--p-datatable-filter-constraint-selected-background:var(--p-list-option-selected-background);--p-datatable-filter-constraint-selected-focus-background:var(--p-list-option-selected-focus-background);--p-datatable-filter-constraint-color:var(--p-list-option-color);--p-datatable-filter-constraint-focus-color:var(--p-list-option-focus-color);--p-datatable-filter-constraint-selected-color:var(--p-list-option-selected-color);--p-datatable-filter-constraint-selected-focus-color:var(--p-list-option-selected-focus-color);--p-datatable-filter-constraint-padding:var(--p-list-option-padding);--p-datatable-filter-constraint-border-radius:var(--p-list-option-border-radius);--p-datatable-filter-constraint-separator-border-color:var(--p-content-border-color);--p-datatable-filter-constraint-list-padding:var(--p-list-padding);--p-datatable-filter-constraint-list-gap:var(--p-list-gap);--p-datatable-filter-rule-border-color:var(--p-content-border-color);--p-datatable-filter-overlay-popover-background:var(--p-overlay-popover-background);--p-datatable-filter-overlay-popover-border-color:var(--p-overlay-popover-border-color);--p-datatable-filter-overlay-popover-border-radius:var(--p-overlay-popover-border-radius);--p-datatable-filter-overlay-popover-color:var(--p-overlay-popover-color);--p-datatable-filter-overlay-popover-shadow:var(--p-overlay-popover-shadow);--p-datatable-filter-overlay-popover-padding:var(--p-overlay-popover-padding);--p-datatable-filter-overlay-popover-gap:0.5rem;--p-datatable-filter-overlay-select-background:var(--p-overlay-select-background);--p-datatable-filter-overlay-select-border-color:var(--p-overlay-select-border-color);--p-datatable-filter-overlay-select-border-radius:var(--p-overlay-select-border-radius);--p-datatable-filter-overlay-select-color:var(--p-overlay-select-color);--p-datatable-filter-overlay-select-shadow:var(--p-overlay-select-shadow);--p-datatable-row-toggle-button-hover-background:var(--p-content-hover-background);--p-datatable-row-toggle-button-selected-hover-background:var(--p-content-background);--p-datatable-row-toggle-button-color:var(--p-text-muted-color);--p-datatable-row-toggle-button-hover-color:var(--p-text-color);--p-datatable-row-toggle-button-selected-hover-color:var(--p-primary-color);--p-datatable-row-toggle-button-size:1.75rem;--p-datatable-row-toggle-button-border-radius:50%;--p-datatable-row-toggle-button-focus-ring-width:var(--p-focus-ring-width);--p-datatable-row-toggle-button-focus-ring-style:var(--p-focus-ring-style);--p-datatable-row-toggle-button-focus-ring-color:var(--p-focus-ring-color);--p-datatable-row-toggle-button-focus-ring-offset:var(--p-focus-ring-offset);--p-datatable-row-toggle-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-datatable-loading-icon-size:2rem;--p-datatable-sort-icon-color:var(--p-text-muted-color);--p-datatable-sort-icon-hover-color:var(--p-text-hover-muted-color);--p-datatable-sort-icon-size:0.875rem;--p-datatable-resize-indicator-width:1px;--p-datatable-resize-indicator-color:var(--p-primary-color);--p-datatable-column-resizer-width:0.5rem;--p-datatable-drop-point-color:var(--p-primary-color);--p-datatable-footer-background:var(--p-content-background);--p-datatable-footer-border-color:var(--p-datatable-border-color);--p-datatable-footer-color:var(--p-content-color);--p-datatable-footer-border-width:0 0 1px 0;--p-datatable-footer-padding:0.75rem 1rem;--p-datatable-footer-lg-padding:1rem 1.25rem;--p-datatable-footer-sm-padding:0.375rem 0.5rem;--p-datatable-column-footer-font-weight:600;--p-datatable-footer-cell-background:var(--p-content-background);--p-datatable-footer-cell-border-color:var(--p-datatable-border-color);--p-datatable-footer-cell-color:var(--p-content-color);--p-datatable-footer-cell-padding:0.75rem 1rem;--p-datatable-footer-cell-lg-padding:1rem 1.25rem;--p-datatable-footer-cell-sm-padding:0.375rem 0.5rem;--p-datatable-body-cell-border-color:var(--p-datatable-border-color);--p-datatable-body-cell-padding:0.75rem 1rem;--p-datatable-body-cell-lg-padding:1rem 1.25rem;--p-datatable-body-cell-sm-padding:0.375rem 0.5rem;--p-datatable-row-background:var(--p-content-background);--p-datatable-row-hover-background:var(--p-content-hover-background);--p-datatable-row-selected-background:var(--p-highlight-background);--p-datatable-row-color:var(--p-content-color);--p-datatable-row-hover-color:var(--p-content-hover-color);--p-datatable-row-selected-color:var(--p-highlight-color);--p-datatable-row-focus-ring-width:var(--p-focus-ring-width);--p-datatable-row-focus-ring-style:var(--p-focus-ring-style);--p-datatable-row-focus-ring-color:var(--p-focus-ring-color);--p-datatable-row-focus-ring-offset:-1px;--p-datatable-row-focus-ring-shadow:var(--p-focus-ring-shadow);--p-datatable-column-title-font-weight:600;--p-datatable-header-cell-background:var(--p-content-background);--p-datatable-header-cell-hover-background:var(--p-content-hover-background);--p-datatable-header-cell-selected-background:var(--p-highlight-background);--p-datatable-header-cell-border-color:var(--p-datatable-border-color);--p-datatable-header-cell-color:var(--p-content-color);--p-datatable-header-cell-hover-color:var(--p-content-hover-color);--p-datatable-header-cell-selected-color:var(--p-highlight-color);--p-datatable-header-cell-gap:0.5rem;--p-datatable-header-cell-padding:0.75rem 1rem;--p-datatable-header-cell-lg-padding:1rem 1.25rem;--p-datatable-header-cell-sm-padding:0.375rem 0.5rem;--p-datatable-header-cell-focus-ring-width:var(--p-focus-ring-width);--p-datatable-header-cell-focus-ring-style:var(--p-focus-ring-style);--p-datatable-header-cell-focus-ring-color:var(--p-focus-ring-color);--p-datatable-header-cell-focus-ring-offset:-1px;--p-datatable-header-cell-focus-ring-shadow:var(--p-focus-ring-shadow);--p-datatable-header-background:var(--p-content-background);--p-datatable-header-border-color:var(--p-datatable-border-color);--p-datatable-header-color:var(--p-content-color);--p-datatable-header-border-width:0 0 1px 0;--p-datatable-header-padding:0.75rem 1rem;--p-datatable-header-lg-padding:1rem 1.25rem;--p-datatable-header-sm-padding:0.375rem 0.5rem;--p-datatable-transition-duration:var(--p-transition-duration);--p-datatable-body-cell-selected-border-color:var(--p-primary-100);--p-datatable-row-striped-background:var(--p-surface-50);--p-datatable-border-color:var(--p-content-border-color);}.p-dark{--p-datatable-body-cell-selected-border-color:var(--p-primary-900);--p-datatable-row-striped-background:var(--p-surface-950);--p-datatable-border-color:var(--p-surface-800);}"
-    },
-    {
-        "name": "datatable-style",
-        "value": ".p-datatable{position:relative;display:block;}.p-datatable-table{border-spacing:0;border-collapse:separate;width:100%;}.p-datatable-scrollable > .p-datatable-table-container{position:relative;}.p-datatable-scrollable-table > .p-datatable-thead{inset-block-start:0;z-index:1;}.p-datatable-scrollable-table > .p-datatable-frozen-tbody{position:sticky;z-index:1;}.p-datatable-scrollable-table > .p-datatable-tfoot{inset-block-end:0;z-index:1;}.p-datatable-scrollable .p-datatable-frozen-column{position:sticky;}.p-datatable-scrollable th.p-datatable-frozen-column{z-index:1;}.p-datatable-scrollable td.p-datatable-frozen-column{background:inherit;}.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead{background:var(--p-datatable-header-cell-background);}.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot{background:var(--p-datatable-footer-cell-background);}.p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%;}.p-datatable-flex-scrollable > .p-datatable-table-container{display:flex;flex-direction:column;flex:1;height:100%;}.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header{position:sticky;z-index:1;}.p-datatable-resizable-table > .p-datatable-thead > tr > th,.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,.p-datatable-resizable-table > .p-datatable-tbody > tr > td{overflow:hidden;white-space:nowrap;}.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column){background-clip:padding-box;position:relative;}.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer{display:none;}.p-datatable-column-resizer{display:block;position:absolute;inset-block-start:0;inset-inline-end:0;margin:0;width:var(--p-datatable-column-resizer-width);height:100%;padding:0;cursor:col-resize;border:1px solid transparent;}.p-datatable-column-header-content{display:flex;align-items:center;gap:var(--p-datatable-header-cell-gap);}.p-datatable-column-resize-indicator{width:var(--p-datatable-resize-indicator-width);position:absolute;z-index:10;display:none;background:var(--p-datatable-resize-indicator-color);}.p-datatable-row-reorder-indicator-up,.p-datatable-row-reorder-indicator-down{position:absolute;display:none;}.p-datatable-reorderable-column,.p-datatable-reorderable-row-handle{cursor:move;}.p-datatable-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;}.p-datatable-inline-filter{display:flex;align-items:center;width:100%;gap:var(--p-datatable-filter-inline-gap);}.p-datatable-inline-filter .p-datatable-filter-element-container{flex:1 1 auto;width:1%;}.p-datatable-filter-overlay{background:var(--p-datatable-filter-overlay-select-background);color:var(--p-datatable-filter-overlay-select-color);border:1px solid var(--p-datatable-filter-overlay-select-border-color);border-radius:var(--p-datatable-filter-overlay-select-border-radius);box-shadow:var(--p-datatable-filter-overlay-select-shadow);min-width:12.5rem;}.p-datatable-filter-constraint-list{margin:0;list-style:none;display:flex;flex-direction:column;padding:var(--p-datatable-filter-constraint-list-padding);gap:var(--p-datatable-filter-constraint-list-gap);}.p-datatable-filter-constraint{padding:var(--p-datatable-filter-constraint-padding);color:var(--p-datatable-filter-constraint-color);border-radius:var(--p-datatable-filter-constraint-border-radius);cursor:pointer;transition:background var(--p-datatable-transition-duration),color var(--p-datatable-transition-duration),border-color var(--p-datatable-transition-duration),box-shadow var(--p-datatable-transition-duration);}.p-datatable-filter-constraint-selected{background:var(--p-datatable-filter-constraint-selected-background);color:var(--p-datatable-filter-constraint-selected-color);}.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover{background:var(--p-datatable-filter-constraint-focus-background);color:var(--p-datatable-filter-constraint-focus-color);}.p-datatable-filter-constraint:focus-visible{outline:0 none;background:var(--p-datatable-filter-constraint-focus-background);color:var(--p-datatable-filter-constraint-focus-color);}.p-datatable-filter-constraint-selected:focus-visible{outline:0 none;background:var(--p-datatable-filter-constraint-selected-focus-background);color:var(--p-datatable-filter-constraint-selected-focus-color);}.p-datatable-filter-constraint-separator{border-block-start:1px solid var(--p-datatable-filter-constraint-separator-border-color);}.p-datatable-popover-filter{display:inline-flex;margin-inline-start:auto;}.p-datatable-filter-overlay-popover{background:var(--p-datatable-filter-overlay-popover-background);color:var(--p-datatable-filter-overlay-popover-color);border:1px solid var(--p-datatable-filter-overlay-popover-border-color);border-radius:var(--p-datatable-filter-overlay-popover-border-radius);box-shadow:var(--p-datatable-filter-overlay-popover-shadow);min-width:12.5rem;padding:var(--p-datatable-filter-overlay-popover-padding);display:flex;flex-direction:column;gap:var(--p-datatable-filter-overlay-popover-gap);}.p-datatable-filter-operator-dropdown{width:100%;}.p-datatable-filter-rule-list,.p-datatable-filter-rule{display:flex;flex-direction:column;gap:var(--p-datatable-filter-overlay-popover-gap);}.p-datatable-filter-rule{border-block-end:1px solid var(--p-datatable-filter-rule-border-color);padding-bottom:var(--p-datatable-filter-overlay-popover-gap);}.p-datatable-filter-rule:last-child{border-block-end:0 none;padding-bottom:0;}.p-datatable-filter-add-rule-button{width:100%;}.p-datatable-filter-remove-rule-button{width:100%;}.p-datatable-filter-buttonbar{padding:0;display:flex;align-items:center;justify-content:space-between;}.p-datatable-virtualscroller-spacer{display:flex;}.p-datatable .p-virtualscroller .p-virtualscroller-loading{transform:none!important;min-height:0;position:sticky;inset-block-start:0;inset-inline-start:0;}.p-datatable-paginator-top{border-color:var(--p-datatable-paginator-top-border-color);border-style:solid;border-width:var(--p-datatable-paginator-top-border-width);}.p-datatable-paginator-bottom{border-color:var(--p-datatable-paginator-bottom-border-color);border-style:solid;border-width:var(--p-datatable-paginator-bottom-border-width);}.p-datatable-header{background:var(--p-datatable-header-background);color:var(--p-datatable-header-color);border-color:var(--p-datatable-header-border-color);border-style:solid;border-width:var(--p-datatable-header-border-width);padding:var(--p-datatable-header-padding);}.p-datatable-footer{background:var(--p-datatable-footer-background);color:var(--p-datatable-footer-color);border-color:var(--p-datatable-footer-border-color);border-style:solid;border-width:var(--p-datatable-footer-border-width);padding:var(--p-datatable-footer-padding);}.p-datatable-header-cell{padding:var(--p-datatable-header-cell-padding);background:var(--p-datatable-header-cell-background);border-color:var(--p-datatable-header-cell-border-color);border-style:solid;border-width:0 0 1px 0;color:var(--p-datatable-header-cell-color);font-weight:normal;text-align:start;transition:background var(--p-datatable-transition-duration),color var(--p-datatable-transition-duration),border-color var(--p-datatable-transition-duration),outline-color var(--p-datatable-transition-duration),box-shadow var(--p-datatable-transition-duration);}.p-datatable-column-title{font-weight:var(--p-datatable-column-title-font-weight);}.p-datatable-tbody > tr{outline-color:transparent;background:var(--p-datatable-row-background);color:var(--p-datatable-row-color);transition:background var(--p-datatable-transition-duration),color var(--p-datatable-transition-duration),border-color var(--p-datatable-transition-duration),outline-color var(--p-datatable-transition-duration),box-shadow var(--p-datatable-transition-duration);}.p-datatable-tbody > tr > td{text-align:start;border-color:var(--p-datatable-body-cell-border-color);border-style:solid;border-width:0 0 1px 0;padding:var(--p-datatable-body-cell-padding);}.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover{background:var(--p-datatable-row-hover-background);color:var(--p-datatable-row-hover-color);}.p-datatable-tbody > tr.p-datatable-row-selected{background:var(--p-datatable-row-selected-background);color:var(--p-datatable-row-selected-color);}.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td{border-block-end-color:var(--p-datatable-body-cell-selected-border-color);}.p-datatable-tbody > tr.p-datatable-row-selected > td{border-block-end-color:var(--p-datatable-body-cell-selected-border-color);}.p-datatable-tbody > tr:focus-visible,.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected{box-shadow:var(--p-datatable-row-focus-ring-shadow);outline:var(--p-datatable-row-focus-ring-width) var(--p-datatable-row-focus-ring-style) var(--p-datatable-row-focus-ring-color);outline-offset:var(--p-datatable-row-focus-ring-offset);}.p-datatable-tfoot > tr > td{text-align:start;padding:var(--p-datatable-footer-cell-padding);border-color:var(--p-datatable-footer-cell-border-color);border-style:solid;border-width:0 0 1px 0;color:var(--p-datatable-footer-cell-color);background:var(--p-datatable-footer-cell-background);}.p-datatable-column-footer{font-weight:var(--p-datatable-column-footer-font-weight);}.p-datatable-sortable-column{cursor:pointer;user-select:none;outline-color:transparent;}.p-datatable-column-title,.p-datatable-sort-icon,.p-datatable-sort-badge{vertical-align:middle;}.p-datatable-sort-icon{color:var(--p-datatable-sort-icon-color);font-size:var(--p-datatable-sort-icon-size);width:var(--p-datatable-sort-icon-size);height:var(--p-datatable-sort-icon-size);transition:color var(--p-datatable-transition-duration);}.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover{background:var(--p-datatable-header-cell-hover-background);color:var(--p-datatable-header-cell-hover-color);}.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon{color:var(--p-datatable-sort-icon-hover-color);}.p-datatable-column-sorted{background:var(--p-datatable-header-cell-selected-background);color:var(--p-datatable-header-cell-selected-color);}.p-datatable-column-sorted .p-datatable-sort-icon{color:var(--p-datatable-header-cell-selected-color);}.p-datatable-sortable-column:focus-visible{box-shadow:var(--p-datatable-header-cell-focus-ring-shadow);outline:var(--p-datatable-header-cell-focus-ring-width) var(--p-datatable-header-cell-focus-ring-style) var(--p-datatable-header-cell-focus-ring-color);outline-offset:var(--p-datatable-header-cell-focus-ring-offset);}.p-datatable-hoverable .p-datatable-selectable-row{cursor:pointer;}.p-datatable-tbody > tr.p-datatable-dragpoint-top > td{box-shadow:inset 0 2px 0 0 var(--p-datatable-drop-point-color);}.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td{box-shadow:inset 0 -2px 0 0 var(--p-datatable-drop-point-color);}.p-datatable-loading-icon{font-size:var(--p-datatable-loading-icon-size);width:var(--p-datatable-loading-icon-size);height:var(--p-datatable-loading-icon-size);}.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px;}.p-datatable-gridlines .p-datatable-footer{border-width:0 1px 1px 1px;}.p-datatable-gridlines .p-datatable-paginator-top{border-width:1px 1px 0 1px;}.p-datatable-gridlines .p-datatable-paginator-bottom{border-width:0 1px 1px 1px;}.p-datatable-gridlines .p-datatable-thead > tr > th{border-width:1px 0 1px 1px;}.p-datatable-gridlines .p-datatable-thead > tr > th:last-child{border-width:1px;}.p-datatable-gridlines .p-datatable-tbody > tr > td{border-width:1px 0 0 1px;}.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child{border-width:1px 1px 0 1px;}.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td{border-width:1px 0 1px 1px;}.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child{border-width:1px;}.p-datatable-gridlines .p-datatable-tfoot > tr > td{border-width:1px 0 1px 1px;}.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child{border-width:1px 1px 1px 1px;}.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td{border-width:0 0 1px 1px;}.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child{border-width:0 1px 1px 1px;}.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td{border-width:0 0 1px 1px;}.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child{border-width:0 1px 1px 1px;}.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td{border-width:0 0 0 1px;}.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child{border-width:0 1px 0 1px;}.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd{background:var(--p-datatable-row-striped-background);}.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected{background:var(--p-datatable-row-selected-background);color:var(--p-datatable-row-selected-color);}.p-datatable-striped.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover{background:var(--p-datatable-row-hover-background);color:var(--p-datatable-row-hover-color);}.p-datatable.p-datatable-sm .p-datatable-header{padding:var(--p-datatable-header-sm-padding);}.p-datatable.p-datatable-sm .p-datatable-thead > tr > th{padding:var(--p-datatable-header-cell-sm-padding);}.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td{padding:var(--p-datatable-body-cell-sm-padding);}.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td{padding:var(--p-datatable-footer-cell-sm-padding);}.p-datatable.p-datatable-sm .p-datatable-footer{padding:var(--p-datatable-footer-sm-padding);}.p-datatable.p-datatable-lg .p-datatable-header{padding:var(--p-datatable-header-lg-padding);}.p-datatable.p-datatable-lg .p-datatable-thead > tr > th{padding:var(--p-datatable-header-cell-lg-padding);}.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td{padding:var(--p-datatable-body-cell-lg-padding);}.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td{padding:var(--p-datatable-footer-cell-lg-padding);}.p-datatable.p-datatable-lg .p-datatable-footer{padding:var(--p-datatable-footer-lg-padding);}.p-datatable-row-toggle-button{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;width:var(--p-datatable-row-toggle-button-size);height:var(--p-datatable-row-toggle-button-size);color:var(--p-datatable-row-toggle-button-color);border:0 none;background:transparent;cursor:pointer;border-radius:var(--p-datatable-row-toggle-button-border-radius);transition:background var(--p-datatable-transition-duration),color var(--p-datatable-transition-duration),border-color var(--p-datatable-transition-duration),outline-color var(--p-datatable-transition-duration),box-shadow var(--p-datatable-transition-duration);outline-color:transparent;user-select:none;}.p-datatable-row-toggle-button:enabled:hover{color:var(--p-datatable-row-toggle-button-hover-color);background:var(--p-datatable-row-toggle-button-hover-background);}.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{background:var(--p-datatable-row-toggle-button-selected-hover-background);color:var(--p-datatable-row-toggle-button-selected-hover-color);}.p-datatable-row-toggle-button:focus-visible{box-shadow:var(--p-datatable-row-toggle-button-focus-ring-shadow);outline:var(--p-datatable-row-toggle-button-focus-ring-width) var(--p-datatable-row-toggle-button-focus-ring-style) var(--p-datatable-row-toggle-button-focus-ring-color);outline-offset:var(--p-datatable-row-toggle-button-focus-ring-offset);}.p-datatable-row-toggle-icon:dir(rtl){transform:rotate(180deg);}.p-datatable-mask.p-overlay-mask{--px-mask-background:light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.3));}"
-    },
-    {
-        "name": "dataview-variables",
-        "value": ":root,:host{--p-dataview-paginator-bottom-border-color:var(--p-content-border-color);--p-dataview-paginator-bottom-border-width:1px 0 0 0;--p-dataview-paginator-top-border-color:var(--p-content-border-color);--p-dataview-paginator-top-border-width:0 0 1px 0;--p-dataview-footer-background:var(--p-content-background);--p-dataview-footer-color:var(--p-content-color);--p-dataview-footer-border-color:var(--p-content-border-color);--p-dataview-footer-border-width:1px 0 0 0;--p-dataview-footer-padding:0.75rem 1rem;--p-dataview-footer-border-radius:0;--p-dataview-content-background:var(--p-content-background);--p-dataview-content-color:var(--p-content-color);--p-dataview-content-border-color:transparent;--p-dataview-content-border-width:0;--p-dataview-content-padding:0;--p-dataview-content-border-radius:0;--p-dataview-header-background:var(--p-content-background);--p-dataview-header-color:var(--p-content-color);--p-dataview-header-border-color:var(--p-content-border-color);--p-dataview-header-border-width:0 0 1px 0;--p-dataview-header-padding:0.75rem 1rem;--p-dataview-header-border-radius:0;--p-dataview-border-color:transparent;--p-dataview-border-width:0;--p-dataview-border-radius:0;--p-dataview-padding:0;}"
-    },
-    {
-        "name": "dataview-style",
-        "value": ".p-dataview{position:relative;border-color:var(--p-dataview-border-color);border-width:var(--p-dataview-border-width);border-style:solid;border-radius:var(--p-dataview-border-radius);padding:var(--p-dataview-padding);}.p-dataview-header{background:var(--p-dataview-header-background);color:var(--p-dataview-header-color);border-color:var(--p-dataview-header-border-color);border-width:var(--p-dataview-header-border-width);border-style:solid;padding:var(--p-dataview-header-padding);border-radius:var(--p-dataview-header-border-radius);}.p-dataview-content{background:var(--p-dataview-content-background);border-color:var(--p-dataview-content-border-color);border-width:var(--p-dataview-content-border-width);border-style:solid;color:var(--p-dataview-content-color);padding:var(--p-dataview-content-padding);border-radius:var(--p-dataview-content-border-radius);}.p-dataview-footer{background:var(--p-dataview-footer-background);color:var(--p-dataview-footer-color);border-color:var(--p-dataview-footer-border-color);border-width:var(--p-dataview-footer-border-width);border-style:solid;padding:var(--p-dataview-footer-padding);border-radius:var(--p-dataview-footer-border-radius);}.p-dataview-paginator-top{border-width:var(--p-dataview-paginator-top-border-width);border-color:var(--p-dataview-paginator-top-border-color);border-style:solid;}.p-dataview-paginator-bottom{border-width:var(--p-dataview-paginator-bottom-border-width);border-color:var(--p-dataview-paginator-bottom-border-color);border-style:solid;}.p-dataview-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;}"
-    },
-    {
-        "name": "orderlist-variables",
-        "value": ":root,:host{--p-orderlist-controls-gap:0.5rem;--p-orderlist-gap:1.125rem;}"
-    },
-    {
-        "name": "orderlist-style",
-        "value": ".p-orderlist{display:flex;gap:var(--p-orderlist-gap);}.p-orderlist .p-listbox{flex:1 1 auto;}.p-orderlist-controls{display:flex;flex-direction:column;justify-content:center;gap:var(--p-orderlist-controls-gap);}"
-    },
-    {
-        "name": "organizationchart-variables",
-        "value": ":root,:host{--p-organizationchart-connector-color:var(--p-content-border-color);--p-organizationchart-connector-border-radius:var(--p-content-border-radius);--p-organizationchart-connector-height:24px;--p-organizationchart-node-toggle-button-background:var(--p-content-background);--p-organizationchart-node-toggle-button-hover-background:var(--p-content-hover-background);--p-organizationchart-node-toggle-button-border-color:var(--p-content-border-color);--p-organizationchart-node-toggle-button-color:var(--p-text-muted-color);--p-organizationchart-node-toggle-button-hover-color:var(--p-text-color);--p-organizationchart-node-toggle-button-size:1.5rem;--p-organizationchart-node-toggle-button-border-radius:50%;--p-organizationchart-node-toggle-button-focus-ring-width:var(--p-focus-ring-width);--p-organizationchart-node-toggle-button-focus-ring-style:var(--p-focus-ring-style);--p-organizationchart-node-toggle-button-focus-ring-color:var(--p-focus-ring-color);--p-organizationchart-node-toggle-button-focus-ring-offset:var(--p-focus-ring-offset);--p-organizationchart-node-toggle-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-organizationchart-node-background:var(--p-content-background);--p-organizationchart-node-hover-background:var(--p-content-hover-background);--p-organizationchart-node-selected-background:var(--p-highlight-background);--p-organizationchart-node-border-color:var(--p-content-border-color);--p-organizationchart-node-color:var(--p-content-color);--p-organizationchart-node-selected-color:var(--p-highlight-color);--p-organizationchart-node-hover-color:var(--p-content-hover-color);--p-organizationchart-node-padding:0.75rem 1rem;--p-organizationchart-node-toggleable-padding:0.75rem 1rem 1.25rem 1rem;--p-organizationchart-node-border-radius:var(--p-content-border-radius);--p-organizationchart-gutter:0.75rem;--p-organizationchart-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "organizationchart-style",
-        "value": ".p-organizationchart-table{border-spacing:0;border-collapse:separate;margin:0 auto;}.p-organizationchart-table > tbody > tr > td{text-align:center;vertical-align:top;padding:0 var(--p-organizationchart-gutter);}.p-organizationchart-node{display:inline-block;position:relative;border:1px solid var(--p-organizationchart-node-border-color);background:var(--p-organizationchart-node-background);color:var(--p-organizationchart-node-color);padding:var(--p-organizationchart-node-padding);border-radius:var(--p-organizationchart-node-border-radius);transition:background var(--p-organizationchart-transition-duration),border-color var(--p-organizationchart-transition-duration),color var(--p-organizationchart-transition-duration),box-shadow var(--p-organizationchart-transition-duration);}.p-organizationchart-node:has(.p-organizationchart-node-toggle-button){padding:var(--p-organizationchart-node-toggleable-padding);}.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover{background:var(--p-organizationchart-node-hover-background);color:var(--p-organizationchart-node-hover-color);}.p-organizationchart-node-selected{background:var(--p-organizationchart-node-selected-background);color:var(--p-organizationchart-node-selected-color);}.p-organizationchart-node-toggle-button{position:absolute;inset-block-end:calc(-1 * calc(var(--p-organizationchart-node-toggle-button-size) / 2));margin-inline-start:calc(-1 * calc(var(--p-organizationchart-node-toggle-button-size) / 2));z-index:2;inset-inline-start:50%;user-select:none;cursor:pointer;width:var(--p-organizationchart-node-toggle-button-size);height:var(--p-organizationchart-node-toggle-button-size);text-decoration:none;background:var(--p-organizationchart-node-toggle-button-background);color:var(--p-organizationchart-node-toggle-button-color);border-radius:var(--p-organizationchart-node-toggle-button-border-radius);border:1px solid var(--p-organizationchart-node-toggle-button-border-color);display:inline-flex;justify-content:center;align-items:center;outline-color:transparent;transition:background var(--p-organizationchart-transition-duration),color var(--p-organizationchart-transition-duration),border-color var(--p-organizationchart-transition-duration),outline-color var(--p-organizationchart-transition-duration),box-shadow var(--p-organizationchart-transition-duration);}.p-organizationchart-node-toggle-button:hover{background:var(--p-organizationchart-node-toggle-button-hover-background);color:var(--p-organizationchart-node-toggle-button-hover-color);}.p-organizationchart-node-toggle-button:focus-visible{box-shadow:var(--p-organizationchart-node-toggle-button-focus-ring-shadow);outline:var(--p-organizationchart-node-toggle-button-focus-ring-width) var(--p-organizationchart-node-toggle-button-focus-ring-style) var(--p-organizationchart-node-toggle-button-focus-ring-color);outline-offset:var(--p-organizationchart-node-toggle-button-focus-ring-offset);}.p-organizationchart-node-toggle-button-icon{position:relative;inset-block-start:1px;}.p-organizationchart-connector-down{margin:0 auto;height:var(--p-organizationchart-connector-height);width:1px;background:var(--p-organizationchart-connector-color);}.p-organizationchart-connector-right{border-radius:0;}.p-organizationchart-connector-left{border-radius:0;border-inline-end:1px solid var(--p-organizationchart-connector-color);}.p-organizationchart-connector-top{border-block-start:1px solid var(--p-organizationchart-connector-color);}.p-organizationchart-node-selectable{cursor:pointer;}.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left){border-inline-end:0 none;}.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left){border-start-end-radius:var(--p-organizationchart-connector-border-radius);}.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right){border-inline-start:1px solid var(--p-organizationchart-connector-color);border-start-start-radius:var(--p-organizationchart-connector-border-radius);}"
-    },
-    {
-        "name": "paginator-variables",
-        "value": ":root,:host{--p-paginator-jump-to-page-input-max-width:2.5rem;--p-paginator-current-page-report-color:var(--p-text-muted-color);--p-paginator-nav-button-background:transparent;--p-paginator-nav-button-hover-background:var(--p-content-hover-background);--p-paginator-nav-button-selected-background:var(--p-highlight-background);--p-paginator-nav-button-color:var(--p-text-muted-color);--p-paginator-nav-button-hover-color:var(--p-text-hover-muted-color);--p-paginator-nav-button-selected-color:var(--p-highlight-color);--p-paginator-nav-button-width:2.5rem;--p-paginator-nav-button-height:2.5rem;--p-paginator-nav-button-border-radius:50%;--p-paginator-nav-button-focus-ring-width:var(--p-focus-ring-width);--p-paginator-nav-button-focus-ring-style:var(--p-focus-ring-style);--p-paginator-nav-button-focus-ring-color:var(--p-focus-ring-color);--p-paginator-nav-button-focus-ring-offset:var(--p-focus-ring-offset);--p-paginator-nav-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-paginator-padding:0.5rem 1rem;--p-paginator-gap:0.25rem;--p-paginator-border-radius:var(--p-content-border-radius);--p-paginator-background:var(--p-content-background);--p-paginator-color:var(--p-content-color);--p-paginator-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "paginator-style",
-        "value": ".p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--p-paginator-background);color:var(--p-paginator-color);padding:var(--p-paginator-padding);border-radius:var(--p-paginator-border-radius);gap:var(--p-paginator-gap);}.p-paginator-content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--p-paginator-gap);}.p-paginator-content-start{margin-inline-end:auto;}.p-paginator-content-end{margin-inline-start:auto;}.p-paginator-page,.p-paginator-next,.p-paginator-last,.p-paginator-first,.p-paginator-prev{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;user-select:none;overflow:hidden;position:relative;background:var(--p-paginator-nav-button-background);border:0 none;color:var(--p-paginator-nav-button-color);min-width:var(--p-paginator-nav-button-width);height:var(--p-paginator-nav-button-height);transition:background var(--p-paginator-transition-duration),color var(--p-paginator-transition-duration),outline-color var(--p-paginator-transition-duration),box-shadow var(--p-paginator-transition-duration);border-radius:var(--p-paginator-nav-button-border-radius);padding:0;margin:0;}.p-paginator-page:focus-visible,.p-paginator-next:focus-visible,.p-paginator-last:focus-visible,.p-paginator-first:focus-visible,.p-paginator-prev:focus-visible{box-shadow:var(--p-paginator-nav-button-focus-ring-shadow);outline:var(--p-paginator-nav-button-focus-ring-width) var(--p-paginator-nav-button-focus-ring-style) var(--p-paginator-nav-button-focus-ring-color);outline-offset:var(--p-paginator-nav-button-focus-ring-offset);}.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,.p-paginator-first:not(.p-disabled):hover,.p-paginator-prev:not(.p-disabled):hover,.p-paginator-next:not(.p-disabled):hover,.p-paginator-last:not(.p-disabled):hover{background:var(--p-paginator-nav-button-hover-background);color:var(--p-paginator-nav-button-hover-color);}.p-paginator-page.p-paginator-page-selected{background:var(--p-paginator-nav-button-selected-background);color:var(--p-paginator-nav-button-selected-color);}.p-paginator-current{color:var(--p-paginator-current-page-report-color);}.p-paginator-pages{display:flex;align-items:center;gap:var(--p-paginator-gap);}.p-paginator-jtp-input .p-inputtext{max-width:var(--p-paginator-jump-to-page-input-max-width);}.p-paginator-first:dir(rtl),.p-paginator-prev:dir(rtl),.p-paginator-next:dir(rtl),.p-paginator-last:dir(rtl){transform:rotate(180deg);}"
-    },
-    {
-        "name": "picklist-variables",
-        "value": ":root,:host{--p-picklist-controls-gap:0.5rem;--p-picklist-gap:1.125rem;}"
-    },
-    {
-        "name": "picklist-style",
-        "value": ".p-picklist{display:flex;gap:var(--p-picklist-gap);}.p-picklist-controls{display:flex;flex-direction:column;justify-content:center;gap:var(--p-picklist-controls-gap);}.p-picklist-list-container{flex:1 1 50%;}.p-picklist .p-listbox{height:100%;}"
-    },
-    {
-        "name": "tree-variables",
-        "value": ":root,:host{--p-tree-filter-margin:0 0 0.5rem 0;--p-tree-loading-icon-size:2rem;--p-tree-node-toggle-button-border-radius:50%;--p-tree-node-toggle-button-size:1.75rem;--p-tree-node-toggle-button-hover-background:var(--p-content-hover-background);--p-tree-node-toggle-button-selected-hover-background:var(--p-content-background);--p-tree-node-toggle-button-color:var(--p-text-muted-color);--p-tree-node-toggle-button-hover-color:var(--p-text-hover-muted-color);--p-tree-node-toggle-button-selected-hover-color:var(--p-primary-color);--p-tree-node-toggle-button-focus-ring-width:var(--p-focus-ring-width);--p-tree-node-toggle-button-focus-ring-style:var(--p-focus-ring-style);--p-tree-node-toggle-button-focus-ring-color:var(--p-focus-ring-color);--p-tree-node-toggle-button-focus-ring-offset:var(--p-focus-ring-offset);--p-tree-node-toggle-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-tree-node-icon-color:var(--p-text-muted-color);--p-tree-node-icon-hover-color:var(--p-text-hover-muted-color);--p-tree-node-icon-selected-color:var(--p-highlight-color);--p-tree-node-padding:0.25rem 0.5rem;--p-tree-node-border-radius:var(--p-content-border-radius);--p-tree-node-hover-background:var(--p-content-hover-background);--p-tree-node-selected-background:var(--p-highlight-background);--p-tree-node-color:var(--p-text-color);--p-tree-node-hover-color:var(--p-text-hover-color);--p-tree-node-selected-color:var(--p-highlight-color);--p-tree-node-gap:0.25rem;--p-tree-node-focus-ring-width:var(--p-focus-ring-width);--p-tree-node-focus-ring-style:var(--p-focus-ring-style);--p-tree-node-focus-ring-color:var(--p-focus-ring-color);--p-tree-node-focus-ring-offset:-1px;--p-tree-node-focus-ring-shadow:var(--p-focus-ring-shadow);--p-tree-background:var(--p-content-background);--p-tree-color:var(--p-content-color);--p-tree-padding:1rem;--p-tree-gap:2px;--p-tree-indent:1rem;--p-tree-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "tree-style",
-        "value": ".p-tree{display:block;background:var(--p-tree-background);color:var(--p-tree-color);padding:var(--p-tree-padding);position:relative;}.p-tree-root-children,.p-tree-node-children{display:flex;list-style-type:none;flex-direction:column;margin:0;gap:var(--p-tree-gap);}.p-tree-root-children{padding:0;padding-block-start:var(--p-tree-gap);}.p-tree-node-children{padding:0;padding-block-start:var(--p-tree-gap);padding-inline-start:var(--p-tree-indent);}.p-tree-node{padding:0;outline:0 none;}.p-tree-node-content{border-radius:var(--p-tree-node-border-radius);padding:var(--p-tree-node-padding);display:flex;align-items:center;outline-color:transparent;color:var(--p-tree-node-color);gap:var(--p-tree-node-gap);transition:background var(--p-tree-transition-duration),color var(--p-tree-transition-duration),outline-color var(--p-tree-transition-duration),box-shadow var(--p-tree-transition-duration);}.p-tree-node-content[data-p-dragging]{outline:1px dashed var(--p-primary-color);outline-offset:-1px;}.p-tree-node-content[data-pc-section=\"drag-image\"]{background:var(--p-tree-background);}.p-tree-node:focus-visible > .p-tree-node-content{box-shadow:var(--p-tree-node-focus-ring-shadow);outline:var(--p-tree-node-focus-ring-width) var(--p-tree-node-focus-ring-style) var(--p-tree-node-focus-ring-color);outline-offset:var(--p-tree-node-focus-ring-offset);}.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover{background:var(--p-tree-node-hover-background);color:var(--p-tree-node-hover-color);}.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon{color:var(--p-tree-node-icon-hover-color);}.p-tree-node-content.p-tree-node-selected{background:var(--p-tree-node-selected-background);color:var(--p-tree-node-selected-color);}.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button{color:inherit;}.p-tree-node-content.p-tree-node-dragover{background:var(--p-tree-node-hover-background);color:var(--p-tree-node-hover-color);}.p-tree-node-content:focus-visible,.p-tree-node-content.p-tree-node-contextmenu-selected{box-shadow:var(--p-tree-node-focus-ring-shadow);outline:var(--p-tree-node-focus-ring-width) var(--p-tree-node-focus-ring-style) var(--p-tree-node-focus-ring-color);outline-offset:var(--p-tree-node-focus-ring-offset);}.p-tree-node-drop-point {outline:1px solid var(--p-primary-color);} .p-tree-node-toggle-button{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0;width:var(--p-tree-node-toggle-button-size);height:var(--p-tree-node-toggle-button-size);color:var(--p-tree-node-toggle-button-color);border:0 none;background:transparent;border-radius:var(--p-tree-node-toggle-button-border-radius);transition:background var(--p-tree-transition-duration),color var(--p-tree-transition-duration),border-color var(--p-tree-transition-duration),outline-color var(--p-tree-transition-duration),box-shadow var(--p-tree-transition-duration);outline-color:transparent;padding:0;}.p-tree-node-toggle-button:enabled:hover{background:var(--p-tree-node-toggle-button-hover-background);color:var(--p-tree-node-toggle-button-hover-color);}.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover{background:var(--p-tree-node-toggle-button-selected-hover-background);color:var(--p-tree-node-toggle-button-selected-hover-color);}.p-tree-root{overflow:auto;}.p-tree-node-selectable{cursor:pointer;user-select:none;}.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button{visibility:hidden;}.p-tree-node-icon{color:var(--p-tree-node-icon-color);transition:color var(--p-tree-transition-duration);}.p-tree-node-content.p-tree-node-selected .p-tree-node-icon{color:var(--p-tree-node-icon-selected-color);}.p-tree-filter{margin:var(--p-tree-filter-margin);}.p-tree-filter-input{width:100%;}.p-tree-loading-icon{font-size:var(--p-tree-loading-icon-size);width:var(--p-tree-loading-icon-size);height:var(--p-tree-loading-icon-size);}.p-tree .p-tree-mask{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;}.p-tree-flex-scrollable{display:flex;flex:1;height:100%;flex-direction:column;}.p-tree-flex-scrollable .p-tree-root{flex:1;}"
-    },
-    {
-        "name": "treetable-variables",
-        "value": ":root,:host{--p-treetable-paginator-bottom-border-color:var(--p-content-border-color);--p-treetable-paginator-bottom-border-width:0 0 1px 0;--p-treetable-paginator-top-border-color:var(--p-content-border-color);--p-treetable-paginator-top-border-width:0 0 1px 0;--p-treetable-node-toggle-button-hover-background:var(--p-content-hover-background);--p-treetable-node-toggle-button-selected-hover-background:var(--p-content-background);--p-treetable-node-toggle-button-color:var(--p-text-muted-color);--p-treetable-node-toggle-button-hover-color:var(--p-text-color);--p-treetable-node-toggle-button-selected-hover-color:var(--p-primary-color);--p-treetable-node-toggle-button-size:1.75rem;--p-treetable-node-toggle-button-border-radius:50%;--p-treetable-node-toggle-button-focus-ring-width:var(--p-focus-ring-width);--p-treetable-node-toggle-button-focus-ring-style:var(--p-focus-ring-style);--p-treetable-node-toggle-button-focus-ring-color:var(--p-focus-ring-color);--p-treetable-node-toggle-button-focus-ring-offset:var(--p-focus-ring-offset);--p-treetable-node-toggle-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-treetable-loading-icon-size:2rem;--p-treetable-sort-icon-color:var(--p-text-muted-color);--p-treetable-sort-icon-hover-color:var(--p-text-hover-muted-color);--p-treetable-sort-icon-size:0.875rem;--p-treetable-resize-indicator-width:1px;--p-treetable-resize-indicator-color:var(--p-primary-color);--p-treetable-column-resizer-width:0.5rem;--p-treetable-footer-background:var(--p-content-background);--p-treetable-footer-border-color:var(--p-treetable-border-color);--p-treetable-footer-color:var(--p-content-color);--p-treetable-footer-border-width:0 0 1px 0;--p-treetable-footer-padding:0.75rem 1rem;--p-treetable-column-footer-font-weight:600;--p-treetable-footer-cell-background:var(--p-content-background);--p-treetable-footer-cell-border-color:var(--p-treetable-border-color);--p-treetable-footer-cell-color:var(--p-content-color);--p-treetable-footer-cell-padding:0.75rem 1rem;--p-treetable-body-cell-border-color:var(--p-treetable-border-color);--p-treetable-body-cell-padding:0.75rem 1rem;--p-treetable-body-cell-gap:0.5rem;--p-treetable-row-background:var(--p-content-background);--p-treetable-row-hover-background:var(--p-content-hover-background);--p-treetable-row-selected-background:var(--p-highlight-background);--p-treetable-row-color:var(--p-content-color);--p-treetable-row-hover-color:var(--p-content-hover-color);--p-treetable-row-selected-color:var(--p-highlight-color);--p-treetable-row-focus-ring-width:var(--p-focus-ring-width);--p-treetable-row-focus-ring-style:var(--p-focus-ring-style);--p-treetable-row-focus-ring-color:var(--p-focus-ring-color);--p-treetable-row-focus-ring-offset:-1px;--p-treetable-row-focus-ring-shadow:var(--p-focus-ring-shadow);--p-treetable-column-title-font-weight:600;--p-treetable-header-cell-background:var(--p-content-background);--p-treetable-header-cell-hover-background:var(--p-content-hover-background);--p-treetable-header-cell-selected-background:var(--p-highlight-background);--p-treetable-header-cell-border-color:var(--p-treetable-border-color);--p-treetable-header-cell-color:var(--p-content-color);--p-treetable-header-cell-hover-color:var(--p-content-hover-color);--p-treetable-header-cell-selected-color:var(--p-highlight-color);--p-treetable-header-cell-gap:0.5rem;--p-treetable-header-cell-padding:0.75rem 1rem;--p-treetable-header-cell-focus-ring-width:var(--p-focus-ring-width);--p-treetable-header-cell-focus-ring-style:var(--p-focus-ring-style);--p-treetable-header-cell-focus-ring-color:var(--p-focus-ring-color);--p-treetable-header-cell-focus-ring-offset:-1px;--p-treetable-header-cell-focus-ring-shadow:var(--p-focus-ring-shadow);--p-treetable-header-background:var(--p-content-background);--p-treetable-header-border-color:var(--p-treetable-border-color);--p-treetable-header-color:var(--p-content-color);--p-treetable-header-border-width:0 0 1px 0;--p-treetable-header-padding:0.75rem 1rem;--p-treetable-transition-duration:var(--p-transition-duration);--p-treetable-body-cell-selected-border-color:var(--p-primary-100);--p-treetable-border-color:var(--p-content-border-color);}.p-dark{--p-treetable-body-cell-selected-border-color:var(--p-primary-900);--p-treetable-border-color:var(--p-surface-800);}"
-    },
-    {
-        "name": "treetable-style",
-        "value": ".p-treetable{position:relative;}.p-treetable-table{border-spacing:0;border-collapse:separate;width:100%;}.p-treetable-scrollable > .p-treetable-table-container{position:relative;}.p-treetable-scrollable-table > .p-treetable-thead{inset-block-start:0;z-index:1;}.p-treetable-scrollable-table > .p-treetable-frozen-tbody{position:sticky;z-index:1;}.p-treetable-scrollable-table > .p-treetable-tfoot{inset-block-end:0;z-index:1;}.p-treetable-scrollable .p-treetable-frozen-column{position:sticky;background:var(--p-treetable-header-cell-background);}.p-treetable-scrollable th.p-treetable-frozen-column{z-index:1;}.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead{background:var(--p-treetable-header-cell-background);}.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot{background:var(--p-treetable-footer-cell-background);}.p-treetable-flex-scrollable{display:flex;flex-direction:column;height:100%;}.p-treetable-flex-scrollable > .p-treetable-table-container{display:flex;flex-direction:column;flex:1;height:100%;}.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header{position:sticky;z-index:1;}.p-treetable-resizable-table > .p-treetable-thead > tr > th,.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,.p-treetable-resizable-table > .p-treetable-tbody > tr > td{overflow:hidden;white-space:nowrap;}.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column){background-clip:padding-box;position:relative;}.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer{display:none;}.p-treetable-column-resizer{display:block;position:absolute;inset-block-start:0;inset-inline-end:0;margin:0;width:var(--p-treetable-column-resizer-width);height:100%;padding:0;cursor:col-resize;border:1px solid transparent;}.p-treetable-column-header-content{display:flex;align-items:center;gap:var(--p-treetable-header-cell-gap);}.p-treetable-column-resize-indicator{width:var(--p-treetable-resize-indicator-width);position:absolute;z-index:10;display:none;background:var(--p-treetable-resize-indicator-color);}.p-treetable-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;}.p-treetable-paginator-top{border-color:var(--p-treetable-paginator-top-border-color);border-style:solid;border-width:var(--p-treetable-paginator-top-border-width);}.p-treetable-paginator-bottom{border-color:var(--p-treetable-paginator-bottom-border-color);border-style:solid;border-width:var(--p-treetable-paginator-bottom-border-width);}.p-treetable-header{background:var(--p-treetable-header-background);color:var(--p-treetable-header-color);border-color:var(--p-treetable-header-border-color);border-style:solid;border-width:var(--p-treetable-header-border-width);padding:var(--p-treetable-header-padding);}.p-treetable-footer{background:var(--p-treetable-footer-background);color:var(--p-treetable-footer-color);border-color:var(--p-treetable-footer-border-color);border-style:solid;border-width:var(--p-treetable-footer-border-width);padding:var(--p-treetable-footer-padding);}.p-treetable-header-cell{padding:var(--p-treetable-header-cell-padding);background:var(--p-treetable-header-cell-background);border-color:var(--p-treetable-header-cell-border-color);border-style:solid;border-width:0 0 1px 0;color:var(--p-treetable-header-cell-color);font-weight:normal;text-align:start;transition:background var(--p-treetable-transition-duration),color var(--p-treetable-transition-duration),border-color var(--p-treetable-transition-duration),outline-color var(--p-treetable-transition-duration),box-shadow var(--p-treetable-transition-duration);}.p-treetable-column-title{font-weight:var(--p-treetable-column-title-font-weight);}.p-treetable-tbody > tr{outline-color:transparent;background:var(--p-treetable-row-background);color:var(--p-treetable-row-color);transition:background var(--p-treetable-transition-duration),color var(--p-treetable-transition-duration),border-color var(--p-treetable-transition-duration),outline-color var(--p-treetable-transition-duration),box-shadow var(--p-treetable-transition-duration);}.p-treetable-tbody > tr > td{text-align:start;border-color:var(--p-treetable-body-cell-border-color);border-style:solid;border-width:0 0 1px 0;padding:var(--p-treetable-body-cell-padding);}.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover{background:var(--p-treetable-row-hover-background);color:var(--p-treetable-row-hover-color);}.p-treetable-tbody > tr.p-treetable-row-selected{background:var(--p-treetable-row-selected-background);color:var(--p-treetable-row-selected-color);}.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td{border-block-end-color:var(--p-treetable-body-cell-selected-border-color);}.p-treetable-tbody > tr.p-treetable-row-selected > td{border-block-end-color:var(--p-treetable-body-cell-selected-border-color);}.p-treetable-tbody > tr:focus-visible,.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected{box-shadow:var(--p-treetable-row-focus-ring-shadow);outline:var(--p-treetable-row-focus-ring-width) var(--p-treetable-row-focus-ring-style) var(--p-treetable-row-focus-ring-color);outline-offset:var(--p-treetable-row-focus-ring-offset);}.p-treetable-tfoot > tr > td{text-align:start;padding:var(--p-treetable-footer-cell-padding);border-color:var(--p-treetable-footer-cell-border-color);border-style:solid;border-width:0 0 1px 0;color:var(--p-treetable-footer-cell-color);background:var(--p-treetable-footer-cell-background);}.p-treetable-column-footer{font-weight:var(--p-treetable-column-footer-font-weight);}.p-treetable-sortable-column{cursor:pointer;user-select:none;outline-color:transparent;}.p-treetable-column-title,.p-treetable-sort-icon,.p-treetable-sort-badge{vertical-align:middle;}.p-treetable-sort-icon{color:var(--p-treetable-sort-icon-color);font-size:var(--p-treetable-sort-icon-size);width:var(--p-treetable-sort-icon-size);height:var(--p-treetable-sort-icon-size);transition:color var(--p-treetable-transition-duration);}.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover{background:var(--p-treetable-header-cell-hover-background);color:var(--p-treetable-header-cell-hover-color);}.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon{color:var(--p-treetable-sort-icon-hover-color);}.p-treetable-column-sorted{background:var(--p-treetable-header-cell-selected-background);color:var(--p-treetable-header-cell-selected-color);}.p-treetable-column-sorted .p-treetable-sort-icon{color:var(--p-treetable-header-cell-selected-color);}.p-treetable-sortable-column:focus-visible{box-shadow:var(--p-treetable-header-cell-focus-ring-shadow);outline:var(--p-treetable-header-cell-focus-ring-width) var(--p-treetable-header-cell-focus-ring-style) var(--p-treetable-header-cell-focus-ring-color);outline-offset:var(--p-treetable-header-cell-focus-ring-offset);}.p-treetable-hoverable .p-treetable-selectable-row{cursor:pointer;}.p-treetable-loading-icon{font-size:var(--p-treetable-loading-icon-size);width:var(--p-treetable-loading-icon-size);height:var(--p-treetable-loading-icon-size);}.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px;}.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px;}.p-treetable-gridlines .p-treetable-paginator-top{border-width:1px 1px 0 1px;}.p-treetable-gridlines .p-treetable-paginator-bottom{border-width:0 1px 1px 1px;}.p-treetable-gridlines .p-treetable-thead > tr > th{border-width:1px 0 1px 1px;}.p-treetable-gridlines .p-treetable-thead > tr > th:last-child{border-width:1px;}.p-treetable-gridlines .p-treetable-tbody > tr > td{border-width:1px 0 0 1px;}.p-treetable-gridlines .p-treetable-tbody > tr > td:last-child{border-width:1px 1px 0 1px;}.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td{border-width:1px 0 1px 1px;}.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td:last-child{border-width:1px;}.p-treetable-gridlines .p-treetable-tfoot > tr > td{border-width:1px 0 1px 1px;}.p-treetable-gridlines .p-treetable-tfoot > tr > td:last-child{border-width:1px 1px 1px 1px;}.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td{border-width:0 0 1px 1px;}.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td:last-child{border-width:0 1px 1px 1px;}.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td{border-width:0 0 1px 1px;}.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td:last-child{border-width:0 1px 1px 1px;}.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td{border-width:0 0 0 1px;}.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td:last-child{border-width:0 1px 0 1px;}.p-treetable.p-treetable-sm .p-treetable-header{padding:0.375rem 0.5rem;}.p-treetable.p-treetable-sm .p-treetable-thead > tr > th{padding:0.375rem 0.5rem;}.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td{padding:0.375rem 0.5rem;}.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td{padding:0.375rem 0.5rem;}.p-treetable.p-treetable-sm .p-treetable-footer{padding:0.375rem 0.5rem;}.p-treetable.p-treetable-lg .p-treetable-header{padding:0.9375rem 1.25rem;}.p-treetable.p-treetable-lg .p-treetable-thead > tr > th{padding:0.9375rem 1.25rem;}.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td{padding:0.9375rem 1.25rem;}.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td{padding:0.9375rem 1.25rem;}.p-treetable.p-treetable-lg .p-treetable-footer{padding:0.9375rem 1.25rem;}.p-treetable-body-cell-content{display:flex;align-items:center;gap:var(--p-treetable-body-cell-gap);}.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button{color:inherit;}.p-treetable-node-toggle-button{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;width:var(--p-treetable-node-toggle-button-size);height:var(--p-treetable-node-toggle-button-size);color:var(--p-treetable-node-toggle-button-color);border:0 none;background:transparent;cursor:pointer;border-radius:var(--p-treetable-node-toggle-button-border-radius);transition:background var(--p-treetable-transition-duration),color var(--p-treetable-transition-duration),border-color var(--p-treetable-transition-duration),outline-color var(--p-treetable-transition-duration),box-shadow var(--p-treetable-transition-duration);outline-color:transparent;user-select:none;}.p-treetable-node-toggle-button:enabled:hover{color:var(--p-treetable-node-toggle-button-hover-color);background:var(--p-treetable-node-toggle-button-hover-background);}.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover{background:var(--p-treetable-node-toggle-button-selected-hover-background);color:var(--p-treetable-node-toggle-button-selected-hover-color);}.p-treetable-node-toggle-button:focus-visible{box-shadow:var(--p-treetable-node-toggle-button-focus-ring-shadow);outline:var(--p-treetable-node-toggle-button-focus-ring-width) var(--p-treetable-node-toggle-button-focus-ring-style) var(--p-treetable-node-toggle-button-focus-ring-color);outline-offset:var(--p-treetable-node-toggle-button-focus-ring-offset);}.p-treetable-node-toggle-icon:dir(rtl){transform:rotate(180deg);}"
-    },
-    {
-        "name": "timeline-variables",
-        "value": ":root,:host{--p-timeline-event-connector-color:var(--p-content-border-color);--p-timeline-event-connector-size:2px;--p-timeline-event-marker-size:1.125rem;--p-timeline-event-marker-border-radius:50%;--p-timeline-event-marker-border-width:2px;--p-timeline-event-marker-background:var(--p-content-background);--p-timeline-event-marker-border-color:var(--p-content-border-color);--p-timeline-event-marker-content-border-radius:50%;--p-timeline-event-marker-content-size:0.375rem;--p-timeline-event-marker-content-background:var(--p-primary-color);--p-timeline-event-marker-content-inset-shadow:0px 0.5px 0px 0px rgba(0,0,0,0.06),0px 1px 1px 0px rgba(0,0,0,0.12);--p-timeline-vertical-event-content-padding:0 1rem;--p-timeline-horizontal-event-content-padding:1rem 0;--p-timeline-event-min-height:5rem;}"
-    },
-    {
-        "name": "timeline-style",
-        "value": ".p-timeline{display:flex;flex-grow:1;flex-direction:column;direction:ltr;}.p-timeline-left .p-timeline-event-opposite{text-align:right;}.p-timeline-left .p-timeline-event-content{text-align:left;}.p-timeline-right .p-timeline-event{flex-direction:row-reverse;}.p-timeline-right .p-timeline-event-opposite{text-align:left;}.p-timeline-right .p-timeline-event-content{text-align:right;}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even){flex-direction:row-reverse;}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite{text-align:right;}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content{text-align:left;}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite{text-align:left;}.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content{text-align:right;}.p-timeline-vertical .p-timeline-event-opposite,.p-timeline-vertical .p-timeline-event-content{padding:var(--p-timeline-vertical-event-content-padding);}.p-timeline-vertical .p-timeline-event-connector{width:var(--p-timeline-event-connector-size);}.p-timeline-event{display:flex;position:relative;min-height:var(--p-timeline-event-min-height);}.p-timeline-event:last-child{min-height:0;}.p-timeline-event-opposite{flex:1;}.p-timeline-event-content{flex:1;}.p-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column;}.p-timeline-event-marker{display:inline-flex;align-items:center;justify-content:center;position:relative;align-self:baseline;border-width:var(--p-timeline-event-marker-border-width);border-style:solid;border-color:var(--p-timeline-event-marker-border-color);border-radius:var(--p-timeline-event-marker-border-radius);width:var(--p-timeline-event-marker-size);height:var(--p-timeline-event-marker-size);background:var(--p-timeline-event-marker-background);}.p-timeline-event-marker::before{content:' ';border-radius:var(--p-timeline-event-marker-content-border-radius);width:var(--p-timeline-event-marker-content-size);height:var(--p-timeline-event-marker-content-size);background:var(--p-timeline-event-marker-content-background);}.p-timeline-event-marker::after{content:' ';position:absolute;width:100%;height:100%;border-radius:var(--p-timeline-event-marker-border-radius);box-shadow:var(--p-timeline-event-marker-content-inset-shadow);}.p-timeline-event-connector{flex-grow:1;background:var(--p-timeline-event-connector-color);}.p-timeline-horizontal{flex-direction:row;}.p-timeline-horizontal .p-timeline-event{flex-direction:column;flex:1;}.p-timeline-horizontal .p-timeline-event:last-child{flex:0;}.p-timeline-horizontal .p-timeline-event-separator{flex-direction:row;}.p-timeline-horizontal .p-timeline-event-connector{width:100%;height:var(--p-timeline-event-connector-size);}.p-timeline-horizontal .p-timeline-event-opposite,.p-timeline-horizontal .p-timeline-event-content{padding:var(--p-timeline-horizontal-event-content-padding);}.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even){flex-direction:column-reverse;}.p-timeline-bottom .p-timeline-event{flex-direction:column-reverse;}"
-    },
-    {
-        "name": "virtualscroller-variables",
-        "value": ":root,:host{--p-virtualscroller-loader-icon-size:2rem;--p-virtualscroller-loader-mask-background:var(--p-content-background);--p-virtualscroller-loader-mask-color:var(--p-text-muted-color);}"
-    },
-    {
-        "name": "virtualscroller-style",
-        "value": ".p-virtualscroller-loader{background:var(--p-virtualscroller-loader-mask-background);color:var(--p-virtualscroller-loader-mask-color);}.p-virtualscroller-loading-icon{font-size:var(--p-virtualscroller-loader-icon-size);width:var(--p-virtualscroller-loader-icon-size);height:var(--p-virtualscroller-loader-icon-size);}"
-    },
-    {
-        "name": "accordion-variables",
-        "value": ":root,:host{--p-accordion-content-border-width:0;--p-accordion-content-border-color:var(--p-content-border-color);--p-accordion-content-background:var(--p-content-background);--p-accordion-content-color:var(--p-text-color);--p-accordion-content-padding:0 1.125rem 1.125rem 1.125rem;--p-accordion-header-color:var(--p-text-muted-color);--p-accordion-header-hover-color:var(--p-text-color);--p-accordion-header-active-color:var(--p-text-color);--p-accordion-header-active-hover-color:var(--p-text-color);--p-accordion-header-padding:1.125rem;--p-accordion-header-font-weight:600;--p-accordion-header-border-radius:0;--p-accordion-header-border-width:0;--p-accordion-header-border-color:var(--p-content-border-color);--p-accordion-header-background:var(--p-content-background);--p-accordion-header-hover-background:var(--p-content-background);--p-accordion-header-active-background:var(--p-content-background);--p-accordion-header-active-hover-background:var(--p-content-background);--p-accordion-header-last-bottom-border-radius:var(--p-content-border-radius);--p-accordion-header-last-active-bottom-border-radius:0;--p-accordion-header-first-top-border-radius:var(--p-content-border-radius);--p-accordion-header-first-border-width:0;--p-accordion-header-toggle-icon-color:var(--p-text-muted-color);--p-accordion-header-toggle-icon-hover-color:var(--p-text-color);--p-accordion-header-toggle-icon-active-color:var(--p-text-color);--p-accordion-header-toggle-icon-active-hover-color:var(--p-text-color);--p-accordion-header-focus-ring-width:var(--p-focus-ring-width);--p-accordion-header-focus-ring-style:var(--p-focus-ring-style);--p-accordion-header-focus-ring-color:var(--p-focus-ring-color);--p-accordion-header-focus-ring-offset:-1px;--p-accordion-header-focus-ring-shadow:var(--p-focus-ring-shadow);--p-accordion-panel-border-width:0 0 1px 0;--p-accordion-panel-border-color:var(--p-content-border-color);--p-accordion-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "accordion-style",
-        "value": ".p-accordionpanel{display:flex;flex-direction:column;border-style:solid;border-width:var(--p-accordion-panel-border-width);border-color:var(--p-accordion-panel-border-color);}.p-accordionheader{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--p-accordion-header-padding);color:var(--p-accordion-header-color);background:var(--p-accordion-header-background);border-style:solid;border-width:var(--p-accordion-header-border-width);border-color:var(--p-accordion-header-border-color);font-weight:var(--p-accordion-header-font-weight);border-radius:var(--p-accordion-header-border-radius);transition:background var(--p-accordion-transition-duration),color var(--p-accordion-transition-duration),outline-color var(--p-accordion-transition-duration),box-shadow var(--p-accordion-transition-duration);outline-color:transparent;}.p-accordionpanel:first-child > .p-accordionheader{border-width:var(--p-accordion-header-first-border-width);border-start-start-radius:var(--p-accordion-header-first-top-border-radius);border-start-end-radius:var(--p-accordion-header-first-top-border-radius);}.p-accordionpanel:last-child > .p-accordionheader{border-end-start-radius:var(--p-accordion-header-last-bottom-border-radius);border-end-end-radius:var(--p-accordion-header-last-bottom-border-radius);}.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader{border-end-start-radius:var(--p-accordion-header-last-active-bottom-border-radius);border-end-end-radius:var(--p-accordion-header-last-active-bottom-border-radius);}.p-accordionheader-toggle-icon{color:var(--p-accordion-header-toggle-icon-color);}.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible{box-shadow:var(--p-accordion-header-focus-ring-shadow);outline:var(--p-accordion-header-focus-ring-width) var(--p-accordion-header-focus-ring-style) var(--p-accordion-header-focus-ring-color);outline-offset:var(--p-accordion-header-focus-ring-offset);}.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover{background:var(--p-accordion-header-hover-background);color:var(--p-accordion-header-hover-color);}.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon{color:var(--p-accordion-header-toggle-icon-hover-color);}.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader{background:var(--p-accordion-header-active-background);color:var(--p-accordion-header-active-color);}.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon{color:var(--p-accordion-header-toggle-icon-active-color);}.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover{background:var(--p-accordion-header-active-hover-background);color:var(--p-accordion-header-active-hover-color);}.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover .p-accordionheader-toggle-icon{color:var(--p-accordion-header-toggle-icon-active-hover-color);}.p-accordioncontent{display:grid;grid-template-rows:1fr;}.p-accordioncontent-wrapper{min-height:0;}.p-accordioncontent-content{border-style:solid;border-width:var(--p-accordion-content-border-width);border-color:var(--p-accordion-content-border-color);background-color:var(--p-accordion-content-background);color:var(--p-accordion-content-color);padding:var(--p-accordion-content-padding);}"
-    },
-    {
-        "name": "card-variables",
-        "value": ":root,:host{--p-card-subtitle-color:var(--p-text-muted-color);--p-card-title-font-size:1.25rem;--p-card-title-font-weight:500;--p-card-caption-gap:0.5rem;--p-card-body-padding:1.25rem;--p-card-body-gap:0.5rem;--p-card-background:var(--p-content-background);--p-card-border-radius:var(--p-border-radius-xl);--p-card-color:var(--p-content-color);--p-card-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);}"
-    },
-    {
-        "name": "card-style",
-        "value": ".p-card{background:var(--p-card-background);color:var(--p-card-color);box-shadow:var(--p-card-shadow);border-radius:var(--p-card-border-radius);display:flex;flex-direction:column;}.p-card-caption{display:flex;flex-direction:column;gap:var(--p-card-caption-gap);}.p-card-body{padding:var(--p-card-body-padding);display:flex;flex-direction:column;gap:var(--p-card-body-gap);}.p-card-title{font-size:var(--p-card-title-font-size);font-weight:var(--p-card-title-font-weight);}.p-card-subtitle{color:var(--p-card-subtitle-color);}"
-    },
-    {
-        "name": "divider-variables",
-        "value": ":root,:host{--p-divider-vertical-margin:0 1rem;--p-divider-vertical-padding:0.5rem 0;--p-divider-vertical-content-padding:0.5rem 0;--p-divider-horizontal-margin:1rem 0;--p-divider-horizontal-padding:0 1rem;--p-divider-horizontal-content-padding:0 0.5rem;--p-divider-content-background:var(--p-content-background);--p-divider-content-color:var(--p-text-color);--p-divider-border-color:var(--p-content-border-color);}"
-    },
-    {
-        "name": "divider-style",
-        "value": ".p-divider-horizontal{display:flex;width:100%;position:relative;align-items:center;margin:var(--p-divider-horizontal-margin);padding:var(--p-divider-horizontal-padding);}.p-divider-horizontal:before{position:absolute;display:block;inset-block-start:50%;inset-inline-start:0;width:100%;content:'';border-block-start:1px solid var(--p-divider-border-color);}.p-divider-horizontal .p-divider-content{padding:var(--p-divider-horizontal-content-padding);}.p-divider-vertical{min-height:100%;display:flex;position:relative;justify-content:center;margin:var(--p-divider-vertical-margin);padding:var(--p-divider-vertical-padding);}.p-divider-vertical:before{position:absolute;display:block;inset-block-start:0;inset-inline-start:50%;height:100%;content:'';border-inline-start:1px solid var(--p-divider-border-color);}.p-divider.p-divider-vertical .p-divider-content{padding:var(--p-divider-vertical-content-padding);}.p-divider-content{z-index:1;background:var(--p-divider-content-background);color:var(--p-divider-content-color);}.p-divider-solid.p-divider-horizontal:before{border-block-start-style:solid;}.p-divider-solid.p-divider-vertical:before{border-inline-start-style:solid;}.p-divider-dashed.p-divider-horizontal:before{border-block-start-style:dashed;}.p-divider-dashed.p-divider-vertical:before{border-inline-start-style:dashed;}.p-divider-dotted.p-divider-horizontal:before{border-block-start-style:dotted;}.p-divider-dotted.p-divider-vertical:before{border-inline-start-style:dotted;}.p-divider-left:dir(rtl),.p-divider-right:dir(rtl){flex-direction:row-reverse;}"
-    },
-    {
-        "name": "fieldset-variables",
-        "value": ":root,:host{--p-fieldset-content-padding:0;--p-fieldset-toggle-icon-color:var(--p-text-muted-color);--p-fieldset-toggle-icon-hover-color:var(--p-text-hover-muted-color);--p-fieldset-legend-background:var(--p-content-background);--p-fieldset-legend-hover-background:var(--p-content-hover-background);--p-fieldset-legend-color:var(--p-content-color);--p-fieldset-legend-hover-color:var(--p-content-hover-color);--p-fieldset-legend-border-radius:var(--p-content-border-radius);--p-fieldset-legend-border-width:1px;--p-fieldset-legend-border-color:transparent;--p-fieldset-legend-padding:0.5rem 0.75rem;--p-fieldset-legend-gap:0.5rem;--p-fieldset-legend-font-weight:600;--p-fieldset-legend-focus-ring-width:var(--p-focus-ring-width);--p-fieldset-legend-focus-ring-style:var(--p-focus-ring-style);--p-fieldset-legend-focus-ring-color:var(--p-focus-ring-color);--p-fieldset-legend-focus-ring-offset:var(--p-focus-ring-offset);--p-fieldset-legend-focus-ring-shadow:var(--p-focus-ring-shadow);--p-fieldset-background:var(--p-content-background);--p-fieldset-border-color:var(--p-content-border-color);--p-fieldset-border-radius:var(--p-content-border-radius);--p-fieldset-color:var(--p-content-color);--p-fieldset-padding:0 1.125rem 1.125rem 1.125rem;--p-fieldset-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "fieldset-style",
-        "value": ".p-fieldset{background:var(--p-fieldset-background);border:1px solid var(--p-fieldset-border-color);border-radius:var(--p-fieldset-border-radius);color:var(--p-fieldset-color);padding:var(--p-fieldset-padding);margin:0;}.p-fieldset-legend{background:var(--p-fieldset-legend-background);border-radius:var(--p-fieldset-legend-border-radius);border-width:var(--p-fieldset-legend-border-width);border-style:solid;border-color:var(--p-fieldset-legend-border-color);padding:var(--p-fieldset-legend-padding);transition:background var(--p-fieldset-transition-duration),color var(--p-fieldset-transition-duration),outline-color var(--p-fieldset-transition-duration),box-shadow var(--p-fieldset-transition-duration);}.p-fieldset-toggleable > .p-fieldset-legend{padding:0;}.p-fieldset-toggle-button{cursor:pointer;user-select:none;overflow:hidden;position:relative;text-decoration:none;display:flex;gap:var(--p-fieldset-legend-gap);align-items:center;justify-content:center;padding:var(--p-fieldset-legend-padding);background:transparent;border:0 none;border-radius:var(--p-fieldset-legend-border-radius);transition:background var(--p-fieldset-transition-duration),color var(--p-fieldset-transition-duration),outline-color var(--p-fieldset-transition-duration),box-shadow var(--p-fieldset-transition-duration);outline-color:transparent;}.p-fieldset-legend-label{font-weight:var(--p-fieldset-legend-font-weight);}.p-fieldset-toggle-button:focus-visible{box-shadow:var(--p-fieldset-legend-focus-ring-shadow);outline:var(--p-fieldset-legend-focus-ring-width) var(--p-fieldset-legend-focus-ring-style) var(--p-fieldset-legend-focus-ring-color);outline-offset:var(--p-fieldset-legend-focus-ring-offset);}.p-fieldset-toggleable > .p-fieldset-legend:hover{color:var(--p-fieldset-legend-hover-color);background:var(--p-fieldset-legend-hover-background);}.p-fieldset-toggle-icon{color:var(--p-fieldset-toggle-icon-color);transition:color var(--p-fieldset-transition-duration);}.p-fieldset-toggleable > .p-fieldset-legend:hover .p-fieldset-toggle-icon{color:var(--p-fieldset-toggle-icon-hover-color);}.p-fieldset-content-container{display:grid;grid-template-rows:1fr;}.p-fieldset-content-wrapper{min-height:0;}.p-fieldset-content{padding:var(--p-fieldset-content-padding);}"
-    },
-    {
-        "name": "panel-variables",
-        "value": ":root,:host{--p-panel-footer-padding:0 1.125rem 1.125rem 1.125rem;--p-panel-content-padding:0 1.125rem 1.125rem 1.125rem;--p-panel-title-font-weight:600;--p-panel-toggleable-header-padding:0.375rem 1.125rem;--p-panel-header-background:transparent;--p-panel-header-color:var(--p-text-color);--p-panel-header-padding:1.125rem;--p-panel-header-border-color:var(--p-content-border-color);--p-panel-header-border-width:0;--p-panel-header-border-radius:0;--p-panel-background:var(--p-content-background);--p-panel-border-color:var(--p-content-border-color);--p-panel-color:var(--p-content-color);--p-panel-border-radius:var(--p-content-border-radius);}"
-    },
-    {
-        "name": "panel-style",
-        "value": ".p-panel{display:block;border:1px solid var(--p-panel-border-color);border-radius:var(--p-panel-border-radius);background:var(--p-panel-background);color:var(--p-panel-color);}.p-panel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--p-panel-header-padding);background:var(--p-panel-header-background);color:var(--p-panel-header-color);border-style:solid;border-width:var(--p-panel-header-border-width);border-color:var(--p-panel-header-border-color);border-radius:var(--p-panel-header-border-radius);}.p-panel-toggleable .p-panel-header{padding:var(--p-panel-toggleable-header-padding);}.p-panel-title{line-height:1;font-weight:var(--p-panel-title-font-weight);}.p-panel-content-container{display:grid;grid-template-rows:1fr;}.p-panel-content-wrapper{min-height:0;}.p-panel-content{padding:var(--p-panel-content-padding);}.p-panel-footer{padding:var(--p-panel-footer-padding);}"
-    },
-    {
-        "name": "scrollpanel-variables",
-        "value": ":root,:host{--p-scrollpanel-bar-size:9px;--p-scrollpanel-bar-border-radius:var(--p-border-radius-sm);--p-scrollpanel-bar-focus-ring-width:var(--p-focus-ring-width);--p-scrollpanel-bar-focus-ring-style:var(--p-focus-ring-style);--p-scrollpanel-bar-focus-ring-color:var(--p-focus-ring-color);--p-scrollpanel-bar-focus-ring-offset:var(--p-focus-ring-offset);--p-scrollpanel-bar-focus-ring-shadow:var(--p-focus-ring-shadow);--p-scrollpanel-transition-duration:var(--p-transition-duration);--p-scrollpanel-bar-background:var(--p-surface-100);}.p-dark{--p-scrollpanel-bar-background:var(--p-surface-800);}"
-    },
-    {
-        "name": "scrollpanel-style",
-        "value": ".p-scrollpanel-content-container{overflow:hidden;width:100%;height:100%;position:relative;z-index:1;float:left;}.p-scrollpanel-content{height:calc(100% + calc(2 * var(--p-scrollpanel-bar-size)));width:calc(100% + calc(2 * var(--p-scrollpanel-bar-size)));padding-inline:0 calc(2 * var(--p-scrollpanel-bar-size));padding-block:0 calc(2 * var(--p-scrollpanel-bar-size));position:relative;overflow:auto;box-sizing:border-box;scrollbar-width:none;}.p-scrollpanel-content::-webkit-scrollbar{display:none;}.p-scrollpanel-bar{position:relative;border-radius:var(--p-scrollpanel-bar-border-radius);z-index:2;cursor:pointer;opacity:0;outline-color:transparent;background:var(--p-scrollpanel-bar-background);border:0 none;transition:outline-color var(--p-scrollpanel-transition-duration),opacity var(--p-scrollpanel-transition-duration);}.p-scrollpanel-bar:focus-visible{box-shadow:var(--p-scrollpanel-bar-focus-ring-shadow);outline:var(--p-scrollpanel-barfocus-ring-width) var(--p-scrollpanel-bar-focus-ring-style) var(--p-scrollpanel-bar-focus-ring-color);outline-offset:var(--p-scrollpanel-barfocus-ring-offset);}.p-scrollpanel-bar-y{width:var(--p-scrollpanel-bar-size);inset-block-start:0;}.p-scrollpanel-bar-x{height:var(--p-scrollpanel-bar-size);inset-block-end:0;}.p-scrollpanel-hidden{visibility:hidden;}.p-scrollpanel:hover .p-scrollpanel-bar,.p-scrollpanel:active .p-scrollpanel-bar{opacity:1;}.p-scrollpanel-grabbed{user-select:none;}"
-    },
-    {
-        "name": "splitter-variables",
-        "value": ":root,:host{--p-splitter-handle-size:24px;--p-splitter-handle-background:transparent;--p-splitter-handle-border-radius:var(--p-content-border-radius);--p-splitter-handle-focus-ring-width:var(--p-focus-ring-width);--p-splitter-handle-focus-ring-style:var(--p-focus-ring-style);--p-splitter-handle-focus-ring-color:var(--p-focus-ring-color);--p-splitter-handle-focus-ring-offset:var(--p-focus-ring-offset);--p-splitter-handle-focus-ring-shadow:var(--p-focus-ring-shadow);--p-splitter-gutter-background:var(--p-content-border-color);--p-splitter-background:var(--p-content-background);--p-splitter-border-color:var(--p-content-border-color);--p-splitter-color:var(--p-content-color);--p-splitter-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "splitter-style",
-        "value": ".p-splitter{display:flex;flex-wrap:nowrap;border:1px solid var(--p-splitter-border-color);background:var(--p-splitter-background);border-radius:var(--p-border-radius-md);color:var(--p-splitter-color);}.p-splitter-vertical{flex-direction:column;}.p-splitter-gutter{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:1;background:var(--p-splitter-gutter-background);}.p-splitter-gutter-handle{border-radius:var(--p-splitter-handle-border-radius);background:var(--p-splitter-handle-background);transition:outline-color var(--p-splitter-transition-duration),box-shadow var(--p-splitter-transition-duration);outline-color:transparent;}.p-splitter-gutter-handle:focus-visible{box-shadow:var(--p-splitter-handle-focus-ring-shadow);outline:var(--p-splitter-handle-focus-ring-width) var(--p-splitter-handle-focus-ring-style) var(--p-splitter-handle-focus-ring-color);outline-offset:var(--p-splitter-handle-focus-ring-offset);}.p-splitter-horizontal.p-splitter-resizing{cursor:col-resize;user-select:none;}.p-splitter-vertical.p-splitter-resizing{cursor:row-resize;user-select:none;}.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle{height:var(--p-splitter-handle-size);width:100%;}.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle{width:var(--p-splitter-handle-size);height:100%;}.p-splitter-horizontal > .p-splitter-gutter{cursor:col-resize;}.p-splitter-vertical > .p-splitter-gutter{cursor:row-resize;}.p-splitterpanel{flex-grow:1;overflow:hidden;}.p-splitterpanel-nested{display:flex;}.p-splitterpanel .p-splitter{flex-grow:1;border:0 none;}"
-    },
-    {
-        "name": "stepper-variables",
-        "value": ":root,:host{--p-stepper-steppanel-background:var(--p-content-background);--p-stepper-steppanel-color:var(--p-content-color);--p-stepper-steppanel-padding:0;--p-stepper-steppanel-indent:1rem;--p-stepper-steppanels-padding:0.875rem 0.5rem 1.125rem 0.5rem;--p-stepper-step-number-background:var(--p-content-background);--p-stepper-step-number-active-background:var(--p-content-background);--p-stepper-step-number-border-color:var(--p-content-border-color);--p-stepper-step-number-active-border-color:var(--p-content-border-color);--p-stepper-step-number-color:var(--p-text-muted-color);--p-stepper-step-number-active-color:var(--p-primary-color);--p-stepper-step-number-size:2rem;--p-stepper-step-number-font-size:1.143rem;--p-stepper-step-number-font-weight:500;--p-stepper-step-number-border-radius:50%;--p-stepper-step-number-shadow:0px 0.5px 0px 0px rgba(0,0,0,0.06),0px 1px 1px 0px rgba(0,0,0,0.12);--p-stepper-step-title-color:var(--p-text-muted-color);--p-stepper-step-title-active-color:var(--p-primary-color);--p-stepper-step-title-font-weight:500;--p-stepper-step-header-padding:0;--p-stepper-step-header-border-radius:var(--p-content-border-radius);--p-stepper-step-header-gap:0.5rem;--p-stepper-step-header-focus-ring-width:var(--p-focus-ring-width);--p-stepper-step-header-focus-ring-style:var(--p-focus-ring-style);--p-stepper-step-header-focus-ring-color:var(--p-focus-ring-color);--p-stepper-step-header-focus-ring-offset:var(--p-focus-ring-offset);--p-stepper-step-header-focus-ring-shadow:var(--p-focus-ring-shadow);--p-stepper-step-padding:0.5rem;--p-stepper-step-gap:1rem;--p-stepper-separator-background:var(--p-content-border-color);--p-stepper-separator-active-background:var(--p-primary-color);--p-stepper-separator-margin:0 0 0 1.625rem;--p-stepper-separator-size:2px;--p-stepper-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "stepper-style",
-        "value": ".p-steplist{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0;padding:0;list-style-type:none;overflow-x:auto;}.p-step{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:var(--p-stepper-step-gap);padding:var(--p-stepper-step-padding);}.p-step:last-of-type{flex:initial;}.p-step-header{border:0 none;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;transition:background var(--p-stepper-transition-duration),color var(--p-stepper-transition-duration),border-color var(--p-stepper-transition-duration),outline-color var(--p-stepper-transition-duration),box-shadow var(--p-stepper-transition-duration);border-radius:var(--p-stepper-step-header-border-radius);outline-color:transparent;background:transparent;padding:var(--p-stepper-step-header-padding);gap:var(--p-stepper-step-header-gap);}.p-step-header:focus-visible{box-shadow:var(--p-stepper-step-header-focus-ring-shadow);outline:var(--p-stepper-step-header-focus-ring-width) var(--p-stepper-step-header-focus-ring-style) var(--p-stepper-step-header-focus-ring-color);outline-offset:var(--p-stepper-step-header-focus-ring-offset);}.p-stepper.p-stepper-readonly .p-step{cursor:auto;}.p-step-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--p-stepper-step-title-color);font-weight:var(--p-stepper-step-title-font-weight);transition:background var(--p-stepper-transition-duration),color var(--p-stepper-transition-duration),border-color var(--p-stepper-transition-duration),box-shadow var(--p-stepper-transition-duration),outline-color var(--p-stepper-transition-duration);}.p-step-number{display:flex;align-items:center;justify-content:center;color:var(--p-stepper-step-number-color);border:2px solid var(--p-stepper-step-number-border-color);background:var(--p-stepper-step-number-background);min-width:var(--p-stepper-step-number-size);height:var(--p-stepper-step-number-size);line-height:var(--p-stepper-step-number-size);font-size:var(--p-stepper-step-number-font-size);z-index:1;border-radius:var(--p-stepper-step-number-border-radius);position:relative;font-weight:var(--p-stepper-step-number-font-weight);}.p-step-number::after{content:' ';position:absolute;width:100%;height:100%;border-radius:var(--p-stepper-step-number-border-radius);box-shadow:var(--p-stepper-step-number-shadow);}.p-step-active .p-step-header{cursor:default;}.p-step-active .p-step-number{background:var(--p-stepper-step-number-active-background);border-color:var(--p-stepper-step-number-active-border-color);color:var(--p-stepper-step-number-active-color);}.p-step-active .p-step-title{color:var(--p-stepper-step-title-active-color);}.p-step:not(.p-disabled):focus-visible{outline:var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);outline-offset:var(--p-focus-ring-offset);}.p-step:has(~ .p-step-active) .p-stepper-separator{background:var(--p-stepper-separator-active-background);}.p-stepper-separator{flex:1 1 0;background:var(--p-stepper-separator-background);width:100%;height:var(--p-stepper-separator-size);transition:background var(--p-stepper-transition-duration),color var(--p-stepper-transition-duration),border-color var(--p-stepper-transition-duration),box-shadow var(--p-stepper-transition-duration),outline-color var(--p-stepper-transition-duration);}.p-steppanels{padding:var(--p-stepper-steppanels-padding);}.p-steppanel{background:var(--p-stepper-steppanel-background);color:var(--p-stepper-steppanel-color);}.p-stepper:has(.p-stepitem){display:flex;flex-direction:column;}.p-stepitem{display:flex;flex-direction:column;flex:initial;}.p-stepitem.p-stepitem-active{flex:1 1 auto;}.p-stepitem .p-step{flex:initial;}.p-stepitem .p-steppanel{display:grid;grid-template-rows:1fr;}.p-stepitem .p-steppanel-content-wrapper{display:flex;flex:1 1 auto;min-height:0;}.p-stepitem .p-steppanel-content{width:100%;padding:var(--p-stepper-steppanel-padding);margin-inline-start:1rem;}.p-stepitem .p-stepper-separator{flex:0 0 auto;width:var(--p-stepper-separator-size);height:auto;margin:var(--p-stepper-separator-margin);position:relative;left:calc(-1 * var(--p-stepper-separator-size));}.p-stepitem .p-stepper-separator:dir(rtl){left:calc(-9 * var(--p-stepper-separator-size));}.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator{background:var(--p-stepper-separator-active-background);}.p-stepitem:last-of-type .p-steppanel{padding-inline-start:var(--p-stepper-step-number-size);}"
-    },
-    {
-        "name": "tabview-variables",
-        "value": ":root,:host{--p-tabview-nav-button-background:var(--p-content-background);--p-tabview-nav-button-color:var(--p-text-muted-color);--p-tabview-nav-button-hover-color:var(--p-text-color);--p-tabview-tab-panel-background:var(--p-content-background);--p-tabview-tab-panel-color:var(--p-content-color);--p-tabview-tab-border-color:var(--p-content-border-color);--p-tabview-tab-active-border-color:var(--p-primary-color);--p-tabview-tab-color:var(--p-text-muted-color);--p-tabview-tab-hover-color:var(--p-text-color);--p-tabview-tab-active-color:var(--p-primary-color);--p-tabview-tab-list-background:var(--p-content-background);--p-tabview-tab-list-border-color:var(--p-content-border-color);--p-tabview-transition-duration:var(--p-transition-duration);--p-tabview-nav-button-shadow:0px 0px 10px 50px rgba(255,255,255,0.6);}.p-dark{--p-tabview-nav-button-shadow:0px 0px 10px 50px color-mix(in srgb,var(--p-content-background),transparent 50%);}"
-    },
-    {
-        "name": "tabview-style",
-        "value": ".p-tabview-tablist-container{position:relative;}.p-tabview-scrollable > .p-tabview-tablist-container{overflow:hidden;}.p-tabview-tablist-scroll-container{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto;}.p-tabview-tablist-scroll-container::-webkit-scrollbar{display:none;}.p-tabview-tablist{display:flex;margin:0;padding:0;list-style-type:none;flex:1 1 auto;background:var(--p-tabview-tab-list-background);border:1px solid var(--p-tabview-tab-list-border-color);border-width:0 0 1px 0;position:relative;}.p-tabview-tab-header{cursor:pointer;user-select:none;display:flex;align-items:center;text-decoration:none;position:relative;overflow:hidden;border-style:solid;border-width:0 0 1px 0;border-color:transparent transparent var(--p-tabview-tab-border-color) transparent;color:var(--p-tabview-tab-color);padding:1rem 1.125rem;font-weight:600;border-top-right-radius:var(--p-border-radius-md);border-top-left-radius:var(--p-border-radius-md);transition:color var(--p-tabview-transition-duration),outline-color var(--p-tabview-transition-duration);margin:0 0 -1px 0;outline-color:transparent;}.p-tabview-tablist-item:not(.p-disabled) .p-tabview-tab-header:focus-visible{outline:var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);outline-offset:-1px;}.p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header{color:var(--p-tabview-tab-hover-color);}.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header{color:var(--p-tabview-tab-active-color);}.p-tabview-tab-title{line-height:1;white-space:nowrap;}.p-tabview-next-button,.p-tabview-prev-button{position:absolute;top:0;margin:0;padding:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;background:var(--p-tabview-nav-button-background);color:var(--p-tabview-nav-button-color);width:2.5rem;border-radius:0;outline-color:transparent;transition:color var(--p-tabview-transition-duration),outline-color var(--p-tabview-transition-duration);box-shadow:var(--p-tabview-nav-button-shadow);border:none;cursor:pointer;user-select:none;}.p-tabview-next-button:focus-visible,.p-tabview-prev-button:focus-visible{outline:var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);outline-offset:var(--p-focus-ring-offset);}.p-tabview-next-button:hover,.p-tabview-prev-button:hover{color:var(--p-tabview-nav-button-hover-color);}.p-tabview-prev-button{left:0;}.p-tabview-next-button{right:0;}.p-tabview-panels{background:var(--p-tabview-tab-panel-background);color:var(--p-tabview-tab-panel-color);padding:0.875rem 1.125rem 1.125rem 1.125rem;}.p-tabview-ink-bar{z-index:1;display:block;position:absolute;bottom:-1px;height:1px;background:var(--p-tabview-tab-active-border-color);transition:250ms cubic-bezier(0.35,0,0.25,1);}"
-    },
-    {
-        "name": "tabs-variables",
-        "value": ":root,:host{--p-tabs-active-bar-height:1px;--p-tabs-active-bar-bottom:-1px;--p-tabs-active-bar-background:var(--p-primary-color);--p-tabs-nav-button-background:var(--p-content-background);--p-tabs-nav-button-color:var(--p-text-muted-color);--p-tabs-nav-button-hover-color:var(--p-text-color);--p-tabs-nav-button-width:2.5rem;--p-tabs-nav-button-focus-ring-width:var(--p-focus-ring-width);--p-tabs-nav-button-focus-ring-style:var(--p-focus-ring-style);--p-tabs-nav-button-focus-ring-color:var(--p-focus-ring-color);--p-tabs-nav-button-focus-ring-offset:-1px;--p-tabs-nav-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-tabs-tabpanel-background:var(--p-content-background);--p-tabs-tabpanel-color:var(--p-content-color);--p-tabs-tabpanel-padding:0.875rem 1.125rem 1.125rem 1.125rem;--p-tabs-tabpanel-focus-ring-width:var(--p-focus-ring-width);--p-tabs-tabpanel-focus-ring-style:var(--p-focus-ring-style);--p-tabs-tabpanel-focus-ring-color:var(--p-focus-ring-color);--p-tabs-tabpanel-focus-ring-offset:var(--p-focus-ring-offset);--p-tabs-tabpanel-focus-ring-shadow:inset var(--p-focus-ring-shadow);--p-tabs-tab-background:transparent;--p-tabs-tab-hover-background:transparent;--p-tabs-tab-active-background:transparent;--p-tabs-tab-border-width:0 0 1px 0;--p-tabs-tab-border-color:var(--p-content-border-color);--p-tabs-tab-hover-border-color:var(--p-content-border-color);--p-tabs-tab-active-border-color:var(--p-primary-color);--p-tabs-tab-color:var(--p-text-muted-color);--p-tabs-tab-hover-color:var(--p-text-color);--p-tabs-tab-active-color:var(--p-primary-color);--p-tabs-tab-padding:1rem 1.125rem;--p-tabs-tab-font-weight:600;--p-tabs-tab-margin:0 0 -1px 0;--p-tabs-tab-gap:0.5rem;--p-tabs-tab-focus-ring-width:var(--p-focus-ring-width);--p-tabs-tab-focus-ring-style:var(--p-focus-ring-style);--p-tabs-tab-focus-ring-color:var(--p-focus-ring-color);--p-tabs-tab-focus-ring-offset:-1px;--p-tabs-tab-focus-ring-shadow:var(--p-focus-ring-shadow);--p-tabs-tablist-border-width:0 0 1px 0;--p-tabs-tablist-background:var(--p-content-background);--p-tabs-tablist-border-color:var(--p-content-border-color);--p-tabs-transition-duration:var(--p-transition-duration);--p-tabs-nav-button-shadow:0px 0px 10px 50px rgba(255,255,255,0.6);}.p-dark{--p-tabs-nav-button-shadow:0px 0px 10px 50px color-mix(in srgb,var(--p-content-background),transparent 50%);}"
-    },
-    {
-        "name": "tabs-style",
-        "value": ".p-tabs{display:flex;flex-direction:column;}.p-tablist{display:flex;position:relative;overflow:hidden;background:var(--p-tabs-tablist-background);}.p-tablist-viewport{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto;}.p-tablist-viewport::-webkit-scrollbar{display:none;}.p-tablist-tab-list{position:relative;display:flex;border-style:solid;border-color:var(--p-tabs-tablist-border-color);border-width:var(--p-tabs-tablist-border-width);}.p-tablist-content{flex-grow:1;}.p-tablist-nav-button{all:unset;position:absolute!important;flex-shrink:0;inset-block-start:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;background:var(--p-tabs-nav-button-background);color:var(--p-tabs-nav-button-color);width:var(--p-tabs-nav-button-width);transition:color var(--p-tabs-transition-duration),outline-color var(--p-tabs-transition-duration),box-shadow var(--p-tabs-transition-duration);box-shadow:var(--p-tabs-nav-button-shadow);outline-color:transparent;cursor:pointer;}.p-tablist-nav-button:focus-visible{z-index:1;box-shadow:var(--p-tabs-nav-button-focus-ring-shadow);outline:var(--p-tabs-nav-button-focus-ring-width) var(--p-tabs-nav-button-focus-ring-style) var(--p-tabs-nav-button-focus-ring-color);outline-offset:var(--p-tabs-nav-button-focus-ring-offset);}.p-tablist-nav-button:hover{color:var(--p-tabs-nav-button-hover-color);}.p-tablist-prev-button{inset-inline-start:0;}.p-tablist-next-button{inset-inline-end:0;}.p-tablist-prev-button:dir(rtl),.p-tablist-next-button:dir(rtl){transform:rotate(180deg);}.p-tab{flex-shrink:0;cursor:pointer;user-select:none;position:relative;border-style:solid;white-space:nowrap;gap:var(--p-tabs-tab-gap);background:var(--p-tabs-tab-background);border-width:var(--p-tabs-tab-border-width);border-color:var(--p-tabs-tab-border-color);color:var(--p-tabs-tab-color);padding:var(--p-tabs-tab-padding);font-weight:var(--p-tabs-tab-font-weight);transition:background var(--p-tabs-transition-duration),border-color var(--p-tabs-transition-duration),color var(--p-tabs-transition-duration),outline-color var(--p-tabs-transition-duration),box-shadow var(--p-tabs-transition-duration);margin:var(--p-tabs-tab-margin);outline-color:transparent;}.p-tab:not(.p-disabled):focus-visible{z-index:1;box-shadow:var(--p-tabs-tab-focus-ring-shadow);outline:var(--p-tabs-tab-focus-ring-width) var(--p-tabs-tab-focus-ring-style) var(--p-tabs-tab-focus-ring-color);outline-offset:var(--p-tabs-tab-focus-ring-offset);}.p-tab:not(.p-tab-active):not(.p-disabled):hover{background:var(--p-tabs-tab-hover-background);border-color:var(--p-tabs-tab-hover-border-color);color:var(--p-tabs-tab-hover-color);}.p-tab-active{background:var(--p-tabs-tab-active-background);border-color:var(--p-tabs-tab-active-border-color);color:var(--p-tabs-tab-active-color);}.p-tabpanels{background:var(--p-tabs-tabpanel-background);color:var(--p-tabs-tabpanel-color);padding:var(--p-tabs-tabpanel-padding);outline:0 none;}.p-tabpanel:focus-visible{box-shadow:var(--p-tabs-tabpanel-focus-ring-shadow);outline:var(--p-tabs-tabpanel-focus-ring-width) var(--p-tabs-tabpanel-focus-ring-style) var(--p-tabs-tabpanel-focus-ring-color);outline-offset:var(--p-tabs-tabpanel-focus-ring-offset);}.p-tablist-active-bar{z-index:1;display:block;position:absolute;inset-block-end:var(--p-tabs-active-bar-bottom);height:var(--p-tabs-active-bar-height);background:var(--p-tabs-active-bar-background);transition:250ms cubic-bezier(0.35,0,0.25,1);}"
-    },
-    {
-        "name": "toolbar-variables",
-        "value": ":root,:host{--p-toolbar-background:var(--p-content-background);--p-toolbar-border-color:var(--p-content-border-color);--p-toolbar-border-radius:var(--p-content-border-radius);--p-toolbar-color:var(--p-content-color);--p-toolbar-gap:0.5rem;--p-toolbar-padding:0.75rem;}"
-    },
-    {
-        "name": "toolbar-style",
-        "value": ".p-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--p-toolbar-padding);background:var(--p-toolbar-background);border:1px solid var(--p-toolbar-border-color);color:var(--p-toolbar-color);border-radius:var(--p-toolbar-border-radius);gap:var(--p-toolbar-gap);}.p-toolbar-start,.p-toolbar-center,.p-toolbar-end{display:flex;align-items:center;}"
-    },
-    {
-        "name": "confirmdialog-variables",
-        "value": ":root,:host{--p-confirmdialog-content-gap:1rem;--p-confirmdialog-icon-size:2rem;--p-confirmdialog-icon-color:var(--p-overlay-modal-color);}"
-    },
-    {
-        "name": "confirmdialog-style",
-        "value": ".p-confirmdialog .p-dialog-content{display:flex;align-items:center;gap:var(--p-confirmdialog-content-gap);}.p-confirmdialog-icon{color:var(--p-confirmdialog-icon-color);font-size:var(--p-confirmdialog-icon-size);width:var(--p-confirmdialog-icon-size);height:var(--p-confirmdialog-icon-size);}"
-    },
-    {
-        "name": "confirmpopup-variables",
-        "value": ":root,:host{--p-confirmpopup-footer-gap:0.5rem;--p-confirmpopup-footer-padding:0 var(--p-overlay-popover-padding) var(--p-overlay-popover-padding) var(--p-overlay-popover-padding);--p-confirmpopup-icon-size:1.5rem;--p-confirmpopup-icon-color:var(--p-overlay-popover-color);--p-confirmpopup-content-padding:var(--p-overlay-popover-padding);--p-confirmpopup-content-gap:1rem;--p-confirmpopup-background:var(--p-overlay-popover-background);--p-confirmpopup-border-color:var(--p-overlay-popover-border-color);--p-confirmpopup-color:var(--p-overlay-popover-color);--p-confirmpopup-border-radius:var(--p-overlay-popover-border-radius);--p-confirmpopup-shadow:var(--p-overlay-popover-shadow);--p-confirmpopup-gutter:10px;--p-confirmpopup-arrow-offset:1.25rem;}"
-    },
-    {
-        "name": "confirmpopup-style",
-        "value": ".p-confirmpopup{position:absolute;margin-top:var(--p-confirmpopup-gutter);top:0;left:0;background:var(--p-confirmpopup-background);color:var(--p-confirmpopup-color);border:1px solid var(--p-confirmpopup-border-color);border-radius:var(--p-confirmpopup-border-radius);box-shadow:var(--p-confirmpopup-shadow);will-change:transform;}.p-confirmpopup-content{display:flex;align-items:center;padding:var(--p-confirmpopup-content-padding);gap:var(--p-confirmpopup-content-gap);}.p-confirmpopup-icon{font-size:var(--p-confirmpopup-icon-size);width:var(--p-confirmpopup-icon-size);height:var(--p-confirmpopup-icon-size);color:var(--p-confirmpopup-icon-color);}.p-confirmpopup-footer{display:flex;justify-content:flex-end;gap:var(--p-confirmpopup-footer-gap);padding:var(--p-confirmpopup-footer-padding);}.p-confirmpopup-footer button{width:auto;}.p-confirmpopup-footer button:last-child{margin:0;}.p-confirmpopup-flipped{margin-block-start:calc(var(--p-confirmpopup-gutter) * -1);margin-block-end:var(--p-confirmpopup-gutter);}.p-confirmpopup:after,.p-confirmpopup:before{bottom:100%;left:calc(var(--p-confirmpopup-arrow-offset) + var(--p-confirmpopup-arrow-left));content:' ';height:0;width:0;position:absolute;pointer-events:none;}.p-confirmpopup:after{border-width:calc(var(--p-confirmpopup-gutter) - 2px);margin-left:calc(-1 * (var(--p-confirmpopup-gutter) - 2px));border-style:solid;border-color:transparent;border-bottom-color:var(--p-confirmpopup-background);}.p-confirmpopup:before{border-width:var(--p-confirmpopup-gutter);margin-left:calc(-1 * var(--p-confirmpopup-gutter));border-style:solid;border-color:transparent;border-bottom-color:var(--p-confirmpopup-border-color);}.p-confirmpopup-flipped:after,.p-confirmpopup-flipped:before{bottom:auto;top:100%;}.p-confirmpopup-flipped:after{border-bottom-color:transparent;border-top-color:var(--p-confirmpopup-background);}.p-confirmpopup-flipped:before{border-bottom-color:transparent;border-top-color:var(--p-confirmpopup-border-color);}"
-    },
-    {
-        "name": "dialog-variables",
-        "value": ":root,:host{--p-dialog-footer-padding:0 var(--p-overlay-modal-padding) var(--p-overlay-modal-padding) var(--p-overlay-modal-padding);--p-dialog-footer-gap:0.5rem;--p-dialog-content-padding:0 var(--p-overlay-modal-padding) var(--p-overlay-modal-padding) var(--p-overlay-modal-padding);--p-dialog-title-font-size:1.25rem;--p-dialog-title-font-weight:600;--p-dialog-header-padding:var(--p-overlay-modal-padding);--p-dialog-header-gap:0.5rem;--p-dialog-background:var(--p-overlay-modal-background);--p-dialog-border-color:var(--p-overlay-modal-border-color);--p-dialog-color:var(--p-overlay-modal-color);--p-dialog-border-radius:var(--p-overlay-modal-border-radius);--p-dialog-shadow:var(--p-overlay-modal-shadow);}"
-    },
-    {
-        "name": "dialog-style",
-        "value": ".p-dialog{max-height:90%;transform:scale(1);border-radius:var(--p-dialog-border-radius);box-shadow:var(--p-dialog-shadow);background:var(--p-dialog-background);border:1px solid var(--p-dialog-border-color);color:var(--p-dialog-color);will-change:transform;}.p-dialog-content{overflow-y:auto;padding:var(--p-dialog-content-padding);}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:var(--p-dialog-header-padding);}.p-dialog-title{font-weight:var(--p-dialog-title-font-weight);font-size:var(--p-dialog-title-font-size);}.p-dialog-footer{flex-shrink:0;padding:var(--p-dialog-footer-padding);display:flex;justify-content:flex-end;gap:var(--p-dialog-footer-gap);}.p-dialog-header-actions{display:flex;align-items:center;gap:var(--p-dialog-header-gap);}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-topleft .p-dialog,.p-dialog-topright .p-dialog,.p-dialog-bottomleft .p-dialog,.p-dialog-bottomright .p-dialog{margin:1rem;}.p-dialog-maximized{width:100vw!important;height:100vh!important;top:0px!important;left:0px!important;max-height:100%;height:100%;border-radius:0;}.p-dialog-maximized .p-dialog-content{flex-grow:1;}.p-dialog .p-resizable-handle{position:absolute;font-size:0.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px;}.p-dialog-enter-active{animation:p-animate-dialog-enter 300ms cubic-bezier(.19,1,.22,1);}.p-dialog-leave-active{animation:p-animate-dialog-leave 300ms cubic-bezier(.19,1,.22,1);}@keyframes p-animate-dialog-enter{from{opacity:0;transform:scale(0.93);}} @keyframes p-animate-dialog-leave{to{opacity:0;transform:scale(0.93);}}"
-    },
-    {
-        "name": "drawer-variables",
-        "value": ":root,:host{--p-drawer-footer-padding:var(--p-overlay-modal-padding);--p-drawer-content-padding:0 var(--p-overlay-modal-padding) var(--p-overlay-modal-padding) var(--p-overlay-modal-padding);--p-drawer-title-font-size:1.5rem;--p-drawer-title-font-weight:600;--p-drawer-header-padding:var(--p-overlay-modal-padding);--p-drawer-background:var(--p-overlay-modal-background);--p-drawer-border-color:var(--p-overlay-modal-border-color);--p-drawer-color:var(--p-overlay-modal-color);--p-drawer-shadow:var(--p-overlay-modal-shadow);}"
-    },
-    {
-        "name": "drawer-style",
-        "value": ".p-drawer{display:flex;flex-direction:column;transform:translate3d(0px,0px,0px);position:relative;transition:transform 0.3s;background:var(--p-drawer-background);color:var(--p-drawer-color);border-style:solid;border-color:var(--p-drawer-border-color);box-shadow:var(--p-drawer-shadow);}.p-drawer-content{overflow-y:auto;flex-grow:1;padding:var(--p-drawer-content-padding);}.p-drawer-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:var(--p-drawer-header-padding);}.p-drawer-footer{padding:var(--p-drawer-footer-padding);}.p-drawer-title{font-weight:var(--p-drawer-title-font-weight);font-size:var(--p-drawer-title-font-size);}.p-drawer-full .p-drawer{transition:none;transform:none;width:100vw!important;height:100vh!important;max-height:100%;top:0px!important;left:0px!important;border-width:1px;}.p-drawer-left .p-drawer-enter-active{animation:p-animate-drawer-enter-left 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-left .p-drawer-leave-active{animation:p-animate-drawer-leave-left 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-right .p-drawer-enter-active{animation:p-animate-drawer-enter-right 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-right .p-drawer-leave-active{animation:p-animate-drawer-leave-right 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-top .p-drawer-enter-active{animation:p-animate-drawer-enter-top 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-top .p-drawer-leave-active{animation:p-animate-drawer-leave-top 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-bottom .p-drawer-enter-active{animation:p-animate-drawer-enter-bottom 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-bottom .p-drawer-leave-active{animation:p-animate-drawer-leave-bottom 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-full .p-drawer-enter-active{animation:p-animate-drawer-enter-full 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-full .p-drawer-leave-active{animation:p-animate-drawer-leave-full 0.5s cubic-bezier(0.32,0.72,0,1);}.p-drawer-left .p-drawer{width:20rem;height:100%;border-inline-end-width:1px;}.p-drawer-right .p-drawer{width:20rem;height:100%;border-inline-start-width:1px;}.p-drawer-top .p-drawer{height:10rem;width:100%;border-block-end-width:1px;}.p-drawer-bottom .p-drawer{height:10rem;width:100%;border-block-start-width:1px;}.p-drawer-left .p-drawer-content,.p-drawer-right .p-drawer-content,.p-drawer-top .p-drawer-content,.p-drawer-bottom .p-drawer-content{width:100%;height:100%;}.p-drawer-open{display:flex;}.p-drawer-mask:dir(rtl){flex-direction:row-reverse;}@keyframes p-animate-drawer-enter-left{from{transform:translate3d(-100%,0px,0px);}} @keyframes p-animate-drawer-leave-left{to{transform:translate3d(-100%,0px,0px);}} @keyframes p-animate-drawer-enter-right{from{transform:translate3d(100%,0px,0px);}} @keyframes p-animate-drawer-leave-right{to{transform:translate3d(100%,0px,0px);}} @keyframes p-animate-drawer-enter-top{from{transform:translate3d(0px,-100%,0px);}} @keyframes p-animate-drawer-leave-top{to{transform:translate3d(0px,-100%,0px);}} @keyframes p-animate-drawer-enter-bottom{from{transform:translate3d(0px,100%,0px);}} @keyframes p-animate-drawer-leave-bottom{to{transform:translate3d(0px,100%,0px);}} @keyframes p-animate-drawer-enter-full{from{opacity:0;transform:scale(0.93);}} @keyframes p-animate-drawer-leave-full{to{opacity:0;transform:scale(0.93);}}"
-    },
-    {
-        "name": "popover-variables",
-        "value": ":root,:host{--p-popover-content-padding:var(--p-overlay-popover-padding);--p-popover-background:var(--p-overlay-popover-background);--p-popover-border-color:var(--p-overlay-popover-border-color);--p-popover-color:var(--p-overlay-popover-color);--p-popover-border-radius:var(--p-overlay-popover-border-radius);--p-popover-shadow:var(--p-overlay-popover-shadow);--p-popover-gutter:10px;--p-popover-arrow-offset:1.25rem;}"
-    },
-    {
-        "name": "popover-style",
-        "value": ".p-popover{margin-block-start:var(--p-popover-gutter);background:var(--p-popover-background);color:var(--p-popover-color);border:1px solid var(--p-popover-border-color);border-radius:var(--p-popover-border-radius);box-shadow:var(--p-popover-shadow);will-change:transform;}.p-popover-content{padding:var(--p-popover-content-padding);}.p-popover-flipped{margin-block-start:calc(var(--p-popover-gutter) * -1);margin-block-end:var(--p-popover-gutter);}.p-popover:after,.p-popover:before{bottom:100%;left:calc(var(--p-popover-arrow-offset) + var(--p-popover-arrow-left));content:' ';height:0;width:0;position:absolute;pointer-events:none;}.p-popover:after{border-width:calc(var(--p-popover-gutter) - 2px);margin-left:calc(-1 * (var(--p-popover-gutter) - 2px));border-style:solid;border-color:transparent;border-bottom-color:var(--p-popover-background);}.p-popover:before{border-width:var(--p-popover-gutter);margin-left:calc(-1 * var(--p-popover-gutter));border-style:solid;border-color:transparent;border-bottom-color:var(--p-popover-border-color);}.p-popover-flipped:after,.p-popover-flipped:before{bottom:auto;top:100%;}.p-popover.p-popover-flipped:after{border-bottom-color:transparent;border-top-color:var(--p-popover-background);}.p-popover.p-popover-flipped:before{border-bottom-color:transparent;border-top-color:var(--p-popover-border-color);}"
-    },
-    {
-        "name": "fileupload-variables",
-        "value": ":root,:host{--p-fileupload-basic-gap:0.5rem;--p-fileupload-progressbar-height:0.25rem;--p-fileupload-file-list-gap:0.5rem;--p-fileupload-file-padding:1rem;--p-fileupload-file-gap:1rem;--p-fileupload-file-border-color:var(--p-content-border-color);--p-fileupload-file-info-gap:0.5rem;--p-fileupload-content-highlight-border-color:var(--p-primary-color);--p-fileupload-content-padding:0 1.125rem 1.125rem 1.125rem;--p-fileupload-content-gap:1rem;--p-fileupload-header-background:transparent;--p-fileupload-header-color:var(--p-text-color);--p-fileupload-header-padding:1.125rem;--p-fileupload-header-border-color:unset;--p-fileupload-header-border-width:0;--p-fileupload-header-border-radius:0;--p-fileupload-header-gap:0.5rem;--p-fileupload-background:var(--p-content-background);--p-fileupload-border-color:var(--p-content-border-color);--p-fileupload-color:var(--p-content-color);--p-fileupload-border-radius:var(--p-content-border-radius);--p-fileupload-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "fileupload-style",
-        "value": ".p-fileupload input[type='file']{display:none;}.p-fileupload-advanced{border:1px solid var(--p-fileupload-border-color);border-radius:var(--p-fileupload-border-radius);background:var(--p-fileupload-background);color:var(--p-fileupload-color);}.p-fileupload-header{display:flex;align-items:center;padding:var(--p-fileupload-header-padding);background:var(--p-fileupload-header-background);color:var(--p-fileupload-header-color);border-style:solid;border-width:var(--p-fileupload-header-border-width);border-color:var(--p-fileupload-header-border-color);border-radius:var(--p-fileupload-header-border-radius);gap:var(--p-fileupload-header-gap);}.p-fileupload-content{border:1px solid transparent;display:flex;flex-direction:column;gap:var(--p-fileupload-content-gap);transition:border-color var(--p-fileupload-transition-duration);padding:var(--p-fileupload-content-padding);}.p-fileupload-content .p-progressbar{width:100%;height:var(--p-fileupload-progressbar-height);}.p-fileupload-file-list{display:flex;flex-direction:column;gap:var(--p-fileupload-filelist-gap);}.p-fileupload-file{display:flex;flex-wrap:wrap;align-items:center;padding:var(--p-fileupload-file-padding);border-block-end:1px solid var(--p-fileupload-file-border-color);gap:var(--p-fileupload-file-gap);}.p-fileupload-file:last-child{border-block-end:0;}.p-fileupload-file-info{display:flex;flex-direction:column;gap:var(--p-fileupload-file-info-gap);}.p-fileupload-file-thumbnail{flex-shrink:0;}.p-fileupload-file-actions{margin-inline-start:auto;}.p-fileupload-highlight{border:1px dashed var(--p-fileupload-content-highlight-border-color);}.p-fileupload-basic .p-message{margin-block-end:var(--p-fileupload-basic-gap);}.p-fileupload-basic-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-fileupload-basic-gap);}"
-    },
-    {
-        "name": "breadcrumb-variables",
-        "value": ":root,:host{--p-breadcrumb-separator-color:var(--p-navigation-item-icon-color);--p-breadcrumb-item-color:var(--p-text-muted-color);--p-breadcrumb-item-hover-color:var(--p-text-color);--p-breadcrumb-item-border-radius:var(--p-content-border-radius);--p-breadcrumb-item-gap:var(--p-navigation-item-gap);--p-breadcrumb-item-focus-ring-width:var(--p-focus-ring-width);--p-breadcrumb-item-focus-ring-style:var(--p-focus-ring-style);--p-breadcrumb-item-focus-ring-color:var(--p-focus-ring-color);--p-breadcrumb-item-focus-ring-offset:var(--p-focus-ring-offset);--p-breadcrumb-item-focus-ring-shadow:var(--p-focus-ring-shadow);--p-breadcrumb-item-icon-color:var(--p-navigation-item-icon-color);--p-breadcrumb-item-icon-hover-color:var(--p-navigation-item-icon-focus-color);--p-breadcrumb-padding:1rem;--p-breadcrumb-background:var(--p-content-background);--p-breadcrumb-gap:0.5rem;--p-breadcrumb-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "breadcrumb-style",
-        "value": ".p-breadcrumb{background:var(--p-breadcrumb-background);padding:var(--p-breadcrumb-padding);overflow-x:auto;}.p-breadcrumb-list{margin:0;padding:0;list-style-type:none;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--p-breadcrumb-gap);}.p-breadcrumb-separator{display:flex;align-items:center;color:var(--p-breadcrumb-separator-color);}.p-breadcrumb-separator-icon:dir(rtl){transform:rotate(180deg);}.p-breadcrumb::-webkit-scrollbar{display:none;}.p-breadcrumb-item-link{text-decoration:none;display:flex;align-items:center;gap:var(--p-breadcrumb-item-gap);transition:background var(--p-breadcrumb-transition-duration),color var(--p-breadcrumb-transition-duration),outline-color var(--p-breadcrumb-transition-duration),box-shadow var(--p-breadcrumb-transition-duration);border-radius:var(--p-breadcrumb-item-border-radius);outline-color:transparent;color:var(--p-breadcrumb-item-color);}.p-breadcrumb-item-link:focus-visible{box-shadow:var(--p-breadcrumb-item-focus-ring-shadow);outline:var(--p-breadcrumb-item-focus-ring-width) var(--p-breadcrumb-item-focus-ring-style) var(--p-breadcrumb-item-focus-ring-color);outline-offset:var(--p-breadcrumb-item-focus-ring-offset);}.p-breadcrumb-item-link:hover .p-breadcrumb-item-label{color:var(--p-breadcrumb-item-hover-color);}.p-breadcrumb-item-label{transition:inherit;}.p-breadcrumb-item-icon{color:var(--p-breadcrumb-item-icon-color);transition:inherit;}.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon{color:var(--p-breadcrumb-item-icon-hover-color);}"
-    },
-    {
-        "name": "contextmenu-variables",
-        "value": ":root,:host{--p-contextmenu-separator-border-color:var(--p-content-border-color);--p-contextmenu-submenu-icon-size:var(--p-navigation-submenu-icon-size);--p-contextmenu-submenu-icon-color:var(--p-navigation-submenu-icon-color);--p-contextmenu-submenu-icon-focus-color:var(--p-navigation-submenu-icon-focus-color);--p-contextmenu-submenu-icon-active-color:var(--p-navigation-submenu-icon-active-color);--p-contextmenu-submenu-mobile-indent:1rem;--p-contextmenu-item-focus-background:var(--p-navigation-item-focus-background);--p-contextmenu-item-active-background:var(--p-navigation-item-active-background);--p-contextmenu-item-color:var(--p-navigation-item-color);--p-contextmenu-item-focus-color:var(--p-navigation-item-focus-color);--p-contextmenu-item-active-color:var(--p-navigation-item-active-color);--p-contextmenu-item-padding:var(--p-navigation-item-padding);--p-contextmenu-item-border-radius:var(--p-navigation-item-border-radius);--p-contextmenu-item-gap:var(--p-navigation-item-gap);--p-contextmenu-item-icon-color:var(--p-navigation-item-icon-color);--p-contextmenu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-contextmenu-item-icon-active-color:var(--p-navigation-item-icon-active-color);--p-contextmenu-list-padding:var(--p-navigation-list-padding);--p-contextmenu-list-gap:var(--p-navigation-list-gap);--p-contextmenu-background:var(--p-content-background);--p-contextmenu-border-color:var(--p-content-border-color);--p-contextmenu-color:var(--p-content-color);--p-contextmenu-border-radius:var(--p-content-border-radius);--p-contextmenu-shadow:var(--p-overlay-navigation-shadow);--p-contextmenu-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "contextmenu-style",
-        "value": ".p-contextmenu{background:var(--p-contextmenu-background);color:var(--p-contextmenu-color);border:1px solid var(--p-contextmenu-border-color);border-radius:var(--p-contextmenu-border-radius);box-shadow:var(--p-contextmenu-shadow);min-width:12.5rem;}.p-contextmenu-root-list,.p-contextmenu-submenu{margin:0;padding:var(--p-contextmenu-list-padding);list-style:none;outline:0 none;display:flex;flex-direction:column;gap:var(--p-contextmenu-list-gap);}.p-contextmenu-submenu{position:absolute;display:flex;flex-direction:column;min-width:100%;z-index:1;background:var(--p-contextmenu-background);color:var(--p-contextmenu-color);border:1px solid var(--p-contextmenu-border-color);border-radius:var(--p-contextmenu-border-radius);box-shadow:var(--p-contextmenu-shadow);}.p-contextmenu-item{position:relative;}.p-contextmenu-item-content{transition:background var(--p-contextmenu-transition-duration),color var(--p-contextmenu-transition-duration);border-radius:var(--p-contextmenu-item-border-radius);color:var(--p-contextmenu-item-color);}.p-contextmenu-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-contextmenu-item-padding);gap:var(--p-contextmenu-item-gap);user-select:none;}.p-contextmenu-item-label{line-height:1;}.p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-color);}.p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-color);margin-left:auto;font-size:var(--p-contextmenu-submenu-icon-size);width:var(--p-contextmenu-submenu-icon-size);height:var(--p-contextmenu-submenu-icon-size);}.p-contextmenu-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;}.p-contextmenu-item.p-focus > .p-contextmenu-item-content{color:var(--p-contextmenu-item-focus-color);background:var(--p-contextmenu-item-focus-background);}.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-focus-color);}.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-focus-color);}.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover{color:var(--p-contextmenu-item-focus-color);background:var(--p-contextmenu-item-focus-background);}.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-focus-color);}.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-focus-color);}.p-contextmenu-item-active > .p-contextmenu-item-content{color:var(--p-contextmenu-item-active-color);background:var(--p-contextmenu-item-active-background);}.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon{color:var(--p-contextmenu-item-icon-active-color);}.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon{color:var(--p-contextmenu-submenu-icon-active-color);}.p-contextmenu-separator{border-block-start:1px solid var(--p-contextmenu-separator-border-color);}.p-contextmenu-mobile .p-contextmenu-submenu{position:static;box-shadow:none;border:0 none;padding-inline-start:var(--p-tieredmenu-submenu-mobile-indent);padding-inline-end:0;}.p-contextmenu-mobile .p-contextmenu-submenu-icon{transition:transform 0.2s;transform:rotate(90deg);}.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon{transform:rotate(-90deg);}"
-    },
-    {
-        "name": "dock-variables",
-        "value": ":root,:host{--p-dock-item-border-radius:var(--p-content-border-radius);--p-dock-item-padding:0.5rem;--p-dock-item-size:3rem;--p-dock-item-focus-ring-width:var(--p-focus-ring-width);--p-dock-item-focus-ring-style:var(--p-focus-ring-style);--p-dock-item-focus-ring-color:var(--p-focus-ring-color);--p-dock-item-focus-ring-offset:var(--p-focus-ring-offset);--p-dock-item-focus-ring-shadow:var(--p-focus-ring-shadow);--p-dock-background:rgba(255,255,255,0.1);--p-dock-border-color:rgba(255,255,255,0.2);--p-dock-padding:0.5rem;--p-dock-border-radius:var(--p-border-radius-xl);}"
-    },
-    {
-        "name": "dock-style",
-        "value": ".p-dock{position:absolute;z-index:1;display:flex;justify-content:center;align-items:center;pointer-events:none;}.p-dock-list-container{display:flex;pointer-events:auto;background:var(--p-dock-background);border:1px solid var(--p-dock-border-color);padding:var(--p-dock-padding);border-radius:var(--p-dock-border-radius);}.p-dock-list{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;outline:0 none;}.p-dock-item{transition:all 0.2s cubic-bezier(0.4,0,0.2,1);will-change:transform;padding:var(--p-dock-item-padding);border-radius:var(--p-dock-item-border-radius);}.p-dock-item.p-focus{box-shadow:var(--p-dock-item-focus-ring-shadow);outline:var(--p-dock-item-focus-ring-width) var(--p-dock-item-focus-ring-style) var(--p-dock-item-focus-ring-color);outline-offset:var(--p-dock-item-focus-ring-offset);}.p-dock-item-link{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:default;width:var(--p-dock-item-size);height:var(--p-dock-item-size);}.p-dock-top{left:0;top:0;width:100%;}.p-dock-bottom{left:0;bottom:0;width:100%;}.p-dock-right{right:0;top:0;height:100%;}.p-dock-right .p-dock-list{flex-direction:column;}.p-dock-left{left:0;top:0;height:100%;}.p-dock-left .p-dock-list{flex-direction:column;}.p-dock-mobile.p-dock-top .p-dock-list-container,.p-dock-mobile.p-dock-bottom .p-dock-list-container{overflow-x:auto;width:100%;}.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list{margin:0 auto;}.p-dock-mobile.p-dock-left .p-dock-list-container,.p-dock-mobile.p-dock-right .p-dock-list-container{overflow-y:auto;height:100%;}.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list{margin:auto 0;}.p-dock-mobile .p-dock-list .p-dock-item{transform:none;margin:0;}"
-    },
-    {
-        "name": "menu-variables",
-        "value": ":root,:host{--p-menu-separator-border-color:var(--p-content-border-color);--p-menu-submenu-label-padding:var(--p-navigation-submenu-label-padding);--p-menu-submenu-label-font-weight:var(--p-navigation-submenu-label-font-weight);--p-menu-submenu-label-background:var(--p-navigation-submenu-label-background);--p-menu-submenu-label-color:var(--p-navigation-submenu-label-color);--p-menu-item-focus-background:var(--p-navigation-item-focus-background);--p-menu-item-color:var(--p-navigation-item-color);--p-menu-item-focus-color:var(--p-navigation-item-focus-color);--p-menu-item-padding:var(--p-navigation-item-padding);--p-menu-item-border-radius:var(--p-navigation-item-border-radius);--p-menu-item-gap:var(--p-navigation-item-gap);--p-menu-item-icon-color:var(--p-navigation-item-icon-color);--p-menu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-menu-list-padding:var(--p-navigation-list-padding);--p-menu-list-gap:var(--p-navigation-list-gap);--p-menu-background:var(--p-content-background);--p-menu-border-color:var(--p-content-border-color);--p-menu-color:var(--p-content-color);--p-menu-border-radius:var(--p-content-border-radius);--p-menu-shadow:var(--p-overlay-navigation-shadow);--p-menu-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "menu-style",
-        "value": ".p-menu{background:var(--p-menu-background);color:var(--p-menu-color);border:1px solid var(--p-menu-border-color);border-radius:var(--p-menu-border-radius);min-width:12.5rem;}.p-menu-list{margin:0;padding:var(--p-menu-list-padding);outline:0 none;list-style:none;display:flex;flex-direction:column;gap:var(--p-menu-list-gap);}.p-menu-item-content{transition:background var(--p-menu-transition-duration),color var(--p-menu-transition-duration);border-radius:var(--p-menu-item-border-radius);color:var(--p-menu-item-color);overflow:hidden;}.p-menu-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-menu-item-padding);gap:var(--p-menu-item-gap);user-select:none;outline:0 none;}.p-menu-item-label{line-height:1;}.p-menu-item-icon{color:var(--p-menu-item-icon-color);}.p-menu-item.p-focus .p-menu-item-content{color:var(--p-menu-item-focus-color);background:var(--p-menu-item-focus-background);}.p-menu-item.p-focus .p-menu-item-icon{color:var(--p-menu-item-icon-focus-color);}.p-menu-item:not(.p-disabled) .p-menu-item-content:hover{color:var(--p-menu-item-focus-color);background:var(--p-menu-item-focus-background);}.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon{color:var(--p-menu-item-icon-focus-color);}.p-menu-overlay{box-shadow:var(--p-menu-shadow);}.p-menu-submenu-label{background:var(--p-menu-submenu-label-background);padding:var(--p-menu-submenu-label-padding);color:var(--p-menu-submenu-label-color);font-weight:var(--p-menu-submenu-label-font-weight);}.p-menu-separator{border-block-start:1px solid var(--p-menu-separator-border-color);}"
-    },
-    {
-        "name": "menubar-variables",
-        "value": ":root,:host{--p-menubar-mobile-button-border-radius:50%;--p-menubar-mobile-button-size:1.75rem;--p-menubar-mobile-button-color:var(--p-text-muted-color);--p-menubar-mobile-button-hover-color:var(--p-text-hover-muted-color);--p-menubar-mobile-button-hover-background:var(--p-content-hover-background);--p-menubar-mobile-button-focus-ring-width:var(--p-focus-ring-width);--p-menubar-mobile-button-focus-ring-style:var(--p-focus-ring-style);--p-menubar-mobile-button-focus-ring-color:var(--p-focus-ring-color);--p-menubar-mobile-button-focus-ring-offset:var(--p-focus-ring-offset);--p-menubar-mobile-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-menubar-separator-border-color:var(--p-content-border-color);--p-menubar-submenu-padding:var(--p-navigation-list-padding);--p-menubar-submenu-gap:var(--p-navigation-list-gap);--p-menubar-submenu-background:var(--p-content-background);--p-menubar-submenu-border-color:var(--p-content-border-color);--p-menubar-submenu-border-radius:var(--p-content-border-radius);--p-menubar-submenu-shadow:var(--p-overlay-navigation-shadow);--p-menubar-submenu-mobile-indent:1rem;--p-menubar-submenu-icon-size:var(--p-navigation-submenu-icon-size);--p-menubar-submenu-icon-color:var(--p-navigation-submenu-icon-color);--p-menubar-submenu-icon-focus-color:var(--p-navigation-submenu-icon-focus-color);--p-menubar-submenu-icon-active-color:var(--p-navigation-submenu-icon-active-color);--p-menubar-item-focus-background:var(--p-navigation-item-focus-background);--p-menubar-item-active-background:var(--p-navigation-item-active-background);--p-menubar-item-color:var(--p-navigation-item-color);--p-menubar-item-focus-color:var(--p-navigation-item-focus-color);--p-menubar-item-active-color:var(--p-navigation-item-active-color);--p-menubar-item-padding:var(--p-navigation-item-padding);--p-menubar-item-border-radius:var(--p-navigation-item-border-radius);--p-menubar-item-gap:var(--p-navigation-item-gap);--p-menubar-item-icon-color:var(--p-navigation-item-icon-color);--p-menubar-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-menubar-item-icon-active-color:var(--p-navigation-item-icon-active-color);--p-menubar-base-item-border-radius:var(--p-content-border-radius);--p-menubar-base-item-padding:var(--p-navigation-item-padding);--p-menubar-background:var(--p-content-background);--p-menubar-border-color:var(--p-content-border-color);--p-menubar-border-radius:var(--p-content-border-radius);--p-menubar-color:var(--p-content-color);--p-menubar-gap:0.5rem;--p-menubar-padding:0.5rem 0.75rem;--p-menubar-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "menubar-style",
-        "value": ".p-menubar{display:flex;align-items:center;background:var(--p-menubar-background);border:1px solid var(--p-menubar-border-color);border-radius:var(--p-menubar-border-radius);color:var(--p-menubar-color);padding:var(--p-menubar-padding);gap:var(--p-menubar-gap);}.p-menubar-start,.p-megamenu-end{display:flex;align-items:center;}.p-menubar-root-list,.p-menubar-submenu{display:flex;margin:0;padding:0;list-style:none;outline:0 none;}.p-menubar-root-list{align-items:center;flex-wrap:wrap;gap:var(--p-menubar-gap);}.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content{border-radius:var(--p-menubar-base-item-border-radius);}.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link{padding:var(--p-menubar-base-item-padding);}.p-menubar-item-content{transition:background var(--p-menubar-transition-duration),color var(--p-menubar-transition-duration);border-radius:var(--p-menubar-item-border-radius);color:var(--p-menubar-item-color);}.p-menubar-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-menubar-item-padding);gap:var(--p-menubar-item-gap);user-select:none;outline:0 none;}.p-menubar-item-label{line-height:1;}.p-menubar-item-icon{color:var(--p-menubar-item-icon-color);}.p-menubar-submenu-icon{color:var(--p-menubar-submenu-icon-color);margin-left:auto;font-size:var(--p-menubar-submenu-icon-size);width:var(--p-menubar-submenu-icon-size);height:var(--p-menubar-submenu-icon-size);}.p-menubar-submenu .p-menubar-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;}.p-menubar-item.p-focus > .p-menubar-item-content{color:var(--p-menubar-item-focus-color);background:var(--p-menubar-item-focus-background);}.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon{color:var(--p-menubar-item-icon-focus-color);}.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon{color:var(--p-menubar-submenu-icon-focus-color);}.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover{color:var(--p-menubar-item-focus-color);background:var(--p-menubar-item-focus-background);}.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon{color:var(--p-menubar-item-icon-focus-color);}.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon{color:var(--p-menubar-submenu-icon-focus-color);}.p-menubar-item-active > .p-menubar-item-content{color:var(--p-menubar-item-active-color);background:var(--p-menubar-item-active-background);}.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon{color:var(--p-menubar-item-icon-active-color);}.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon{color:var(--p-menubar-submenu-icon-active-color);}.p-menubar-submenu{display:none;position:absolute;min-width:12.5rem;z-index:1;background:var(--p-menubar-submenu-background);border:1px solid var(--p-menubar-submenu-border-color);border-radius:var(--p-menubar-submenu-border-radius);box-shadow:var(--p-menubar-submenu-shadow);color:var(--p-menubar-submenu-color);flex-direction:column;padding:var(--p-menubar-submenu-padding);gap:var(--p-menubar-submenu-gap);}.p-menubar-submenu .p-menubar-separator{border-block-start:1px solid var(--p-menubar-separator-border-color);}.p-menubar-submenu .p-menubar-item{position:relative;}.p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu{display:block;left:100%;top:0;}.p-menubar-end{margin-left:auto;align-self:center;}.p-menubar-end:dir(rtl){margin-left:0;margin-right:auto;}.p-menubar-button{display:none;justify-content:center;align-items:center;cursor:pointer;width:var(--p-menubar-mobile-button-size);height:var(--p-menubar-mobile-button-size);position:relative;color:var(--p-menubar-mobile-button-color);border:0 none;background:transparent;border-radius:var(--p-menubar-mobile-button-border-radius);transition:background var(--p-menubar-transition-duration),color var(--p-menubar-transition-duration),outline-color var(--p-menubar-transition-duration);outline-color:transparent;}.p-menubar-button:hover{color:var(--p-menubar-mobile-button-hover-color);background:var(--p-menubar-mobile-button-hover-background);}.p-menubar-button:focus-visible{box-shadow:var(--p-menubar-mobile-button-focus-ring-shadow);outline:var(--p-menubar-mobile-button-focus-ring-width) var(--p-menubar-mobile-button-focus-ring-style) var(--p-menubar-mobile-button-focus-ring-color);outline-offset:var(--p-menubar-mobile-button-focus-ring-offset);}.p-menubar-mobile{position:relative;}.p-menubar-mobile .p-menubar-button{display:flex;}.p-menubar-mobile .p-menubar-root-list{position:absolute;display:none;width:100%;flex-direction:column;top:100%;left:0;z-index:1;padding:var(--p-menubar-submenu-padding);background:var(--p-menubar-submenu-background);border:1px solid var(--p-menubar-submenu-border-color);box-shadow:var(--p-menubar-submenu-shadow);border-radius:var(--p-menubar-submenu-border-radius);gap:var(--p-menubar-submenu-gap);}.p-menubar-mobile .p-menubar-root-list:dir(rtl){left:auto;right:0;}.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link{padding:var(--p-menubar-item-padding);}.p-menubar-mobile-active .p-menubar-root-list{display:flex;}.p-menubar-mobile .p-menubar-root-list .p-menubar-item{width:100%;position:static;}.p-menubar-mobile .p-menubar-root-list .p-menubar-separator{border-block-start:1px solid var(--p-menubar-separator-border-color);}.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon{margin-left:auto;transition:transform 0.2s;}.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon:dir(rtl),.p-menubar-mobile .p-menubar-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;}.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon{transform:rotate(-180deg);}.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon{transition:transform 0.2s;transform:rotate(90deg);}.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon{transform:rotate(-90deg);}.p-menubar-mobile .p-menubar-submenu{width:100%;position:static;box-shadow:none;border:0 none;padding-inline-start:var(--p-menubar-submenu-mobile-indent);padding-inline-end:0;}"
-    },
-    {
-        "name": "megamenu-variables",
-        "value": ":root,:host{--p-megamenu-mobile-button-border-radius:50%;--p-megamenu-mobile-button-size:1.75rem;--p-megamenu-mobile-button-color:var(--p-text-muted-color);--p-megamenu-mobile-button-hover-color:var(--p-text-hover-muted-color);--p-megamenu-mobile-button-hover-background:var(--p-content-hover-background);--p-megamenu-mobile-button-focus-ring-width:var(--p-focus-ring-width);--p-megamenu-mobile-button-focus-ring-style:var(--p-focus-ring-style);--p-megamenu-mobile-button-focus-ring-color:var(--p-focus-ring-color);--p-megamenu-mobile-button-focus-ring-offset:var(--p-focus-ring-offset);--p-megamenu-mobile-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-megamenu-separator-border-color:var(--p-content-border-color);--p-megamenu-submenu-icon-size:var(--p-navigation-submenu-icon-size);--p-megamenu-submenu-icon-color:var(--p-navigation-submenu-icon-color);--p-megamenu-submenu-icon-focus-color:var(--p-navigation-submenu-icon-focus-color);--p-megamenu-submenu-icon-active-color:var(--p-navigation-submenu-icon-active-color);--p-megamenu-submenu-label-padding:var(--p-navigation-submenu-label-padding);--p-megamenu-submenu-label-font-weight:var(--p-navigation-submenu-label-font-weight);--p-megamenu-submenu-label-background:var(--p-navigation-submenu-label-background);--p-megamenu-submenu-label-color:var(--p-navigation-submenu-label-color);--p-megamenu-submenu-padding:var(--p-navigation-list-padding);--p-megamenu-submenu-gap:var(--p-navigation-list-gap);--p-megamenu-overlay-padding:0;--p-megamenu-overlay-background:var(--p-content-background);--p-megamenu-overlay-border-color:var(--p-content-border-color);--p-megamenu-overlay-border-radius:var(--p-content-border-radius);--p-megamenu-overlay-color:var(--p-content-color);--p-megamenu-overlay-shadow:var(--p-overlay-navigation-shadow);--p-megamenu-overlay-gap:0.5rem;--p-megamenu-item-focus-background:var(--p-navigation-item-focus-background);--p-megamenu-item-active-background:var(--p-navigation-item-active-background);--p-megamenu-item-color:var(--p-navigation-item-color);--p-megamenu-item-focus-color:var(--p-navigation-item-focus-color);--p-megamenu-item-active-color:var(--p-navigation-item-active-color);--p-megamenu-item-padding:var(--p-navigation-item-padding);--p-megamenu-item-border-radius:var(--p-navigation-item-border-radius);--p-megamenu-item-gap:var(--p-navigation-item-gap);--p-megamenu-item-icon-color:var(--p-navigation-item-icon-color);--p-megamenu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-megamenu-item-icon-active-color:var(--p-navigation-item-icon-active-color);--p-megamenu-base-item-border-radius:var(--p-content-border-radius);--p-megamenu-base-item-padding:var(--p-navigation-item-padding);--p-megamenu-background:var(--p-content-background);--p-megamenu-border-color:var(--p-content-border-color);--p-megamenu-border-radius:var(--p-content-border-radius);--p-megamenu-color:var(--p-content-color);--p-megamenu-gap:0.5rem;--p-megamenu-transition-duration:var(--p-transition-duration);--p-megamenu-horizontal-orientation-padding:0.5rem 0.75rem;--p-megamenu-horizontal-orientation-gap:0.5rem;--p-megamenu-vertical-orientation-padding:var(--p-navigation-list-padding);--p-megamenu-vertical-orientation-gap:var(--p-navigation-list-gap);}"
-    },
-    {
-        "name": "megamenu-style",
-        "value": ".p-megamenu{position:relative;display:flex;align-items:center;background:var(--p-megamenu-background);border:1px solid var(--p-megamenu-border-color);border-radius:var(--p-megamenu-border-radius);color:var(--p-megamenu-color);gap:var(--p-megamenu-gap);}.p-megamenu-start,.p-megamenu-end{display:flex;align-items:center;}.p-megamenu-root-list{margin:0;padding:0;list-style:none;outline:0 none;align-items:center;display:flex;flex-wrap:wrap;gap:var(--p-megamenu-gap);}.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content{border-radius:var(--p-megamenu-base-item-border-radius);}.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link{padding:var(--p-megamenu-base-item-padding);}.p-megamenu-item-content{transition:background var(--p-megamenu-transition-duration),color var(--p-megamenu-transition-duration);border-radius:var(--p-megamenu-item-border-radius);color:var(--p-megamenu-item-color);}.p-megamenu-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-megamenu-item-padding);gap:var(--p-megamenu-item-gap);user-select:none;outline:0 none;}.p-megamenu-item-label{line-height:1;}.p-megamenu-item-icon{color:var(--p-megamenu-item-icon-color);}.p-megamenu-submenu-icon{color:var(--p-megamenu-submenu-icon-color);font-size:var(--p-megamenu-submenu-icon-size);width:var(--p-megamenu-submenu-icon-size);height:var(--p-megamenu-submenu-icon-size);}.p-megamenu-item.p-focus > .p-megamenu-item-content{color:var(--p-megamenu-item-focus-color);background:var(--p-megamenu-item-focus-background);}.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon{color:var(--p-megamenu-item-icon-focus-color);}.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon{color:var(--p-megamenu-submenu-icon-focus-color);}.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover{color:var(--p-megamenu-item-focus-color);background:var(--p-megamenu-item-focus-background);}.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon{color:var(--p-megamenu-item-icon-focus-color);}.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon{color:var(--p-megamenu-submenu-icon-focus-color);}.p-megamenu-item-active > .p-megamenu-item-content{color:var(--p-megamenu-item-active-color);background:var(--p-megamenu-item-active-background);}.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon{color:var(--p-megamenu-item-icon-active-color);}.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon{color:var(--p-megamenu-submenu-icon-active-color);}.p-megamenu-overlay{display:none;position:absolute;width:auto;z-index:1;left:0;min-width:100%;padding:var(--p-megamenu-overlay-padding);background:var(--p-megamenu-overlay-background);color:var(--p-megamenu-overlay-color);border:1px solid var(--p-megamenu-overlay-border-color);border-radius:var(--p-megamenu-overlay-border-radius);box-shadow:var(--p-megamenu-overlay-shadow);}.p-megamenu-overlay:dir(rtl){left:auto;right:0;}.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay{display:block;}.p-megamenu-submenu{margin:0;list-style:none;padding:var(--p-megamenu-submenu-padding);min-width:12.5rem;display:flex;flex-direction:column;gap:var(--p-megamenu-submenu-gap);}.p-megamenu-submenu-label{padding:var(--p-megamenu-submenu-label-padding);color:var(--p-megamenu-submenu-label-color);font-weight:var(--p-megamenu-submenu-label-font-weight);background:var(--p-megamenu-submenu-label-background);}.p-megamenu-separator{border-block-start:1px solid var(--p-megamenu-separator-border-color);}.p-megamenu-horizontal{align-items:center;padding:var(--p-megamenu-horizontal-orientation-padding);}.p-megamenu-horizontal .p-megamenu-root-list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--p-megamenu-horizontal-orientation-gap);}.p-megamenu-horizontal .p-megamenu-end{margin-left:auto;align-self:center;}.p-megamenu-horizontal .p-megamenu-end:dir(rtl){margin-left:0;margin-right:auto;}.p-megamenu-vertical{display:inline-flex;min-width:12.5rem;flex-direction:column;align-items:stretch;padding:var(--p-megamenu-vertical-orientation-padding);}.p-megamenu-vertical .p-megamenu-root-list{align-items:stretch;flex-direction:column;gap:var(--p-megamenu-vertical-orientation-gap);}.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay{left:100%;top:0;}.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay:dir(rtl){left:auto;right:100%;}.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon{margin-left:auto;}.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;transform:rotate(180deg);}.p-megamenu-grid{display:flex;}.p-megamenu-col-2,.p-megamenu-col-3,.p-megamenu-col-4,.p-megamenu-col-6,.p-megamenu-col-12{flex:0 0 auto;padding:var(--p-megamenu-overlay-gap);}.p-megamenu-col-2{width:16.6667%;}.p-megamenu-col-3{width:25%;}.p-megamenu-col-4{width:33.3333%;}.p-megamenu-col-6{width:50%;}.p-megamenu-col-12{width:100%;}.p-megamenu-button{display:none;justify-content:center;align-items:center;cursor:pointer;width:var(--p-megamenu-mobile-button-size);height:var(--p-megamenu-mobile-button-size);position:relative;color:var(--p-megamenu-mobile-button-color);border:0 none;background:transparent;border-radius:var(--p-megamenu-mobile-button-border-radius);transition:background var(--p-megamenu-transition-duration),color var(--p-megamenu-transition-duration),outline-color var(--p-megamenu-transition-duration),box-shadow var(--p-megamenu-transition-duration);outline-color:transparent;}.p-megamenu-button:hover{color:var(--p-megamenu-mobile-button-hover-color);background:var(--p-megamenu-mobile-button-hover-background);}.p-megamenu-button:focus-visible{box-shadow:var(--p-megamenu-mobile-button-focus-ring-shadow);outline:var(--p-megamenu-mobile-button-focus-ring-width) var(--p-megamenu-mobile-button-focus-ring-style) var(--p-megamenu-mobile-button-focus-ring-color);outline-offset:var(--p-megamenu-mobile-button-focus-ring-offset);}.p-megamenu-mobile{display:flex;}.p-megamenu-mobile .p-megamenu-button{display:flex;}.p-megamenu-mobile .p-megamenu-root-list{position:absolute;display:none;flex-direction:column;top:100%;left:0;z-index:1;width:100%;padding:var(--p-megamenu-submenu-padding);gap:var(--p-megamenu-submenu-gap);background:var(--p-megamenu-overlay-background);border:1px solid var(--p-megamenu-overlay-border-color);box-shadow:var(--p-megamenu-overlay-shadow);}.p-megamenu-mobile .p-megamenu-root-list:dir(rtl){left:auto;right:0;}.p-megamenu-mobile-active .p-megamenu-root-list{display:block;}.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item{width:100%;position:static;}.p-megamenu-mobile .p-megamenu-overlay{position:static;border:0 none;border-radius:0;box-shadow:none;}.p-megamenu-mobile .p-megamenu-grid{flex-wrap:wrap;overflow:auto;max-height:90%;}.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon{margin-left:auto;transition:transform 0.2s;}.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;}.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon{transform:rotate(-180deg);}"
-    },
-    {
-        "name": "panelmenu-variables",
-        "value": ":root,:host{--p-panelmenu-submenu-icon-color:var(--p-navigation-submenu-icon-color);--p-panelmenu-submenu-icon-focus-color:var(--p-navigation-submenu-icon-focus-color);--p-panelmenu-submenu-indent:1rem;--p-panelmenu-item-focus-background:var(--p-navigation-item-focus-background);--p-panelmenu-item-color:var(--p-navigation-item-color);--p-panelmenu-item-focus-color:var(--p-navigation-item-focus-color);--p-panelmenu-item-gap:0.5rem;--p-panelmenu-item-padding:var(--p-navigation-item-padding);--p-panelmenu-item-border-radius:var(--p-content-border-radius);--p-panelmenu-item-icon-color:var(--p-navigation-item-icon-color);--p-panelmenu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-panelmenu-panel-background:var(--p-content-background);--p-panelmenu-panel-border-color:var(--p-content-border-color);--p-panelmenu-panel-border-width:1px;--p-panelmenu-panel-color:var(--p-content-color);--p-panelmenu-panel-padding:0.25rem 0.25rem;--p-panelmenu-panel-border-radius:var(--p-content-border-radius);--p-panelmenu-panel-last-border-width:1px;--p-panelmenu-panel-last-bottom-border-radius:var(--p-content-border-radius);--p-panelmenu-panel-first-border-width:1px;--p-panelmenu-panel-first-top-border-radius:var(--p-content-border-radius);--p-panelmenu-gap:0.5rem;--p-panelmenu-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "panelmenu-style",
-        "value": ".p-panelmenu{display:flex;flex-direction:column;gap:var(--p-panelmenu-gap);}.p-panelmenu-panel{background:var(--p-panelmenu-panel-background);border-width:var(--p-panelmenu-panel-border-width);border-style:solid;border-color:var(--p-panelmenu-panel-border-color);color:var(--p-panelmenu-panel-color);border-radius:var(--p-panelmenu-panel-border-radius);padding:var(--p-panelmenu-panel-padding);}.p-panelmenu-panel:first-child{border-width:var(--p-panelmenu-panel-first-border-width);border-start-start-radius:var(--p-panelmenu-panel-first-top-border-radius);border-start-end-radius:var(--p-panelmenu-panel-first-top-border-radius);}.p-panelmenu-panel:last-child{border-width:var(--p-panelmenu-panel-last-border-width);border-end-start-radius:var(--p-panelmenu-panel-last-bottom-border-radius);border-end-end-radius:var(--p-panelmenu-panel-last-bottom-border-radius);}.p-panelmenu-header{outline:0 none;}.p-panelmenu-header-content{border-radius:var(--p-panelmenu-item-border-radius);transition:background var(--p-panelmenu-transition-duration),color var(--p-panelmenu-transition-duration),outline-color var(--p-panelmenu-transition-duration),box-shadow var(--p-panelmenu-transition-duration);outline-color:transparent;color:var(--p-panelmenu-item-color);}.p-panelmenu-header-link{display:flex;gap:var(--p-panelmenu-item-gap);padding:var(--p-panelmenu-item-padding);align-items:center;user-select:none;cursor:pointer;position:relative;text-decoration:none;color:inherit;}.p-panelmenu-header-icon,.p-panelmenu-item-icon{color:var(--p-panelmenu-item-icon-color);}.p-panelmenu-submenu-icon{color:var(--p-panelmenu-submenu-icon-color);}.p-panelmenu-submenu-icon:dir(rtl){transform:rotate(180deg);}.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content{background:var(--p-panelmenu-item-focus-background);color:var(--p-panelmenu-item-focus-color);}.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon{color:var(--p-panelmenu-item-icon-focus-color);}.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon{color:var(--p-panelmenu-submenu-icon-focus-color);}.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover{background:var(--p-panelmenu-item-focus-background);color:var(--p-panelmenu-item-focus-color);}.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon{color:var(--p-panelmenu-item-icon-focus-color);}.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon{color:var(--p-panelmenu-submenu-icon-focus-color);}.p-panelmenu-submenu{margin:0;padding:0 0 0 var(--p-panelmenu-submenu-indent);outline:0;list-style:none;}.p-panelmenu-submenu:dir(rtl){padding:0 var(--p-panelmenu-submenu-indent) 0 0;}.p-panelmenu-item-link{display:flex;gap:var(--p-panelmenu-item-gap);padding:var(--p-panelmenu-item-padding);align-items:center;user-select:none;cursor:pointer;text-decoration:none;color:inherit;position:relative;overflow:hidden;}.p-panelmenu-item-label{line-height:1;}.p-panelmenu-item-content{border-radius:var(--p-panelmenu-item-border-radius);transition:background var(--p-panelmenu-transition-duration),color var(--p-panelmenu-transition-duration),outline-color var(--p-panelmenu-transition-duration),box-shadow var(--p-panelmenu-transition-duration);color:var(--p-panelmenu-item-color);outline-color:transparent;}.p-panelmenu-item.p-focus > .p-panelmenu-item-content{background:var(--p-panelmenu-item-focus-background);color:var(--p-panelmenu-item-focus-color);}.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon{color:var(--p-panelmenu-item-focus-color);}.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon{color:var(--p-panelmenu-submenu-icon-focus-color);}.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover{background:var(--p-panelmenu-item-focus-background);color:var(--p-panelmenu-item-focus-color);}.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon{color:var(--p-panelmenu-item-icon-focus-color);}.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon{color:var(--p-panelmenu-submenu-icon-focus-color);}.p-panelmenu-content-container{display:grid;grid-template-rows:1fr;}.p-panelmenu-content-wrapper{min-height:0;}"
-    },
-    {
-        "name": "steps-variables",
-        "value": ":root,:host{--p-steps-item-number-background:var(--p-content-background);--p-steps-item-number-active-background:var(--p-content-background);--p-steps-item-number-border-color:var(--p-content-border-color);--p-steps-item-number-active-border-color:var(--p-content-border-color);--p-steps-item-number-color:var(--p-text-muted-color);--p-steps-item-number-active-color:var(--p-primary-color);--p-steps-item-number-size:2rem;--p-steps-item-number-font-size:1.143rem;--p-steps-item-number-font-weight:500;--p-steps-item-number-border-radius:50%;--p-steps-item-number-shadow:0px 0.5px 0px 0px rgba(0,0,0,0.06),0px 1px 1px 0px rgba(0,0,0,0.12);--p-steps-item-label-color:var(--p-text-muted-color);--p-steps-item-label-active-color:var(--p-primary-color);--p-steps-item-label-font-weight:500;--p-steps-item-link-border-radius:var(--p-content-border-radius);--p-steps-item-link-gap:0.5rem;--p-steps-item-link-focus-ring-width:var(--p-focus-ring-width);--p-steps-item-link-focus-ring-style:var(--p-focus-ring-style);--p-steps-item-link-focus-ring-color:var(--p-focus-ring-color);--p-steps-item-link-focus-ring-offset:var(--p-focus-ring-offset);--p-steps-item-link-focus-ring-shadow:var(--p-focus-ring-shadow);--p-steps-separator-background:var(--p-content-border-color);--p-steps-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "steps-style",
-        "value": ".p-steps{position:relative;}.p-steps-list{padding:0;margin:0;list-style-type:none;display:flex;}.p-steps-item{position:relative;display:flex;justify-content:center;flex:1 1 auto;}.p-steps-item.p-disabled,.p-steps-item.p-disabled *{opacity:1;pointer-events:auto;user-select:auto;cursor:auto;}.p-steps-item:before{content:' ';border-top:2px solid var(--p-steps-separator-background);width:100%;top:50%;left:0;display:block;position:absolute;margin-top:calc(-1rem + 1px);}.p-steps-item:first-child::before{width:calc(50% + 1rem);transform:translateX(100%);}.p-steps-item:last-child::before{width:50%;}.p-steps-item-link{display:inline-flex;flex-direction:column;align-items:center;overflow:hidden;text-decoration:none;transition:outline-color var(--p-steps-transition-duration),box-shadow var(--p-steps-transition-duration);border-radius:var(--p-steps-item-link-border-radius);outline-color:transparent;gap:var(--p-steps-item-link-gap);}.p-steps-item-link:not(.p-disabled):focus-visible{box-shadow:var(--p-steps-item-link-focus-ring-shadow);outline:var(--p-steps-item-link-focus-ring-width) var(--p-steps-item-link-focus-ring-style) var(--p-steps-item-link-focus-ring-color);outline-offset:var(--p-steps-item-link-focus-ring-offset);}.p-steps-item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--p-steps-item-label-color);display:block;font-weight:var(--p-steps-item-label-font-weight);}.p-steps-item-number{display:flex;align-items:center;justify-content:center;color:var(--p-steps-item-number-color);border:2px solid var(--p-steps-item-number-border-color);background:var(--p-steps-item-number-background);min-width:var(--p-steps-item-number-size);height:var(--p-steps-item-number-size);line-height:var(--p-steps-item-number-size);font-size:var(--p-steps-item-number-font-size);z-index:1;border-radius:var(--p-steps-item-number-border-radius);position:relative;font-weight:var(--p-steps-item-number-font-weight);}.p-steps-item-number::after{content:' ';position:absolute;width:100%;height:100%;border-radius:var(--p-steps-item-number-border-radius);box-shadow:var(--p-steps-item-number-shadow);}.p-steps:not(.p-readonly) .p-steps-item{cursor:pointer;}.p-steps-item-active .p-steps-item-number{background:var(--p-steps-item-number-active-background);border-color:var(--p-steps-item-number-active-border-color);color:var(--p-steps-item-number-active-color);}.p-steps-item-active .p-steps-item-label{color:var(--p-steps-item-label-active-color);}"
-    },
-    {
-        "name": "tabmenu-variables",
-        "value": ":root,:host{--p-tabmenu-active-bar-height:1px;--p-tabmenu-active-bar-bottom:-1px;--p-tabmenu-active-bar-background:var(--p-primary-color);--p-tabmenu-item-icon-color:var(--p-text-muted-color);--p-tabmenu-item-icon-hover-color:var(--p-text-color);--p-tabmenu-item-icon-active-color:var(--p-primary-color);--p-tabmenu-item-background:transparent;--p-tabmenu-item-hover-background:transparent;--p-tabmenu-item-active-background:transparent;--p-tabmenu-item-border-width:0 0 1px 0;--p-tabmenu-item-border-color:var(--p-content-border-color);--p-tabmenu-item-hover-border-color:var(--p-content-border-color);--p-tabmenu-item-active-border-color:var(--p-primary-color);--p-tabmenu-item-color:var(--p-text-muted-color);--p-tabmenu-item-hover-color:var(--p-text-color);--p-tabmenu-item-active-color:var(--p-primary-color);--p-tabmenu-item-padding:1rem 1.125rem;--p-tabmenu-item-font-weight:600;--p-tabmenu-item-margin:0 0 -1px 0;--p-tabmenu-item-gap:0.5rem;--p-tabmenu-item-focus-ring-width:var(--p-focus-ring-width);--p-tabmenu-item-focus-ring-style:var(--p-focus-ring-style);--p-tabmenu-item-focus-ring-color:var(--p-focus-ring-color);--p-tabmenu-item-focus-ring-offset:var(--p-focus-ring-offset);--p-tabmenu-item-focus-ring-shadow:var(--p-focus-ring-shadow);--p-tabmenu-tablist-border-width:0 0 1px 0;--p-tabmenu-tablist-background:var(--p-content-background);--p-tabmenu-tablist-border-color:var(--p-content-border-color);--p-tabmenu-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "tabmenu-style",
-        "value": ".p-tabmenu{overflow-x:auto;}.p-tabmenu-tablist{display:flex;margin:0;padding:0;list-style-type:none;background:var(--p-tabmenu-tablist-background);border-style:solid;border-color:var(--p-tabmenu-tablist-border-color);border-width:var(--p-tabmenu-tablist-border-width);position:relative;}.p-tabmenu-item-link{cursor:pointer;user-select:none;display:flex;align-items:center;text-decoration:none;position:relative;overflow:hidden;background:var(--p-tabmenu-item-background);border-style:solid;border-width:var(--p-tabmenu-item-border-width);border-color:var(--p-tabmenu-item-border-color);color:var(--p-tabmenu-item-color);padding:var(--p-tabmenu-item-padding);font-weight:var(--p-tabmenu-item-font-weight);transition:background var(--p-tabmenu-transition-duration),border-color var(--p-tabmenu-transition-duration),color var(--p-tabmenu-transition-duration),outline-color var(--p-tabmenu-transition-duration),box-shadow var(--p-tabmenu-transition-duration);margin:var(--p-tabmenu-item-margin);outline-color:transparent;gap:var(--p-tabmenu-item-gap);}.p-tabmenu-item-link:focus-visible{z-index:1;box-shadow:var(--p-tabmenu-item-focus-ring-shadow);outline:var(--p-tabmenu-item-focus-ring-width) var(--p-tabmenu-item-focus-ring-style) var(--p-tabmenu-item-focus-ring-color);outline-offset:var(--p-tabmenu-item-focus-ring-offset);}.p-tabmenu-item-icon{color:var(--p-tabmenu-item-icon-color);transition:background var(--p-tabmenu-transition-duration),border-color var(--p-tabmenu-transition-duration),color var(--p-tabmenu-transition-duration),outline-color var(--p-tabmenu-transition-duration),box-shadow var(--p-tabmenu-transition-duration);}.p-tabmenu-item-label{line-height:1;}.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-link{background:var(--p-tabmenu-item-hover-background);border-color:var(--p-tabmenu-item-hover-border-color);color:var(--p-tabmenu-item-hover-color);}.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-icon{color:var(--p-tabmenu-item-icon-hover-color);}.p-tabmenu-item-active .p-tabmenu-item-link{background:var(--p-tabmenu-item-active-background);border-color:var(--p-tabmenu-item-active-border-color);color:var(--p-tabmenu-item-active-color);}.p-tabmenu-item-active .p-tabmenu-item-icon{color:var(--p-tabmenu-item-icon-active-color);}.p-tabmenu-active-bar{z-index:1;display:block;position:absolute;bottom:var(--p-tabmenu-active-bar-bottom);height:var(--p-tabmenu-active-bar-height);background:var(--p-tabmenu-active-bar-background);transition:250ms cubic-bezier(0.35,0,0.25,1);}.p-tabmenu::-webkit-scrollbar{display:none;}"
-    },
-    {
-        "name": "tieredmenu-variables",
-        "value": ":root,:host{--p-tieredmenu-separator-border-color:var(--p-content-border-color);--p-tieredmenu-submenu-icon-size:var(--p-navigation-submenu-icon-size);--p-tieredmenu-submenu-icon-color:var(--p-navigation-submenu-icon-color);--p-tieredmenu-submenu-icon-focus-color:var(--p-navigation-submenu-icon-focus-color);--p-tieredmenu-submenu-icon-active-color:var(--p-navigation-submenu-icon-active-color);--p-tieredmenu-submenu-mobile-indent:1rem;--p-tieredmenu-item-focus-background:var(--p-navigation-item-focus-background);--p-tieredmenu-item-active-background:var(--p-navigation-item-active-background);--p-tieredmenu-item-color:var(--p-navigation-item-color);--p-tieredmenu-item-focus-color:var(--p-navigation-item-focus-color);--p-tieredmenu-item-active-color:var(--p-navigation-item-active-color);--p-tieredmenu-item-padding:var(--p-navigation-item-padding);--p-tieredmenu-item-border-radius:var(--p-navigation-item-border-radius);--p-tieredmenu-item-gap:var(--p-navigation-item-gap);--p-tieredmenu-item-icon-color:var(--p-navigation-item-icon-color);--p-tieredmenu-item-icon-focus-color:var(--p-navigation-item-icon-focus-color);--p-tieredmenu-item-icon-active-color:var(--p-navigation-item-icon-active-color);--p-tieredmenu-list-padding:var(--p-navigation-list-padding);--p-tieredmenu-list-gap:var(--p-navigation-list-gap);--p-tieredmenu-background:var(--p-content-background);--p-tieredmenu-border-color:var(--p-content-border-color);--p-tieredmenu-color:var(--p-content-color);--p-tieredmenu-border-radius:var(--p-content-border-radius);--p-tieredmenu-shadow:var(--p-overlay-navigation-shadow);--p-tieredmenu-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "tieredmenu-style",
-        "value": ".p-tieredmenu{background:var(--p-tieredmenu-background);color:var(--p-tieredmenu-color);border:1px solid var(--p-tieredmenu-border-color);border-radius:var(--p-tieredmenu-border-radius);min-width:12.5rem;}.p-tieredmenu-root-list,.p-tieredmenu-submenu{margin:0;padding:var(--p-tieredmenu-list-padding);list-style:none;outline:0 none;display:flex;flex-direction:column;gap:var(--p-tieredmenu-list-gap);}.p-tieredmenu-submenu{position:absolute;min-width:100%;z-index:1;background:var(--p-tieredmenu-background);color:var(--p-tieredmenu-color);border:1px solid var(--p-tieredmenu-border-color);border-radius:var(--p-tieredmenu-border-radius);box-shadow:var(--p-tieredmenu-shadow);}.p-tieredmenu-item{position:relative;}.p-tieredmenu-item-content{transition:background var(--p-tieredmenu-transition-duration),color var(--p-tieredmenu-transition-duration);border-radius:var(--p-tieredmenu-item-border-radius);color:var(--p-tieredmenu-item-color);}.p-tieredmenu-item-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative;color:inherit;padding:var(--p-tieredmenu-item-padding);gap:var(--p-tieredmenu-item-gap);user-select:none;outline:0 none;}.p-tieredmenu-item-label{line-height:1;}.p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-color);}.p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-color);margin-left:auto;font-size:var(--p-tieredmenu-submenu-icon-size);width:var(--p-tieredmenu-submenu-icon-size);height:var(--p-tieredmenu-submenu-icon-size);}.p-tieredmenu-submenu-icon:dir(rtl){margin-left:0;margin-right:auto;}.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content{color:var(--p-tieredmenu-item-focus-color);background:var(--p-tieredmenu-item-focus-background);}.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-focus-color);}.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-focus-color);}.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover{color:var(--p-tieredmenu-item-focus-color);background:var(--p-tieredmenu-item-focus-background);}.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-focus-color);}.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-focus-color);}.p-tieredmenu-item-active > .p-tieredmenu-item-content{color:var(--p-tieredmenu-item-active-color);background:var(--p-tieredmenu-item-active-background);}.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon{color:var(--p-tieredmenu-item-icon-active-color);}.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon{color:var(--p-tieredmenu-submenu-icon-active-color);}.p-tieredmenu-separator{border-block-start:1px solid var(--p-tieredmenu-separator-border-color);}.p-tieredmenu-overlay{box-shadow:var(--p-tieredmenu-shadow);will-change:transform;}.p-tieredmenu-mobile .p-tieredmenu-submenu{position:static;box-shadow:none;border:0 none;padding-inline-start:var(--p-tieredmenu-submenu-mobile-indent);padding-inline-end:0;}.p-tieredmenu-mobile .p-tieredmenu-submenu:dir(rtl){padding-inline-start:0;padding-inline-end:var(--p-tieredmenu-submenu-mobile-indent);}.p-tieredmenu-mobile .p-tieredmenu-submenu-icon{transition:transform 0.2s;transform:rotate(90deg);}.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon{transform:rotate(-90deg);}"
-    },
-    {
-        "name": "message-variables",
-        "value": ":root,:host{--p-message-simple-content-padding:0;--p-message-outlined-border-width:1px;--p-message-close-icon-size:1rem;--p-message-close-icon-lg-size:1.125rem;--p-message-close-icon-sm-size:0.875rem;--p-message-close-button-width:1.75rem;--p-message-close-button-height:1.75rem;--p-message-close-button-border-radius:50%;--p-message-close-button-focus-ring-width:var(--p-focus-ring-width);--p-message-close-button-focus-ring-style:var(--p-focus-ring-style);--p-message-close-button-focus-ring-offset:var(--p-focus-ring-offset);--p-message-icon-size:1.125rem;--p-message-icon-lg-size:1.25rem;--p-message-icon-sm-size:1rem;--p-message-text-font-size:1rem;--p-message-text-font-weight:500;--p-message-text-lg-font-size:1.125rem;--p-message-text-sm-font-size:0.875rem;--p-message-content-padding:0.5rem 0.75rem;--p-message-content-gap:0.5rem;--p-message-content-lg-padding:0.625rem 0.875rem;--p-message-content-sm-padding:0.375rem 0.625rem;--p-message-border-radius:var(--p-content-border-radius);--p-message-border-width:1px;--p-message-transition-duration:var(--p-transition-duration);--p-message-contrast-background:var(--p-surface-900);--p-message-contrast-border-color:var(--p-surface-950);--p-message-contrast-color:var(--p-surface-50);--p-message-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-message-contrast-simple-color:var(--p-surface-950);--p-message-contrast-outlined-color:var(--p-surface-950);--p-message-contrast-outlined-border-color:var(--p-surface-950);--p-message-contrast-close-button-hover-background:var(--p-surface-800);--p-message-contrast-close-button-focus-ring-color:var(--p-surface-50);--p-message-contrast-close-button-focus-ring-shadow:none;--p-message-secondary-background:var(--p-surface-100);--p-message-secondary-border-color:var(--p-surface-200);--p-message-secondary-color:var(--p-surface-600);--p-message-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-message-secondary-simple-color:var(--p-surface-500);--p-message-secondary-outlined-color:var(--p-surface-500);--p-message-secondary-outlined-border-color:var(--p-surface-500);--p-message-secondary-close-button-hover-background:var(--p-surface-200);--p-message-secondary-close-button-focus-ring-color:var(--p-surface-600);--p-message-secondary-close-button-focus-ring-shadow:none;--p-message-error-background:color-mix(in srgb,var(--p-red-50),transparent 5%);--p-message-error-border-color:var(--p-red-200);--p-message-error-color:var(--p-red-600);--p-message-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-message-error-simple-color:var(--p-red-600);--p-message-error-outlined-color:var(--p-red-600);--p-message-error-outlined-border-color:var(--p-red-600);--p-message-error-close-button-hover-background:var(--p-red-100);--p-message-error-close-button-focus-ring-color:var(--p-red-600);--p-message-error-close-button-focus-ring-shadow:none;--p-message-warn-background:color-mix(in srgb,var(--p-yellow-50),transparent 5%);--p-message-warn-border-color:var(--p-yellow-200);--p-message-warn-color:var(--p-yellow-600);--p-message-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-message-warn-simple-color:var(--p-yellow-600);--p-message-warn-outlined-color:var(--p-yellow-600);--p-message-warn-outlined-border-color:var(--p-yellow-600);--p-message-warn-close-button-hover-background:var(--p-yellow-100);--p-message-warn-close-button-focus-ring-color:var(--p-yellow-600);--p-message-warn-close-button-focus-ring-shadow:none;--p-message-success-background:color-mix(in srgb,var(--p-green-50),transparent 5%);--p-message-success-border-color:var(--p-green-200);--p-message-success-color:var(--p-green-600);--p-message-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-message-success-simple-color:var(--p-green-600);--p-message-success-outlined-color:var(--p-green-600);--p-message-success-outlined-border-color:var(--p-green-600);--p-message-success-close-button-hover-background:var(--p-green-100);--p-message-success-close-button-focus-ring-color:var(--p-green-600);--p-message-success-close-button-focus-ring-shadow:none;--p-message-info-background:color-mix(in srgb,var(--p-blue-50),transparent 5%);--p-message-info-border-color:var(--p-blue-200);--p-message-info-color:var(--p-blue-600);--p-message-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);--p-message-info-simple-color:var(--p-blue-600);--p-message-info-outlined-color:var(--p-blue-600);--p-message-info-outlined-border-color:var(--p-blue-600);--p-message-info-close-button-hover-background:var(--p-blue-100);--p-message-info-close-button-focus-ring-color:var(--p-blue-600);--p-message-info-close-button-focus-ring-shadow:none;}.p-dark{--p-message-contrast-background:var(--p-surface-0);--p-message-contrast-border-color:var(--p-surface-100);--p-message-contrast-color:var(--p-surface-950);--p-message-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-message-contrast-simple-color:var(--p-surface-0);--p-message-contrast-outlined-color:var(--p-surface-0);--p-message-contrast-outlined-border-color:var(--p-surface-0);--p-message-contrast-close-button-hover-background:var(--p-surface-100);--p-message-contrast-close-button-focus-ring-color:var(--p-surface-950);--p-message-contrast-close-button-focus-ring-shadow:none;--p-message-secondary-background:var(--p-surface-800);--p-message-secondary-border-color:var(--p-surface-700);--p-message-secondary-color:var(--p-surface-300);--p-message-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-message-secondary-simple-color:var(--p-surface-400);--p-message-secondary-outlined-color:var(--p-surface-400);--p-message-secondary-outlined-border-color:var(--p-surface-400);--p-message-secondary-close-button-hover-background:var(--p-surface-700);--p-message-secondary-close-button-focus-ring-color:var(--p-surface-300);--p-message-secondary-close-button-focus-ring-shadow:none;--p-message-error-background:color-mix(in srgb,var(--p-red-500),transparent 84%);--p-message-error-border-color:color-mix(in srgb,var(--p-red-700),transparent 64%);--p-message-error-color:var(--p-red-500);--p-message-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-message-error-simple-color:var(--p-red-500);--p-message-error-outlined-color:var(--p-red-500);--p-message-error-outlined-border-color:var(--p-red-500);--p-message-error-close-button-hover-background:rgba(255,255,255,0.05);--p-message-error-close-button-focus-ring-color:var(--p-red-500);--p-message-error-close-button-focus-ring-shadow:none;--p-message-warn-background:color-mix(in srgb,var(--p-yellow-500),transparent 84%);--p-message-warn-border-color:color-mix(in srgb,var(--p-yellow-700),transparent 64%);--p-message-warn-color:var(--p-yellow-500);--p-message-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-message-warn-simple-color:var(--p-yellow-500);--p-message-warn-outlined-color:var(--p-yellow-500);--p-message-warn-outlined-border-color:var(--p-yellow-500);--p-message-warn-close-button-hover-background:rgba(255,255,255,0.05);--p-message-warn-close-button-focus-ring-color:var(--p-yellow-500);--p-message-warn-close-button-focus-ring-shadow:none;--p-message-success-background:color-mix(in srgb,var(--p-green-500),transparent 84%);--p-message-success-border-color:color-mix(in srgb,var(--p-green-700),transparent 64%);--p-message-success-color:var(--p-green-500);--p-message-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-message-success-simple-color:var(--p-green-500);--p-message-success-outlined-color:var(--p-green-500);--p-message-success-outlined-border-color:var(--p-green-500);--p-message-success-close-button-hover-background:rgba(255,255,255,0.05);--p-message-success-close-button-focus-ring-color:var(--p-green-500);--p-message-success-close-button-focus-ring-shadow:none;--p-message-info-background:color-mix(in srgb,var(--p-blue-500),transparent 84%);--p-message-info-border-color:color-mix(in srgb,var(--p-blue-700),transparent 64%);--p-message-info-color:var(--p-blue-500);--p-message-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);--p-message-info-simple-color:var(--p-blue-500);--p-message-info-outlined-color:var(--p-blue-500);--p-message-info-outlined-border-color:var(--p-blue-500);--p-message-info-close-button-hover-background:rgba(255,255,255,0.05);--p-message-info-close-button-focus-ring-color:var(--p-blue-500);--p-message-info-close-button-focus-ring-shadow:none;}"
-    },
-    {
-        "name": "message-style",
-        "value": ".p-message{display:grid;grid-template-rows:1fr;border-radius:var(--p-message-border-radius);outline-width:var(--p-message-border-width);outline-style:solid;}.p-message-content-wrapper{min-height:0;}.p-message-content{display:flex;align-items:center;padding:var(--p-message-content-padding);gap:var(--p-message-content-gap);}.p-message-icon{flex-shrink:0;}.p-message-close-button{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-inline-start:auto;overflow:hidden;position:relative;width:var(--p-message-close-button-width);height:var(--p-message-close-button-height);border-radius:var(--p-message-close-button-border-radius);background:transparent;transition:background var(--p-message-transition-duration),color var(--p-message-transition-duration),outline-color var(--p-message-transition-duration),box-shadow var(--p-message-transition-duration),opacity 0.3s;outline-color:transparent;color:inherit;padding:0;border:none;cursor:pointer;user-select:none;}.p-message-close-icon{font-size:var(--p-message-close-icon-size);width:var(--p-message-close-icon-size);height:var(--p-message-close-icon-size);}.p-message-close-button:focus-visible{outline-width:var(--p-message-close-button-focus-ring-width);outline-style:var(--p-message-close-button-focus-ring-style);outline-offset:var(--p-message-close-button-focus-ring-offset);}.p-message-info{background:var(--p-message-info-background);outline-color:var(--p-message-info-border-color);color:var(--p-message-info-color);box-shadow:var(--p-message-info-shadow);}.p-message-info .p-message-close-button:focus-visible{outline-color:var(--p-message-info-close-button-focus-ring-color);box-shadow:var(--p-message-info-close-button-focus-ring-shadow);}.p-message-info .p-message-close-button:hover{background:var(--p-message-info-close-button-hover-background);}.p-message-info.p-message-outlined{color:var(--p-message-info-outlined-color);outline-color:var(--p-message-info-outlined-border-color);}.p-message-info.p-message-simple{color:var(--p-message-info-simple-color);}.p-message-success{background:var(--p-message-success-background);outline-color:var(--p-message-success-border-color);color:var(--p-message-success-color);box-shadow:var(--p-message-success-shadow);}.p-message-success .p-message-close-button:focus-visible{outline-color:var(--p-message-success-close-button-focus-ring-color);box-shadow:var(--p-message-success-close-button-focus-ring-shadow);}.p-message-success .p-message-close-button:hover{background:var(--p-message-success-close-button-hover-background);}.p-message-success.p-message-outlined{color:var(--p-message-success-outlined-color);outline-color:var(--p-message-success-outlined-border-color);}.p-message-success.p-message-simple{color:var(--p-message-success-simple-color);}.p-message-warn{background:var(--p-message-warn-background);outline-color:var(--p-message-warn-border-color);color:var(--p-message-warn-color);box-shadow:var(--p-message-warn-shadow);}.p-message-warn .p-message-close-button:focus-visible{outline-color:var(--p-message-warn-close-button-focus-ring-color);box-shadow:var(--p-message-warn-close-button-focus-ring-shadow);}.p-message-warn .p-message-close-button:hover{background:var(--p-message-warn-close-button-hover-background);}.p-message-warn.p-message-outlined{color:var(--p-message-warn-outlined-color);outline-color:var(--p-message-warn-outlined-border-color);}.p-message-warn.p-message-simple{color:var(--p-message-warn-simple-color);}.p-message-error{background:var(--p-message-error-background);outline-color:var(--p-message-error-border-color);color:var(--p-message-error-color);box-shadow:var(--p-message-error-shadow);}.p-message-error .p-message-close-button:focus-visible{outline-color:var(--p-message-error-close-button-focus-ring-color);box-shadow:var(--p-message-error-close-button-focus-ring-shadow);}.p-message-error .p-message-close-button:hover{background:var(--p-message-error-close-button-hover-background);}.p-message-error.p-message-outlined{color:var(--p-message-error-outlined-color);outline-color:var(--p-message-error-outlined-border-color);}.p-message-error.p-message-simple{color:var(--p-message-error-simple-color);}.p-message-secondary{background:var(--p-message-secondary-background);outline-color:var(--p-message-secondary-border-color);color:var(--p-message-secondary-color);box-shadow:var(--p-message-secondary-shadow);}.p-message-secondary .p-message-close-button:focus-visible{outline-color:var(--p-message-secondary-close-button-focus-ring-color);box-shadow:var(--p-message-secondary-close-button-focus-ring-shadow);}.p-message-secondary .p-message-close-button:hover{background:var(--p-message-secondary-close-button-hover-background);}.p-message-secondary.p-message-outlined{color:var(--p-message-secondary-outlined-color);outline-color:var(--p-message-secondary-outlined-border-color);}.p-message-secondary.p-message-simple{color:var(--p-message-secondary-simple-color);}.p-message-contrast{background:var(--p-message-contrast-background);outline-color:var(--p-message-contrast-border-color);color:var(--p-message-contrast-color);box-shadow:var(--p-message-contrast-shadow);}.p-message-contrast .p-message-close-button:focus-visible{outline-color:var(--p-message-contrast-close-button-focus-ring-color);box-shadow:var(--p-message-contrast-close-button-focus-ring-shadow);}.p-message-contrast .p-message-close-button:hover{background:var(--p-message-contrast-close-button-hover-background);}.p-message-contrast.p-message-outlined{color:var(--p-message-contrast-outlined-color);outline-color:var(--p-message-contrast-outlined-border-color);}.p-message-contrast.p-message-simple{color:var(--p-message-contrast-simple-color);}.p-message-text{font-size:var(--p-message-text-font-size);font-weight:var(--p-message-text-font-weight);}.p-message-icon{font-size:var(--p-message-icon-size);width:var(--p-message-icon-size);height:var(--p-message-icon-size);}.p-message-sm .p-message-content{padding:var(--p-message-content-sm-padding);}.p-message-sm .p-message-text{font-size:var(--p-message-text-sm-font-size);}.p-message-sm .p-message-icon{font-size:var(--p-message-icon-sm-size);width:var(--p-message-icon-sm-size);height:var(--p-message-icon-sm-size);}.p-message-sm .p-message-close-icon{font-size:var(--p-message-close-icon-sm-size);width:var(--p-message-close-icon-sm-size);height:var(--p-message-close-icon-sm-size);}.p-message-lg .p-message-content{padding:var(--p-message-content-lg-padding);}.p-message-lg .p-message-text{font-size:var(--p-message-text-lg-font-size);}.p-message-lg .p-message-icon{font-size:var(--p-message-icon-lg-size);width:var(--p-message-icon-lg-size);height:var(--p-message-icon-lg-size);}.p-message-lg .p-message-close-icon{font-size:var(--p-message-close-icon-lg-size);width:var(--p-message-close-icon-lg-size);height:var(--p-message-close-icon-lg-size);}.p-message-outlined{background:transparent;outline-width:var(--p-message-outlined-border-width);}.p-message-simple{background:transparent;outline-color:transparent;box-shadow:none;}.p-message-simple .p-message-content{padding:var(--p-message-simple-content-padding);}.p-message-outlined .p-message-close-button:hover,.p-message-simple .p-message-close-button:hover{background:transparent;}.p-message-enter-active{animation:p-animate-message-enter 0.3s ease-out forwards;overflow:hidden;}.p-message-leave-active{animation:p-animate-message-leave 0.15s ease-in forwards;overflow:hidden;}@keyframes p-animate-message-enter{from{opacity:0;grid-template-rows:0fr;}to{opacity:1;grid-template-rows:1fr;}} @keyframes p-animate-message-leave{from{opacity:1;grid-template-rows:1fr;}to{opacity:0;margin:0;grid-template-rows:0fr;}}"
-    },
-    {
-        "name": "inlinemessage-variables",
-        "value": ":root,:host{--p-inlinemessage-icon-size:1rem;--p-inlinemessage-text-font-weight:500;--p-inlinemessage-padding:var(--p-form-field-padding-y) var(--p-form-field-padding-x);--p-inlinemessage-border-radius:var(--p-content-border-radius);--p-inlinemessage-gap:0.5rem;--p-inlinemessage-contrast-background:var(--p-surface-900);--p-inlinemessage-contrast-border-color:var(--p-surface-950);--p-inlinemessage-contrast-color:var(--p-surface-50);--p-inlinemessage-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-inlinemessage-secondary-background:var(--p-surface-100);--p-inlinemessage-secondary-border-color:var(--p-surface-200);--p-inlinemessage-secondary-color:var(--p-surface-600);--p-inlinemessage-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-inlinemessage-error-background:color-mix(in srgb,var(--p-red-50),transparent 5%);--p-inlinemessage-error-border-color:var(--p-red-200);--p-inlinemessage-error-color:var(--p-red-600);--p-inlinemessage-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-inlinemessage-warn-background:color-mix(in srgb,var(--p-yellow-50),transparent 5%);--p-inlinemessage-warn-border-color:var(--p-yellow-200);--p-inlinemessage-warn-color:var(--p-yellow-600);--p-inlinemessage-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-inlinemessage-success-background:color-mix(in srgb,var(--p-green-50),transparent 5%);--p-inlinemessage-success-border-color:var(--p-green-200);--p-inlinemessage-success-color:var(--p-green-600);--p-inlinemessage-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-inlinemessage-info-background:color-mix(in srgb,var(--p-blue-50),transparent 5%);--p-inlinemessage-info-border-color:var(--p-blue-200);--p-inlinemessage-info-color:var(--p-blue-600);--p-inlinemessage-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);}.p-dark{--p-inlinemessage-contrast-background:var(--p-surface-0);--p-inlinemessage-contrast-border-color:var(--p-surface-100);--p-inlinemessage-contrast-color:var(--p-surface-950);--p-inlinemessage-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-inlinemessage-secondary-background:var(--p-surface-800);--p-inlinemessage-secondary-border-color:var(--p-surface-700);--p-inlinemessage-secondary-color:var(--p-surface-300);--p-inlinemessage-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-inlinemessage-error-background:color-mix(in srgb,var(--p-red-500),transparent 84%);--p-inlinemessage-error-border-color:color-mix(in srgb,var(--p-red-700),transparent 64%);--p-inlinemessage-error-color:var(--p-red-500);--p-inlinemessage-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-inlinemessage-warn-background:color-mix(in srgb,var(--p-yellow-500),transparent 84%);--p-inlinemessage-warn-border-color:color-mix(in srgb,var(--p-yellow-700),transparent 64%);--p-inlinemessage-warn-color:var(--p-yellow-500);--p-inlinemessage-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-inlinemessage-success-background:color-mix(in srgb,var(--p-green-500),transparent 84%);--p-inlinemessage-success-border-color:color-mix(in srgb,var(--p-green-700),transparent 64%);--p-inlinemessage-success-color:var(--p-green-500);--p-inlinemessage-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-inlinemessage-info-background:color-mix(in srgb,var(--p-blue-500),transparent 84%);--p-inlinemessage-info-border-color:color-mix(in srgb,var(--p-blue-700),transparent 64%);--p-inlinemessage-info-color:var(--p-blue-500);--p-inlinemessage-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);}"
-    },
-    {
-        "name": "inlinemessage-style",
-        "value": ".p-inlinemessage{display:inline-flex;align-items:center;justify-content:center;padding:var(--p-inlinemessage-padding);border-radius:var(--p-inlinemessage-border-radius);gap:var(--p-inlinemessage-gap);}.p-inlinemessage-text{font-weight:var(--p-inlinemessage-text-font-weight);}.p-inlinemessage-icon{flex-shrink:0;font-size:var(--p-inlinemessage-icon-size);width:var(--p-inlinemessage-icon-size);height:var(--p-inlinemessage-icon-size);}.p-inlinemessage-icon-only .p-inlinemessage-text{visibility:hidden;width:0;}.p-inlinemessage-info{background:var(--p-inlinemessage-info-background);border:1px solid var(--p-inlinemessage-info-border-color);color:var(--p-inlinemessage-info-color);box-shadow:var(--p-inlinemessage-info-shadow);}.p-inlinemessage-info .p-inlinemessage-icon{color:var(--p-inlinemessage-info-color);}.p-inlinemessage-success{background:var(--p-inlinemessage-success-background);border:1px solid var(--p-inlinemessage-success-border-color);color:var(--p-inlinemessage-success-color);box-shadow:var(--p-inlinemessage-success-shadow);}.p-inlinemessage-success .p-inlinemessage-icon{color:var(--p-inlinemessage-success-color);}.p-inlinemessage-warn{background:var(--p-inlinemessage-warn-background);border:1px solid var(--p-inlinemessage-warn-border-color);color:var(--p-inlinemessage-warn-color);box-shadow:var(--p-inlinemessage-warn-shadow);}.p-inlinemessage-warn .p-inlinemessage-icon{color:var(--p-inlinemessage-warn-color);}.p-inlinemessage-error{background:var(--p-inlinemessage-error-background);border:1px solid var(--p-inlinemessage-error-border-color);color:var(--p-inlinemessage-error-color);box-shadow:var(--p-inlinemessage-error-shadow);}.p-inlinemessage-error .p-inlinemessage-icon{color:var(--p-inlinemessage-error-color);}.p-inlinemessage-secondary{background:var(--p-inlinemessage-secondary-background);border:1px solid var(--p-inlinemessage-secondary-border-color);color:var(--p-inlinemessage-secondary-color);box-shadow:var(--p-inlinemessage-secondary-shadow);}.p-inlinemessage-secondary .p-inlinemessage-icon{color:var(--p-inlinemessage-secondary-color);}.p-inlinemessage-contrast{background:var(--p-inlinemessage-contrast-background);border:1px solid var(--p-inlinemessage-contrast-border-color);color:var(--p-inlinemessage-contrast-color);box-shadow:var(--p-inlinemessage-contrast-shadow);}.p-inlinemessage-contrast .p-inlinemessage-icon{color:var(--p-inlinemessage-contrast-color);}"
-    },
-    {
-        "name": "toast-variables",
-        "value": ":root,:host{--p-toast-close-icon-size:1rem;--p-toast-close-button-width:1.75rem;--p-toast-close-button-height:1.75rem;--p-toast-close-button-border-radius:50%;--p-toast-close-button-focus-ring-width:var(--p-focus-ring-width);--p-toast-close-button-focus-ring-style:var(--p-focus-ring-style);--p-toast-close-button-focus-ring-offset:var(--p-focus-ring-offset);--p-toast-detail-font-weight:500;--p-toast-detail-font-size:0.875rem;--p-toast-summary-font-weight:500;--p-toast-summary-font-size:1rem;--p-toast-text-gap:0.5rem;--p-toast-content-padding:var(--p-overlay-popover-padding);--p-toast-content-gap:0.5rem;--p-toast-icon-size:1.125rem;--p-toast-width:25rem;--p-toast-border-radius:var(--p-content-border-radius);--p-toast-border-width:1px;--p-toast-transition-duration:var(--p-transition-duration);--p-toast-contrast-background:var(--p-surface-900);--p-toast-contrast-border-color:var(--p-surface-950);--p-toast-contrast-color:var(--p-surface-50);--p-toast-contrast-detail-color:var(--p-surface-0);--p-toast-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-toast-contrast-close-button-hover-background:var(--p-surface-800);--p-toast-contrast-close-button-focus-ring-color:var(--p-surface-50);--p-toast-contrast-close-button-focus-ring-shadow:none;--p-toast-secondary-background:var(--p-surface-100);--p-toast-secondary-border-color:var(--p-surface-200);--p-toast-secondary-color:var(--p-surface-600);--p-toast-secondary-detail-color:var(--p-surface-700);--p-toast-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-toast-secondary-close-button-hover-background:var(--p-surface-200);--p-toast-secondary-close-button-focus-ring-color:var(--p-surface-600);--p-toast-secondary-close-button-focus-ring-shadow:none;--p-toast-error-background:color-mix(in srgb,var(--p-red-50),transparent 5%);--p-toast-error-border-color:var(--p-red-200);--p-toast-error-color:var(--p-red-600);--p-toast-error-detail-color:var(--p-surface-700);--p-toast-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-toast-error-close-button-hover-background:var(--p-red-100);--p-toast-error-close-button-focus-ring-color:var(--p-red-600);--p-toast-error-close-button-focus-ring-shadow:none;--p-toast-warn-background:color-mix(in srgb,var(--p-yellow-50),transparent 5%);--p-toast-warn-border-color:var(--p-yellow-200);--p-toast-warn-color:var(--p-yellow-600);--p-toast-warn-detail-color:var(--p-surface-700);--p-toast-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-toast-warn-close-button-hover-background:var(--p-yellow-100);--p-toast-warn-close-button-focus-ring-color:var(--p-yellow-600);--p-toast-warn-close-button-focus-ring-shadow:none;--p-toast-success-background:color-mix(in srgb,var(--p-green-50),transparent 5%);--p-toast-success-border-color:var(--p-green-200);--p-toast-success-color:var(--p-green-600);--p-toast-success-detail-color:var(--p-surface-700);--p-toast-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-toast-success-close-button-hover-background:var(--p-green-100);--p-toast-success-close-button-focus-ring-color:var(--p-green-600);--p-toast-success-close-button-focus-ring-shadow:none;--p-toast-info-background:color-mix(in srgb,var(--p-blue-50),transparent 5%);--p-toast-info-border-color:var(--p-blue-200);--p-toast-info-color:var(--p-blue-600);--p-toast-info-detail-color:var(--p-surface-700);--p-toast-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);--p-toast-info-close-button-hover-background:var(--p-blue-100);--p-toast-info-close-button-focus-ring-color:var(--p-blue-600);--p-toast-info-close-button-focus-ring-shadow:none;--p-toast-blur:1.5px;}.p-dark{--p-toast-contrast-background:var(--p-surface-0);--p-toast-contrast-border-color:var(--p-surface-100);--p-toast-contrast-color:var(--p-surface-950);--p-toast-contrast-detail-color:var(--p-surface-950);--p-toast-contrast-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-950),transparent 96%);--p-toast-contrast-close-button-hover-background:var(--p-surface-100);--p-toast-contrast-close-button-focus-ring-color:var(--p-surface-950);--p-toast-contrast-close-button-focus-ring-shadow:none;--p-toast-secondary-background:var(--p-surface-800);--p-toast-secondary-border-color:var(--p-surface-700);--p-toast-secondary-color:var(--p-surface-300);--p-toast-secondary-detail-color:var(--p-surface-0);--p-toast-secondary-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-surface-500),transparent 96%);--p-toast-secondary-close-button-hover-background:var(--p-surface-700);--p-toast-secondary-close-button-focus-ring-color:var(--p-surface-300);--p-toast-secondary-close-button-focus-ring-shadow:none;--p-toast-error-background:color-mix(in srgb,var(--p-red-500),transparent 84%);--p-toast-error-border-color:color-mix(in srgb,var(--p-red-700),transparent 64%);--p-toast-error-color:var(--p-red-500);--p-toast-error-detail-color:var(--p-surface-0);--p-toast-error-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-red-500),transparent 96%);--p-toast-error-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-error-close-button-focus-ring-color:var(--p-red-500);--p-toast-error-close-button-focus-ring-shadow:none;--p-toast-warn-background:color-mix(in srgb,var(--p-yellow-500),transparent 84%);--p-toast-warn-border-color:color-mix(in srgb,var(--p-yellow-700),transparent 64%);--p-toast-warn-color:var(--p-yellow-500);--p-toast-warn-detail-color:var(--p-surface-0);--p-toast-warn-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-yellow-500),transparent 96%);--p-toast-warn-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-warn-close-button-focus-ring-color:var(--p-yellow-500);--p-toast-warn-close-button-focus-ring-shadow:none;--p-toast-success-background:color-mix(in srgb,var(--p-green-500),transparent 84%);--p-toast-success-border-color:color-mix(in srgb,var(--p-green-700),transparent 64%);--p-toast-success-color:var(--p-green-500);--p-toast-success-detail-color:var(--p-surface-0);--p-toast-success-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-green-500),transparent 96%);--p-toast-success-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-success-close-button-focus-ring-color:var(--p-green-500);--p-toast-success-close-button-focus-ring-shadow:none;--p-toast-info-background:color-mix(in srgb,var(--p-blue-500),transparent 84%);--p-toast-info-border-color:color-mix(in srgb,var(--p-blue-700),transparent 64%);--p-toast-info-color:var(--p-blue-500);--p-toast-info-detail-color:var(--p-surface-0);--p-toast-info-shadow:0px 4px 8px 0px color-mix(in srgb,var(--p-blue-500),transparent 96%);--p-toast-info-close-button-hover-background:rgba(255,255,255,0.05);--p-toast-info-close-button-focus-ring-color:var(--p-blue-500);--p-toast-info-close-button-focus-ring-shadow:none;--p-toast-blur:10px;}"
-    },
-    {
-        "name": "toast-style",
-        "value": ".p-toast{width:var(--p-toast-width);white-space:pre-line;word-break:break-word;}.p-toast-message{margin:0 0 1rem 0;display:grid;grid-template-rows:1fr;}.p-toast-message-icon{flex-shrink:0;font-size:var(--p-toast-icon-size);width:var(--p-toast-icon-size);height:var(--p-toast-icon-size);}.p-toast-message-content{display:flex;align-items:flex-start;padding:var(--p-toast-content-padding);gap:var(--p-toast-content-gap);min-height:0;overflow:hidden;transition:padding 250ms ease-in;}.p-toast-message-text{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--p-toast-text-gap);}.p-toast-summary{font-weight:var(--p-toast-summary-font-weight);font-size:var(--p-toast-summary-font-size);}.p-toast-detail{font-weight:var(--p-toast-detail-font-weight);font-size:var(--p-toast-detail-font-size);}.p-toast-close-button{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;cursor:pointer;background:transparent;transition:background var(--p-toast-transition-duration),color var(--p-toast-transition-duration),outline-color var(--p-toast-transition-duration),box-shadow var(--p-toast-transition-duration);outline-color:transparent;color:inherit;width:var(--p-toast-close-button-width);height:var(--p-toast-close-button-height);border-radius:var(--p-toast-close-button-border-radius);margin:-25% 0 0 0;right:-25%;padding:0;border:none;user-select:none;}.p-toast-close-button:dir(rtl){margin:-25% 0 0 auto;left:-25%;right:auto;}.p-toast-message-info,.p-toast-message-success,.p-toast-message-warn,.p-toast-message-error,.p-toast-message-secondary,.p-toast-message-contrast{border-width:var(--p-toast-border-width);border-style:solid;backdrop-filter:blur(var(--p-toast-blur));border-radius:var(--p-toast-border-radius);}.p-toast-close-icon{font-size:var(--p-toast-close-icon-size);width:var(--p-toast-close-icon-size);height:var(--p-toast-close-icon-size);}.p-toast-close-button:focus-visible{outline-width:var(--p-focus-ring-width);outline-style:var(--p-focus-ring-style);outline-offset:var(--p-focus-ring-offset);}.p-toast-message-info{background:var(--p-toast-info-background);border-color:var(--p-toast-info-border-color);color:var(--p-toast-info-color);box-shadow:var(--p-toast-info-shadow);}.p-toast-message-info .p-toast-detail{color:var(--p-toast-info-detail-color);}.p-toast-message-info .p-toast-close-button:focus-visible{outline-color:var(--p-toast-info-close-button-focus-ring-color);box-shadow:var(--p-toast-info-close-button-focus-ring-shadow);}.p-toast-message-info .p-toast-close-button:hover{background:var(--p-toast-info-close-button-hover-background);}.p-toast-message-success{background:var(--p-toast-success-background);border-color:var(--p-toast-success-border-color);color:var(--p-toast-success-color);box-shadow:var(--p-toast-success-shadow);}.p-toast-message-success .p-toast-detail{color:var(--p-toast-success-detail-color);}.p-toast-message-success .p-toast-close-button:focus-visible{outline-color:var(--p-toast-success-close-button-focus-ring-color);box-shadow:var(--p-toast-success-close-button-focus-ring-shadow);}.p-toast-message-success .p-toast-close-button:hover{background:var(--p-toast-success-close-button-hover-background);}.p-toast-message-warn{background:var(--p-toast-warn-background);border-color:var(--p-toast-warn-border-color);color:var(--p-toast-warn-color);box-shadow:var(--p-toast-warn-shadow);}.p-toast-message-warn .p-toast-detail{color:var(--p-toast-warn-detail-color);}.p-toast-message-warn .p-toast-close-button:focus-visible{outline-color:var(--p-toast-warn-close-button-focus-ring-color);box-shadow:var(--p-toast-warn-close-button-focus-ring-shadow);}.p-toast-message-warn .p-toast-close-button:hover{background:var(--p-toast-warn-close-button-hover-background);}.p-toast-message-error{background:var(--p-toast-error-background);border-color:var(--p-toast-error-border-color);color:var(--p-toast-error-color);box-shadow:var(--p-toast-error-shadow);}.p-toast-message-error .p-toast-detail{color:var(--p-toast-error-detail-color);}.p-toast-message-error .p-toast-close-button:focus-visible{outline-color:var(--p-toast-error-close-button-focus-ring-color);box-shadow:var(--p-toast-error-close-button-focus-ring-shadow);}.p-toast-message-error .p-toast-close-button:hover{background:var(--p-toast-error-close-button-hover-background);}.p-toast-message-secondary{background:var(--p-toast-secondary-background);border-color:var(--p-toast-secondary-border-color);color:var(--p-toast-secondary-color);box-shadow:var(--p-toast-secondary-shadow);}.p-toast-message-secondary .p-toast-detail{color:var(--p-toast-secondary-detail-color);}.p-toast-message-secondary .p-toast-close-button:focus-visible{outline-color:var(--p-toast-secondary-close-button-focus-ring-color);box-shadow:var(--p-toast-secondary-close-button-focus-ring-shadow);}.p-toast-message-secondary .p-toast-close-button:hover{background:var(--p-toast-secondary-close-button-hover-background);}.p-toast-message-contrast{background:var(--p-toast-contrast-background);border-color:var(--p-toast-contrast-border-color);color:var(--p-toast-contrast-color);box-shadow:var(--p-toast-contrast-shadow);}.p-toast-message-contrast .p-toast-detail{color:var(--p-toast-contrast-detail-color);}.p-toast-message-contrast .p-toast-close-button:focus-visible{outline-color:var(--p-toast-contrast-close-button-focus-ring-color);box-shadow:var(--p-toast-contrast-close-button-focus-ring-shadow);}.p-toast-message-contrast .p-toast-close-button:hover{background:var(--p-toast-contrast-close-button-hover-background);}.p-toast-top-center{transform:translateX(-50%);}.p-toast-bottom-center{transform:translateX(-50%);}.p-toast-center{min-width:20vw;transform:translate(-50%,-50%);}.p-toast-message-enter-active{animation:p-animate-toast-enter 300ms ease-out;}.p-toast-message-leave-active{animation:p-animate-toast-leave 250ms ease-in;}.p-toast-message-leave-to .p-toast-message-content{padding-top:0;padding-bottom:0;}@keyframes p-animate-toast-enter{from{opacity:0;transform:scale(0.6);}to{opacity:1;grid-template-rows:1fr;}} @keyframes p-animate-toast-leave{from{opacity:1;}to{opacity:0;margin-bottom:0;grid-template-rows:0fr;transform:translateY(-100%) scale(0.6);}}"
-    },
-    {
-        "name": "carousel-variables",
-        "value": ":root,:host{--p-carousel-indicator-width:2rem;--p-carousel-indicator-height:0.5rem;--p-carousel-indicator-border-radius:var(--p-content-border-radius);--p-carousel-indicator-focus-ring-width:var(--p-focus-ring-width);--p-carousel-indicator-focus-ring-style:var(--p-focus-ring-style);--p-carousel-indicator-focus-ring-color:var(--p-focus-ring-color);--p-carousel-indicator-focus-ring-offset:var(--p-focus-ring-offset);--p-carousel-indicator-focus-ring-shadow:var(--p-focus-ring-shadow);--p-carousel-indicator-list-padding:1rem;--p-carousel-indicator-list-gap:0.5rem;--p-carousel-content-gap:0.25rem;--p-carousel-transition-duration:var(--p-transition-duration);--p-carousel-indicator-background:var(--p-surface-200);--p-carousel-indicator-hover-background:var(--p-surface-300);--p-carousel-indicator-active-background:var(--p-primary-color);}.p-dark{--p-carousel-indicator-background:var(--p-surface-700);--p-carousel-indicator-hover-background:var(--p-surface-600);--p-carousel-indicator-active-background:var(--p-primary-color);}"
-    },
-    {
-        "name": "carousel-style",
-        "value": ".p-carousel{display:flex;flex-direction:column;}.p-carousel-content-container{display:flex;flex-direction:column;overflow:auto;}.p-carousel-content{display:flex;flex-direction:row;gap:var(--p-carousel-content-gap);}.p-carousel-content:dir(rtl){flex-direction:row-reverse;}.p-carousel-viewport{overflow:hidden;width:100%;}.p-carousel-item-list{display:flex;flex-direction:row;}.p-carousel-item-list:dir(rtl){flex-direction:row-reverse;}.p-carousel-prev-button,.p-carousel-next-button{align-self:center;flex-shrink:0;}.p-carousel-indicator-list{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:var(--p-carousel-indicator-list-padding);gap:var(--p-carousel-indicator-list-gap);margin:0;list-style:none;}.p-carousel-indicator-button{display:flex;align-items:center;justify-content:center;background:var(--p-carousel-indicator-background);width:var(--p-carousel-indicator-width);height:var(--p-carousel-indicator-height);border:0 none;transition:background var(--p-carousel-transition-duration),color var(--p-carousel-transition-duration),outline-color var(--p-carousel-transition-duration),box-shadow var(--p-carousel-transition-duration);outline-color:transparent;border-radius:var(--p-carousel-indicator-border-radius);padding:0;margin:0;user-select:none;cursor:pointer;}.p-carousel-indicator-button:focus-visible{box-shadow:var(--p-carousel-indicator-focus-ring-shadow);outline:var(--p-carousel-indicator-focus-ring-width) var(--p-carousel-indicator-focus-ring-style) var(--p-carousel-indicator-focus-ring-color);outline-offset:var(--p-carousel-indicator-focus-ring-offset);}.p-carousel-indicator-button:hover{background:var(--p-carousel-indicator-hover-background);}.p-carousel-indicator-active .p-carousel-indicator-button{background:var(--p-carousel-indicator-active-background);}.p-carousel-vertical .p-carousel-content{flex-direction:column;}.p-carousel-vertical .p-carousel-item-list{flex-direction:column;height:100%;}.p-items-hidden .p-carousel-item{visibility:hidden;}.p-items-hidden .p-carousel-item.p-carousel-item-active{visibility:visible;}"
-    },
-    {
-        "name": "galleria-variables",
-        "value": ":root,:host{--p-galleria-close-button-icon-size:1.5rem;--p-galleria-close-button-size:3rem;--p-galleria-close-button-gutter:0.5rem;--p-galleria-close-button-background:rgba(255,255,255,0.1);--p-galleria-close-button-hover-background:rgba(255,255,255,0.2);--p-galleria-close-button-color:var(--p-surface-50);--p-galleria-close-button-hover-color:var(--p-surface-0);--p-galleria-close-button-border-radius:50%;--p-galleria-close-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-close-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-close-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-close-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-close-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-inset-indicator-button-background:rgba(255,255,255,0.4);--p-galleria-inset-indicator-button-hover-background:rgba(255,255,255,0.6);--p-galleria-inset-indicator-button-active-background:rgba(255,255,255,0.9);--p-galleria-inset-indicator-list-background:rgba(0,0,0,0.5);--p-galleria-indicator-button-width:1rem;--p-galleria-indicator-button-height:1rem;--p-galleria-indicator-button-active-background:var(--p-primary-color);--p-galleria-indicator-button-border-radius:50%;--p-galleria-indicator-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-indicator-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-indicator-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-indicator-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-indicator-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-indicator-list-gap:0.5rem;--p-galleria-indicator-list-padding:1rem;--p-galleria-caption-background:rgba(0,0,0,0.5);--p-galleria-caption-color:var(--p-surface-100);--p-galleria-caption-padding:1rem;--p-galleria-thumbnail-nav-button-icon-size:1rem;--p-galleria-thumbnail-nav-button-size:2rem;--p-galleria-thumbnail-nav-button-border-radius:var(--p-content-border-radius);--p-galleria-thumbnail-nav-button-gutter:0.5rem;--p-galleria-thumbnail-nav-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-thumbnail-nav-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-thumbnail-nav-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-thumbnail-nav-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-thumbnail-nav-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-thumbnails-content-background:var(--p-content-background);--p-galleria-thumbnails-content-padding:1rem 0.25rem;--p-galleria-nav-icon-size:1.5rem;--p-galleria-nav-button-background:rgba(255,255,255,0.1);--p-galleria-nav-button-hover-background:rgba(255,255,255,0.2);--p-galleria-nav-button-color:var(--p-surface-100);--p-galleria-nav-button-hover-color:var(--p-surface-0);--p-galleria-nav-button-size:3rem;--p-galleria-nav-button-gutter:0.5rem;--p-galleria-nav-button-focus-ring-width:var(--p-focus-ring-width);--p-galleria-nav-button-focus-ring-style:var(--p-focus-ring-style);--p-galleria-nav-button-focus-ring-color:var(--p-focus-ring-color);--p-galleria-nav-button-focus-ring-offset:var(--p-focus-ring-offset);--p-galleria-nav-button-focus-ring-shadow:var(--p-focus-ring-shadow);--p-galleria-nav-button-next-border-radius:50%;--p-galleria-nav-button-prev-border-radius:50%;--p-galleria-border-width:1px;--p-galleria-border-color:var(--p-content-border-color);--p-galleria-border-radius:var(--p-content-border-radius);--p-galleria-transition-duration:var(--p-transition-duration);--p-galleria-indicator-button-background:var(--p-surface-200);--p-galleria-indicator-button-hover-background:var(--p-surface-300);--p-galleria-thumbnail-nav-button-hover-background:var(--p-surface-100);--p-galleria-thumbnail-nav-button-color:var(--p-surface-600);--p-galleria-thumbnail-nav-button-hover-color:var(--p-surface-700);}.p-dark{--p-galleria-indicator-button-background:var(--p-surface-700);--p-galleria-indicator-button-hover-background:var(--p-surface-600);--p-galleria-thumbnail-nav-button-hover-background:var(--p-surface-700);--p-galleria-thumbnail-nav-button-color:var(--p-surface-400);--p-galleria-thumbnail-nav-button-hover-color:var(--p-surface-0);}"
-    },
-    {
-        "name": "galleria-style",
-        "value": ".p-galleria{overflow:hidden;border-style:solid;border-width:var(--p-galleria-border-width);border-color:var(--p-galleria-border-color);border-radius:var(--p-galleria-border-radius);}.p-galleria-content{display:flex;flex-direction:column;}.p-galleria-items-container{display:flex;flex-direction:column;position:relative;}.p-galleria-items{position:relative;display:flex;height:100%;}.p-galleria-nav-button{position:absolute!important;top:50%;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;background:var(--p-galleria-nav-button-background);color:var(--p-galleria-nav-button-color);width:var(--p-galleria-nav-button-size);height:var(--p-galleria-nav-button-size);transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration),box-shadow var(--p-galleria-transition-duration);margin:calc(-1 * calc(var(--p-galleria-nav-button-size)) / 2) var(--p-galleria-nav-button-gutter) 0 var(--p-galleria-nav-button-gutter);padding:0;user-select:none;border:0 none;cursor:pointer;outline-color:transparent;}.p-galleria-nav-button:not(.p-disabled):hover{background:var(--p-galleria-nav-button-hover-background);color:var(--p-galleria-nav-button-hover-color);}.p-galleria-nav-button:not(.p-disabled):focus-visible{box-shadow:var(--p-galleria-nav-button-focus-ring-shadow);outline:var(--p-galleria-nav-button-focus-ring-width) var(--p-galleria-nav-button-focus-ring-style) var(--p-galleria-nav-button-focus-ring-color);outline-offset:var(--p-galleria-nav-button-focus-ring-offset);}.p-galleria-next-icon,.p-galleria-prev-icon{font-size:var(--p-galleria-nav-icon-size);width:var(--p-galleria-nav-icon-size);height:var(--p-galleria-nav-icon-size);}.p-galleria-prev-button{border-radius:var(--p-galleria-nav-button-prev-border-radius);left:0;}.p-galleria-next-button{border-radius:var(--p-galleria-nav-button-next-border-radius);right:0;}.p-galleria-prev-button:dir(rtl){left:auto;right:0;transform:rotate(180deg);}.p-galleria-next-button:dir(rtl){right:auto;left:0;transform:rotate(180deg);}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%;}.p-galleria-hover-navigators .p-galleria-nav-button{pointer-events:none;opacity:0;transition:opacity var(--p-galleria-transition-duration) ease-in-out;}.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button{pointer-events:all;opacity:1;}.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled{pointer-events:none;}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%;background:var(--p-galleria-caption-background);color:var(--p-galleria-caption-color);padding:var(--p-galleria-caption-padding);}.p-galleria-thumbnails{display:flex;flex-direction:column;overflow:auto;flex-shrink:0;}.p-galleria-thumbnail-nav-button{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:0 var(--p-galleria-thumbnail-nav-button-gutter);padding:0;border:none;user-select:none;cursor:pointer;background:transparent;color:var(--p-galleria-thumbnail-nav-button-color);width:var(--p-galleria-thumbnail-nav-button-size);height:var(--p-galleria-thumbnail-nav-button-size);transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration);outline-color:transparent;border-radius:var(--p-galleria-thumbnail-nav-button-border-radius);}.p-galleria-thumbnail-nav-button:hover{background:var(--p-galleria-thumbnail-nav-button-hover-background);color:var(--p-galleria-thumbnail-nav-button-hover-color);}.p-galleria-thumbnail-nav-button:focus-visible{box-shadow:var(--p-galleria-thumbnail-nav-button-focus-ring-shadow);outline:var(--p-galleria-thumbnail-nav-button-focus-ring-width) var(--p-galleria-thumbnail-nav-button-focus-ring-style) var(--p-galleria-thumbnail-nav-button-focus-ring-color);outline-offset:var(--p-galleria-thumbnail-nav-button-focus-ring-offset);}.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon{font-size:var(--p-galleria-thumbnail-nav-button-icon-size);width:var(--p-galleria-thumbnail-nav-button-icon-size);height:var(--p-galleria-thumbnail-nav-button-icon-size);}.p-galleria-thumbnails-content{display:flex;flex-direction:row;background:var(--p-galleria-thumbnails-content-background);padding:var(--p-galleria-thumbnails-content-padding);}.p-galleria-thumbnails-viewport{overflow:hidden;width:100%;}.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl){transform:rotate(180deg);}.p-galleria-thumbnail-items{display:flex;}.p-galleria-thumbnail-items:dir(rtl){flex-direction:row-reverse;}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.5;}.p-galleria-thumbnail{outline-color:transparent;}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity 0.3s;}.p-galleria-thumbnail-item-current{opacity:1;}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content{flex-direction:row;}.p-galleria-thumbnails-left .p-galleria-items-container,.p-galleria-thumbnails-right .p-galleria-items-container{flex-direction:row;}.p-galleria-thumbnails-left .p-galleria-items-container,.p-galleria-thumbnails-top .p-galleria-items-container{order:2;}.p-galleria-thumbnails-left .p-galleria-thumbnails,.p-galleria-thumbnails-top .p-galleria-thumbnails{order:1;}.p-galleria-thumbnails-left .p-galleria-thumbnails-content,.p-galleria-thumbnails-right .p-galleria-thumbnails-content{flex-direction:column;flex-grow:1;}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%;}.p-galleria-indicator-list{display:flex;align-items:center;justify-content:center;padding:var(--p-galleria-indicator-list-padding);gap:var(--p-galleria-indicator-list-gap);margin:0;list-style:none;}.p-galleria-indicator-button{display:inline-flex;align-items:center;background:var(--p-galleria-indicator-button-background);width:var(--p-galleria-indicator-button-width);height:var(--p-galleria-indicator-button-height);transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration),box-shadow var(--p-galleria-transition-duration);outline-color:transparent;border-radius:var(--p-galleria-indicator-button-border-radius);margin:0;padding:0;border:none;user-select:none;cursor:pointer;}.p-galleria-indicator-button:hover{background:var(--p-galleria-indicator-button-hover-background);}.p-galleria-indicator-button:focus-visible{box-shadow:var(--p-galleria-indicator-button-focus-ring-shadow);outline:var(--p-galleria-indicator-button-focus-ring-width) var(--p-galleria-indicator-button-focus-ring-style) var(--p-galleria-indicator-button-focus-ring-color);outline-offset:var(--p-galleria-indicator-button-focus-ring-offset);}.p-galleria-indicator-active .p-galleria-indicator-button{background:var(--p-galleria-indicator-button-active-background);}.p-galleria-indicators-left .p-galleria-items-container,.p-galleria-indicators-right .p-galleria-items-container{flex-direction:row;align-items:center;}.p-galleria-indicators-left .p-galleria-items,.p-galleria-indicators-top .p-galleria-items{order:2;}.p-galleria-indicators-left .p-galleria-indicator-list,.p-galleria-indicators-top .p-galleria-indicator-list{order:1;}.p-galleria-indicators-left .p-galleria-indicator-list,.p-galleria-indicators-right .p-galleria-indicator-list{flex-direction:column;}.p-galleria-inset-indicators .p-galleria-indicator-list{position:absolute;display:flex;z-index:1;background:var(--p-galleria-inset-indicator-list-background);}.p-galleria-inset-indicators .p-galleria-indicator-button{background:var(--p-galleria-inset-indicator-button-background);}.p-galleria-inset-indicators .p-galleria-indicator-button:hover{background:var(--p-galleria-inset-indicator-button-hover-background);}.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button{background:var(--p-galleria-inset-indicator-button-active-background);}.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list{top:0;left:0;width:100%;align-items:flex-start;}.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list{right:0;top:0;height:100%;align-items:flex-end;}.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list{bottom:0;left:0;width:100%;align-items:flex-end;}.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list{left:0;top:0;height:100%;align-items:flex-start;}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.p-galleria-close-button{position:absolute!important;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:var(--p-galleria-close-button-gutter);background:var(--p-galleria-close-button-background);color:var(--p-galleria-close-button-color);width:var(--p-galleria-close-button-size);height:var(--p-galleria-close-button-size);padding:0;border:none;user-select:none;cursor:pointer;border-radius:var(--p-galleria-close-button-border-radius);outline-color:transparent;transition:background var(--p-galleria-transition-duration),color var(--p-galleria-transition-duration),outline-color var(--p-galleria-transition-duration);}.p-galleria-close-icon{font-size:var(--p-galleria-close-button-icon-size);width:var(--p-galleria-close-button-icon-size);height:var(--p-galleria-close-button-icon-size);}.p-galleria-close-button:hover{background:var(--p-galleria-close-button-hover-background);color:var(--p-galleria-close-button-hover-color);}.p-galleria-close-button:focus-visible{box-shadow:var(--p-galleria-close-button-focus-ring-shadow);outline:var(--p-galleria-close-button-focus-ring-width) var(--p-galleria-close-button-focus-ring-style) var(--p-galleria-close-button-focus-ring-color);outline-offset:var(--p-galleria-close-button-focus-ring-offset);}.p-galleria-mask .p-galleria-nav-button{position:fixed;top:50%;}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden;}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible;}.p-galleria-enter-active{animation:p-animate-galleria-enter 300ms cubic-bezier(.19,1,.22,1);}.p-galleria-leave-active{animation:p-animate-galleria-leave 300ms cubic-bezier(.19,1,.22,1);}.p-galleria-enter-active .p-galleria-nav-button{opacity:0;}@keyframes p-animate-galleria-enter{from{opacity:0;transform:scale(0.93);}} @keyframes p-animate-galleria-leave{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(0.93);}}"
-    },
-    {
-        "name": "image-variables",
-        "value": ":root,:host{--p-image-action-hover-background:rgba(255,255,255,0.1);--p-image-action-color:var(--p-surface-50);--p-image-action-hover-color:var(--p-surface-0);--p-image-action-size:3rem;--p-image-action-icon-size:1.5rem;--p-image-action-border-radius:50%;--p-image-action-focus-ring-width:var(--p-focus-ring-width);--p-image-action-focus-ring-style:var(--p-focus-ring-style);--p-image-action-focus-ring-color:var(--p-focus-ring-color);--p-image-action-focus-ring-offset:var(--p-focus-ring-offset);--p-image-action-focus-ring-shadow:var(--p-focus-ring-shadow);--p-image-toolbar-blur:8px;--p-image-toolbar-background:rgba(255,255,255,0.1);--p-image-toolbar-border-color:rgba(255,255,255,0.2);--p-image-toolbar-border-width:1px;--p-image-toolbar-border-radius:30px;--p-image-toolbar-padding:.5rem;--p-image-toolbar-gap:0.5rem;--p-image-toolbar-position-left:auto;--p-image-toolbar-position-right:1rem;--p-image-toolbar-position-top:1rem;--p-image-toolbar-position-bottom:auto;--p-image-preview-mask-background:var(--p-mask-background);--p-image-preview-mask-color:var(--p-mask-color);--p-image-preview-icon-size:1.5rem;--p-image-transition-duration:var(--p-transition-duration);}"
-    },
-    {
-        "name": "image-style",
-        "value": ".p-image-mask{display:flex;align-items:center;justify-content:center;}.p-image-preview{position:relative;display:inline-flex;line-height:0;}.p-image-preview-mask{position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;border:0 none;padding:0;cursor:pointer;background:transparent;color:var(--p-image-preview-mask-color);transition:background var(--p-image-transition-duration);}.p-image-preview:hover > .p-image-preview-mask,.p-image-preview-mask:focus-visible{opacity:1;cursor:pointer;background:var(--p-image-preview-mask-background);outline:0 none;}.p-image-preview-icon{font-size:var(--p-image-preview-icon-size);width:var(--p-image-preview-icon-size);height:var(--p-image-preview-icon-size);}.p-image-toolbar{position:absolute;inset-block-start:var(--p-image-toolbar-position-top);inset-inline-end:var(--p-image-toolbar-position-right);inset-inline-start:var(--p-image-toolbar-position-left);inset-block-end:var(--p-image-toolbar-position-bottom);display:flex;z-index:1;padding:var(--p-image-toolbar-padding);background:var(--p-image-toolbar-background);backdrop-filter:blur(var(--p-image-toolbar-blur));border-color:var(--p-image-toolbar-border-color);border-style:solid;border-width:var(--p-image-toolbar-border-width);border-radius:var(--p-image-toolbar-border-radius);gap:var(--p-image-toolbar-gap);}.p-image-action{display:inline-flex;justify-content:center;align-items:center;color:var(--p-image-action-color);background:transparent;width:var(--p-image-action-size);height:var(--p-image-action-size);margin:0;padding:0;border:0 none;cursor:pointer;user-select:none;border-radius:var(--p-image-action-border-radius);outline-color:transparent;transition:background var(--p-image-transition-duration),color var(--p-image-transition-duration),outline-color var(--p-image-transition-duration),box-shadow var(--p-image-transition-duration);}.p-image-action:hover{color:var(--p-image-action-hover-color);background:var(--p-image-action-hover-background);}.p-image-action:focus-visible{box-shadow:var(--p-image-action-focus-ring-shadow);outline:var(--p-image-action-focus-ring-width) var(--p-image-action-focus-ring-style) var(--p-image-action-focus-ring-color);outline-offset:var(--p-image-action-focus-ring-offset);}.p-image-action .p-icon{font-size:var(--p-image-action-icon-size);width:var(--p-image-action-icon-size);height:var(--p-image-action-icon-size);}.p-image-action.p-disabled{pointer-events:auto;}.p-image-original{max-width:100vw;max-height:100vh;transition:transform 300ms;}.p-image-original-enter-active{animation:p-animate-image-original-enter 300ms cubic-bezier(.19,1,.22,1);}.p-image-original-leave-active{animation:p-animate-image-original-leave 300ms cubic-bezier(.19,1,.22,1);}@keyframes p-animate-image-original-enter{from{opacity:0;transform:scale(0.93);}} @keyframes p-animate-image-original-leave{to{opacity:0;transform:scale(0.93);}}"
-    },
-    {
-        "name": "imagecompare-variables",
-        "value": ":root,:host{--p-imagecompare-handle-size:15px;--p-imagecompare-handle-hover-size:30px;--p-imagecompare-handle-background:rgba(255,255,255,0.3);--p-imagecompare-handle-hover-background:rgba(255,255,255,0.3);--p-imagecompare-handle-border-color:unset;--p-imagecompare-handle-hover-border-color:unset;--p-imagecompare-handle-border-width:0;--p-imagecompare-handle-border-radius:50%;--p-imagecompare-handle-transition-duration:var(--p-transition-duration);--p-imagecompare-handle-focus-ring-width:var(--p-focus-ring-width);--p-imagecompare-handle-focus-ring-style:var(--p-focus-ring-style);--p-imagecompare-handle-focus-ring-color:rgba(255,255,255,0.3);--p-imagecompare-handle-focus-ring-offset:var(--p-focus-ring-offset);--p-imagecompare-handle-focus-ring-shadow:var(--p-focus-ring-shadow);}"
-    },
-    {
-        "name": "imagecompare-style",
-        "value": ".p-imagecompare{position:relative;overflow:hidden;width:100%;aspect-ratio:16 / 9;}.p-imagecompare img{width:100%;height:100%;position:absolute;}.p-imagecompare img + img{clip-path:polygon(0 0,var(--p-imagecompare-scope-x,50%) 0,var(--p-imagecompare-scope-x,50%) 100%,0 100%);}.p-imagecompare:dir(rtl) img + img{clip-path:polygon(calc(100% - var(--p-imagecompare-scope-x,50%)) 0,100% 0,100% 100%,calc(100% - var(--p-imagecompare-scope-x,50%)) 100%);}.p-imagecompare-slider{position:relative;-webkit-appearance:none;width:calc(100% + var(--p-imagecompare-handle-size));height:100%;margin-inline-start:calc(-1 * calc(var(--p-imagecompare-handle-size) / 2));background-color:transparent;outline:none;transition:all var(--p-imagecompare-handle-transition-duration);}.p-imagecompare-slider::-webkit-slider-thumb{-webkit-appearance:none;height:var(--p-imagecompare-handle-size);width:var(--p-imagecompare-handle-size);background:var(--p-imagecompare-handle-background);border:var(--p-imagecompare-handle-border-width) solid var(--p-imagecompare-handle-border-color);border-radius:var(--p-imagecompare-handle-border-radius);background-size:contain;cursor:ew-resize;transition:all var(--p-imagecompare-handle-transition-duration);}.p-imagecompare-slider::-moz-range-thumb{height:var(--p-imagecompare-handle-size);width:var(--p-imagecompare-handle-size);background:var(--p-imagecompare-handle-background);border:var(--p-imagecompare-handle-border-width) var(--p-imagecompare-handle-border-style) var(--p-imagecompare-handle-border-color);border-radius:var(--p-imagecompare-handle-border-radius);background-size:contain;cursor:ew-resize;}.p-imagecompare-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--p-imagecompare-handle-focus-ring-shadow);outline:var(--p-imagecompare-handle-focus-ring-width) var(--p-imagecompare-handle-focus-ring-style) var(--p-imagecompare-handle-focus-ring-color);outline-offset:var(--p-imagecompare-handle-focus-ring-offset);}.p-imagecompare-slider:focus-visible::-moz-range-thumb{box-shadow:var(--p-imagecompare-handle-focus-ring-shadow);outline:var(--p-imagecompare-handle-focus-ring-width) var(--p-imagecompare-handle-focus-ring-style) var(--p-imagecompare-handle-focus-ring-color);outline-offset:var(--p-imagecompare-handle-focus-ring-offset);}.p-imagecompare-slider:hover{width:calc(100% + var(--p-imagecompare-handle-hover-size));margin-inline-start:calc(-1 * calc(var(--p-imagecompare-handle-hover-size) / 2));}.p-imagecompare-slider:hover::-webkit-slider-thumb{background:var(--p-imagecompare-handle-hover-background);border-color:var(--p-imagecompare-handle-hover-border-color);height:var(--p-imagecompare-handle-hover-size);width:var(--p-imagecompare-handle-hover-size);}.p-imagecompare-slider:hover::-moz-range-thumb{background:var(--p-imagecompare-handle-hover-background);border-color:var(--p-imagecompare-handle-hover-border-color);height:var(--p-imagecompare-handle-hover-size);width:var(--p-imagecompare-handle-hover-size);}"
-    },
-    {
-        "name": "avatar-variables",
-        "value": ":root,:host{--p-avatar-xl-width:4rem;--p-avatar-xl-height:4rem;--p-avatar-xl-font-size:2rem;--p-avatar-xl-group-offset:-1.5rem;--p-avatar-xl-icon-size:2rem;--p-avatar-lg-width:3rem;--p-avatar-lg-height:3rem;--p-avatar-lg-font-size:1.5rem;--p-avatar-lg-group-offset:-1rem;--p-avatar-lg-icon-size:1.5rem;--p-avatar-group-border-color:var(--p-content-background);--p-avatar-group-offset:-0.75rem;--p-avatar-icon-size:1rem;--p-avatar-width:2rem;--p-avatar-height:2rem;--p-avatar-font-size:1rem;--p-avatar-background:var(--p-content-border-color);--p-avatar-color:var(--p-content-color);--p-avatar-border-radius:var(--p-content-border-radius);}"
-    },
-    {
-        "name": "avatar-style",
-        "value": ".p-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--p-avatar-width);height:var(--p-avatar-height);font-size:var(--p-avatar-font-size);background:var(--p-avatar-background);color:var(--p-avatar-color);border-radius:var(--p-avatar-border-radius);}.p-avatar-image{background:transparent;}.p-avatar-circle{border-radius:50%;}.p-avatar-circle img{border-radius:50%;}.p-avatar-icon{font-size:var(--p-avatar-icon-size);width:var(--p-avatar-icon-size);height:var(--p-avatar-icon-size);}.p-avatar img{width:100%;height:100%;}.p-avatar-lg{width:var(--p-avatar-lg-width);height:var(--p-avatar-lg-width);font-size:var(--p-avatar-lg-font-size);}.p-avatar-lg .p-avatar-icon{font-size:var(--p-avatar-lg-icon-size);width:var(--p-avatar-lg-icon-size);height:var(--p-avatar-lg-icon-size);}.p-avatar-xl{width:var(--p-avatar-xl-width);height:var(--p-avatar-xl-width);font-size:var(--p-avatar-xl-font-size);}.p-avatar-xl .p-avatar-icon{font-size:var(--p-avatar-xl-icon-size);width:var(--p-avatar-xl-icon-size);height:var(--p-avatar-xl-icon-size);}.p-avatar-group{display:flex;align-items:center;}.p-avatar-group .p-avatar + .p-avatar{margin-inline-start:var(--p-avatar-group-offset);}.p-avatar-group .p-avatar{border:2px solid var(--p-avatar-group-border-color);}.p-avatar-group .p-avatar-lg + .p-avatar-lg{margin-inline-start:var(--p-avatar-lg-group-offset);}.p-avatar-group .p-avatar-xl + .p-avatar-xl{margin-inline-start:var(--p-avatar-xl-group-offset);}"
-    },
-    {
-        "name": "badge-variables",
-        "value": ":root,:host{--p-badge-xl-font-size:1rem;--p-badge-xl-min-width:2rem;--p-badge-xl-height:2rem;--p-badge-lg-font-size:0.875rem;--p-badge-lg-min-width:1.75rem;--p-badge-lg-height:1.75rem;--p-badge-sm-font-size:0.625rem;--p-badge-sm-min-width:1.25rem;--p-badge-sm-height:1.25rem;--p-badge-dot-size:0.5rem;--p-badge-border-radius:var(--p-border-radius-md);--p-badge-padding:0 0.5rem;--p-badge-font-size:0.75rem;--p-badge-font-weight:700;--p-badge-min-width:1.5rem;--p-badge-height:1.5rem;--p-badge-contrast-background:var(--p-surface-950);--p-badge-contrast-color:var(--p-surface-0);--p-badge-danger-background:var(--p-red-500);--p-badge-danger-color:var(--p-surface-0);--p-badge-warn-background:var(--p-orange-500);--p-badge-warn-color:var(--p-surface-0);--p-badge-info-background:var(--p-sky-500);--p-badge-info-color:var(--p-surface-0);--p-badge-success-background:var(--p-green-500);--p-badge-success-color:var(--p-surface-0);--p-badge-secondary-background:var(--p-surface-100);--p-badge-secondary-color:var(--p-surface-600);--p-badge-primary-background:var(--p-primary-color);--p-badge-primary-color:var(--p-primary-contrast-color);}.p-dark{--p-badge-contrast-background:var(--p-surface-0);--p-badge-contrast-color:var(--p-surface-950);--p-badge-danger-background:var(--p-red-400);--p-badge-danger-color:var(--p-red-950);--p-badge-warn-background:var(--p-orange-400);--p-badge-warn-color:var(--p-orange-950);--p-badge-info-background:var(--p-sky-400);--p-badge-info-color:var(--p-sky-950);--p-badge-success-background:var(--p-green-400);--p-badge-success-color:var(--p-green-950);--p-badge-secondary-background:var(--p-surface-800);--p-badge-secondary-color:var(--p-surface-300);--p-badge-primary-background:var(--p-primary-color);--p-badge-primary-color:var(--p-primary-contrast-color);}"
-    },
-    {
-        "name": "badge-style",
-        "value": ".p-badge{display:inline-flex;border-radius:var(--p-badge-border-radius);align-items:center;justify-content:center;padding:var(--p-badge-padding);background:var(--p-badge-primary-background);color:var(--p-badge-primary-color);font-size:var(--p-badge-font-size);font-weight:var(--p-badge-font-weight);min-width:var(--p-badge-min-width);height:var(--p-badge-height);}.p-badge-dot{width:var(--p-badge-dot-size);min-width:var(--p-badge-dot-size);height:var(--p-badge-dot-size);border-radius:50%;padding:0;}.p-badge-circle{padding:0;border-radius:50%;}.p-badge-secondary{background:var(--p-badge-secondary-background);color:var(--p-badge-secondary-color);}.p-badge-success{background:var(--p-badge-success-background);color:var(--p-badge-success-color);}.p-badge-info{background:var(--p-badge-info-background);color:var(--p-badge-info-color);}.p-badge-warn{background:var(--p-badge-warn-background);color:var(--p-badge-warn-color);}.p-badge-danger{background:var(--p-badge-danger-background);color:var(--p-badge-danger-color);}.p-badge-contrast{background:var(--p-badge-contrast-background);color:var(--p-badge-contrast-color);}.p-badge-sm{font-size:var(--p-badge-sm-font-size);min-width:var(--p-badge-sm-min-width);height:var(--p-badge-sm-height);}.p-badge-lg{font-size:var(--p-badge-lg-font-size);min-width:var(--p-badge-lg-min-width);height:var(--p-badge-lg-height);}.p-badge-xl{font-size:var(--p-badge-xl-font-size);min-width:var(--p-badge-xl-min-width);height:var(--p-badge-xl-height);}"
-    },
-    {
-        "name": "blockui-variables",
-        "value": ":root,:host{--p-blockui-border-radius:var(--p-content-border-radius);}"
-    },
-    {
-        "name": "blockui-style",
-        "value": ".p-blockui{position:relative;}.p-blockui-mask{border-radius:var(--p-blockui-border-radius);}.p-blockui-mask.p-overlay-mask{position:absolute;}.p-blockui-mask-document.p-overlay-mask{position:fixed;}"
-    },
-    {
-        "name": "chip-variables",
-        "value": ":root,:host{--p-chip-remove-icon-size:1rem;--p-chip-remove-icon-focus-ring-width:var(--p-focus-ring-width);--p-chip-remove-icon-focus-ring-style:var(--p-focus-ring-style);--p-chip-remove-icon-focus-ring-color:var(--p-focus-ring-color);--p-chip-remove-icon-focus-ring-offset:var(--p-focus-ring-offset);--p-chip-remove-icon-focus-ring-shadow:var(--p-form-field-focus-ring-shadow);--p-chip-icon-size:1rem;--p-chip-image-width:2rem;--p-chip-image-height:2rem;--p-chip-border-radius:16px;--p-chip-padding-x:0.75rem;--p-chip-padding-y:0.5rem;--p-chip-gap:0.5rem;--p-chip-transition-duration:var(--p-transition-duration);--p-chip-remove-icon-color:var(--p-surface-800);--p-chip-icon-color:var(--p-surface-800);--p-chip-background:var(--p-surface-100);--p-chip-color:var(--p-surface-800);}.p-dark{--p-chip-remove-icon-color:var(--p-surface-0);--p-chip-icon-color:var(--p-surface-0);--p-chip-background:var(--p-surface-800);--p-chip-color:var(--p-surface-0);}"
-    },
-    {
-        "name": "chip-style",
-        "value": ".p-chip{display:inline-flex;align-items:center;background:var(--p-chip-background);color:var(--p-chip-color);border-radius:var(--p-chip-border-radius);padding-block:var(--p-chip-padding-y);padding-inline:var(--p-chip-padding-x);gap:var(--p-chip-gap);}.p-chip-icon{color:var(--p-chip-icon-color);font-size:var(--p-chip-icon-font-size);width:var(--p-chip-icon-size);height:var(--p-chip-icon-size);}.p-chip-image{border-radius:50%;width:var(--p-chip-image-width);height:var(--p-chip-image-height);margin-inline-start:calc(-1 * var(--p-chip-padding-y));}.p-chip:has(.p-chip-remove-icon){padding-inline-end:var(--p-chip-padding-y);}.p-chip:has(.p-chip-image){padding-block-start:calc(var(--p-chip-padding-y) / 2);padding-block-end:calc(var(--p-chip-padding-y) / 2);}.p-chip-remove-icon{cursor:pointer;font-size:var(--p-chip-remove-icon-size);width:var(--p-chip-remove-icon-size);height:var(--p-chip-remove-icon-size);color:var(--p-chip-remove-icon-color);border-radius:50%;transition:outline-color var(--p-chip-transition-duration),box-shadow var(--p-chip-transition-duration);outline-color:transparent;}.p-chip-remove-icon:focus-visible{box-shadow:var(--p-chip-remove-icon-focus-ring-shadow);outline:var(--p-chip-remove-icon-focus-ring-width) var(--p-chip-remove-icon-focus-ring-style) var(--p-chip-remove-icon-focus-ring-color);outline-offset:var(--p-chip-remove-icon-focus-ring-offset);}"
-    },
-    {
-        "name": "inplace-variables",
-        "value": ":root,:host{--p-inplace-display-hover-background:var(--p-content-hover-background);--p-inplace-display-hover-color:var(--p-content-hover-color);--p-inplace-padding:var(--p-form-field-padding-y) var(--p-form-field-padding-x);--p-inplace-border-radius:var(--p-content-border-radius);--p-inplace-transition-duration:var(--p-transition-duration);--p-inplace-focus-ring-width:var(--p-focus-ring-width);--p-inplace-focus-ring-style:var(--p-focus-ring-style);--p-inplace-focus-ring-color:var(--p-focus-ring-color);--p-inplace-focus-ring-offset:var(--p-focus-ring-offset);--p-inplace-focus-ring-shadow:var(--p-focus-ring-shadow);}"
-    },
-    {
-        "name": "inplace-style",
-        "value": ".p-inplace-display{display:inline-block;cursor:pointer;border:1px solid transparent;padding:var(--p-inplace-padding);border-radius:var(--p-inplace-border-radius);transition:background var(--p-inplace-transition-duration),color var(--p-inplace-transition-duration),outline-color var(--p-inplace-transition-duration),box-shadow var(--p-inplace-transition-duration);outline-color:transparent;}.p-inplace-display:not(.p-disabled):hover{background:var(--p-inplace-display-hover-background);color:var(--p-inplace-display-hover-color);}.p-inplace-display:focus-visible{box-shadow:var(--p-inplace-focus-ring-shadow);outline:var(--p-inplace-focus-ring-width) var(--p-inplace-focus-ring-style) var(--p-inplace-focus-ring-color);outline-offset:var(--p-inplace-focus-ring-offset);}.p-inplace-content{display:block;}"
-    },
-    {
-        "name": "metergroup-variables",
-        "value": ":root,:host{--p-metergroup-label-list-vertical-gap:0.5rem;--p-metergroup-label-list-horizontal-gap:1rem;--p-metergroup-label-icon-size:1rem;--p-metergroup-label-marker-size:0.5rem;--p-metergroup-label-gap:0.5rem;--p-metergroup-meters-background:var(--p-content-border-color);--p-metergroup-meters-size:0.5rem;--p-metergroup-border-radius:var(--p-content-border-radius);--p-metergroup-gap:1rem;}"
-    },
-    {
-        "name": "metergroup-style",
-        "value": ".p-metergroup{display:flex;gap:var(--p-metergroup-gap);}.p-metergroup-meters{display:flex;background:var(--p-metergroup-meters-background);border-radius:var(--p-metergroup-border-radius);}.p-metergroup-label-list{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style-type:none;}.p-metergroup-label{display:inline-flex;align-items:center;gap:var(--p-metergroup-label-gap);}.p-metergroup-label-marker{display:inline-flex;width:var(--p-metergroup-label-marker-size);height:var(--p-metergroup-label-marker-size);border-radius:100%;}.p-metergroup-label-icon{font-size:var(--p-metergroup-label-icon-size);width:var(--p-metergroup-label-icon-size);height:var(--p-metergroup-label-icon-size);}.p-metergroup-horizontal{flex-direction:column;}.p-metergroup-label-list-horizontal{gap:var(--p-metergroup-label-list-horizontal-gap);}.p-metergroup-horizontal .p-metergroup-meters{height:var(--p-metergroup-meters-size);}.p-metergroup-horizontal .p-metergroup-meter:first-of-type{border-start-start-radius:var(--p-metergroup-border-radius);border-end-start-radius:var(--p-metergroup-border-radius);}.p-metergroup-horizontal .p-metergroup-meter:last-of-type{border-start-end-radius:var(--p-metergroup-border-radius);border-end-end-radius:var(--p-metergroup-border-radius);}.p-metergroup-vertical{flex-direction:row;}.p-metergroup-label-list-vertical{flex-direction:column;gap:var(--p-metergroup-label-list-vertical-gap);}.p-metergroup-vertical .p-metergroup-meters{flex-direction:column;width:var(--p-metergroup-meters-size);height:100%;}.p-metergroup-vertical .p-metergroup-label-list{align-items:flex-start;}.p-metergroup-vertical .p-metergroup-meter:first-of-type{border-start-start-radius:var(--p-metergroup-border-radius);border-start-end-radius:var(--p-metergroup-border-radius);}.p-metergroup-vertical .p-metergroup-meter:last-of-type{border-end-start-radius:var(--p-metergroup-border-radius);border-end-end-radius:var(--p-metergroup-border-radius);}"
-    },
-    {
-        "name": "overlaybadge-variables",
-        "value": ":root,:host{--p-overlaybadge-outline-width:2px;--p-overlaybadge-outline-color:var(--p-content-background);}"
-    },
-    {
-        "name": "overlaybadge-style",
-        "value": ".p-overlaybadge{position:relative;}.p-overlaybadge .p-badge{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0;outline-width:var(--p-overlaybadge-outline-width);outline-style:solid;outline-color:var(--p-overlaybadge-outline-color);}.p-overlaybadge .p-badge:dir(rtl){transform:translate(-50%,-50%);}"
-    },
-    {
-        "name": "scrolltop-style",
-        "value": ".p-scrolltop.p-button{position:fixed!important;inset-block-end:20px;inset-inline-end:20px;}.p-scrolltop-sticky.p-button{position:sticky!important;display:flex;margin-inline-start:auto;}.p-scrolltop-enter-from{opacity:0;}.p-scrolltop-enter-active{transition:opacity 300ms;}.p-scrolltop-leave-to{opacity:0;}.p-scrolltop-leave-active{transition:opacity 300ms;}"
-    },
-    {
-        "name": "skeleton-variables",
-        "value": ":root,:host{--p-skeleton-border-radius:var(--p-content-border-radius);--p-skeleton-background:var(--p-surface-200);--p-skeleton-animation-background:rgba(255,255,255,0.4);}.p-dark{--p-skeleton-background:rgba(255,255,255,0.06);--p-skeleton-animation-background:rgba(255,255,255,0.04);}"
-    },
-    {
-        "name": "skeleton-style",
-        "value": ".p-skeleton{display:block;overflow:hidden;background:var(--p-skeleton-background);border-radius:var(--p-skeleton-border-radius);}.p-skeleton::after{content:'';animation:p-skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;transform:translateX(-100%);z-index:1;background:linear-gradient(90deg,rgba(255,255,255,0),var(--p-skeleton-animation-background),rgba(255,255,255,0));}[dir='rtl'] .p-skeleton::after{animation-name:p-skeleton-animation-rtl;}.p-skeleton-circle{border-radius:50%;}.p-skeleton-animation-none::after{animation:none;}@keyframes p-skeleton-animation{from{transform:translateX(-100%);}to{transform:translateX(100%);}} @keyframes p-skeleton-animation-rtl{from{transform:translateX(100%);}to{transform:translateX(-100%);}}"
-    },
-    {
-        "name": "progressbar-variables",
-        "value": ":root,:host{--p-progressbar-label-color:var(--p-primary-contrast-color);--p-progressbar-label-font-size:0.75rem;--p-progressbar-label-font-weight:600;--p-progressbar-value-background:var(--p-primary-color);--p-progressbar-background:var(--p-content-border-color);--p-progressbar-border-radius:var(--p-content-border-radius);--p-progressbar-height:1.25rem;}"
-    },
-    {
-        "name": "progressbar-style",
-        "value": ".p-progressbar{display:block;position:relative;overflow:hidden;height:var(--p-progressbar-height);background:var(--p-progressbar-background);border-radius:var(--p-progressbar-border-radius);}.p-progressbar-value{margin:0;background:var(--p-progressbar-value-background);}.p-progressbar-label{color:var(--p-progressbar-label-color);font-size:var(--p-progressbar-label-font-size);font-weight:var(--p-progressbar-label-font-weight);}.p-progressbar-determinate .p-progressbar-value{height:100%;width:0%;position:absolute;display:none;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:width 1s ease-in-out;}.p-progressbar-determinate .p-progressbar-label{display:inline-flex;}.p-progressbar-indeterminate .p-progressbar-value::before{content:'';position:absolute;background:inherit;inset-block-start:0;inset-inline-start:0;inset-block-end:0;will-change:inset-inline-start,inset-inline-end;animation:p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite;}.p-progressbar-indeterminate .p-progressbar-value::after{content:'';position:absolute;background:inherit;inset-block-start:0;inset-inline-start:0;inset-block-end:0;will-change:inset-inline-start,inset-inline-end;animation:p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165,0.84,0.44,1) infinite;animation-delay:1.15s;}@keyframes p-progressbar-indeterminate-anim{0%{inset-inline-start:-35%;inset-inline-end:100%;}60%{inset-inline-start:100%;inset-inline-end:-90%;}100%{inset-inline-start:100%;inset-inline-end:-90%;}} @-webkit-keyframes p-progressbar-indeterminate-anim{0%{inset-inline-start:-35%;inset-inline-end:100%;}60%{inset-inline-start:100%;inset-inline-end:-90%;}100%{inset-inline-start:100%;inset-inline-end:-90%;}} @keyframes p-progressbar-indeterminate-anim-short{0%{inset-inline-start:-200%;inset-inline-end:100%;}60%{inset-inline-start:107%;inset-inline-end:-8%;}100%{inset-inline-start:107%;inset-inline-end:-8%;}} @-webkit-keyframes p-progressbar-indeterminate-anim-short{0%{inset-inline-start:-200%;inset-inline-end:100%;}60%{inset-inline-start:107%;inset-inline-end:-8%;}100%{inset-inline-start:107%;inset-inline-end:-8%;}}"
-    },
-    {
-        "name": "progressspinner-variables",
-        "value": ":root,:host{--p-progressspinner-color-one:var(--p-red-500);--p-progressspinner-color-two:var(--p-blue-500);--p-progressspinner-color-three:var(--p-green-500);--p-progressspinner-color-four:var(--p-yellow-500);}.p-dark{--p-progressspinner-color-one:var(--p-red-400);--p-progressspinner-color-two:var(--p-blue-400);--p-progressspinner-color-three:var(--p-green-400);--p-progressspinner-color-four:var(--p-yellow-400);}"
-    },
-    {
-        "name": "progressspinner-style",
-        "value": ".p-progressspinner{position:relative;margin:0 auto;width:100px;height:100px;display:inline-block;}.p-progressspinner::before{content:'';display:block;padding-top:100%;}.p-progressspinner-spin{height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;animation:p-progressspinner-rotate 2s linear infinite;}.p-progressspinner-circle{stroke-dasharray:89,200;stroke-dashoffset:0;stroke:var(--p-progressspinner-color-one);animation:p-progressspinner-dash 1.5s ease-in-out infinite,p-progressspinner-color 6s ease-in-out infinite;stroke-linecap:round;}@keyframes p-progressspinner-rotate{100%{transform:rotate(360deg);}} @keyframes p-progressspinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}} @keyframes p-progressspinner-color{100%,0%{stroke:var(--p-progressspinner-color-one);}40%{stroke:var(--p-progressspinner-color-two);}66%{stroke:var(--p-progressspinner-color-three);}80%,90%{stroke:var(--p-progressspinner-color-four);}}"
-    },
-    {
-        "name": "tag-variables",
-        "value": ":root,:host{--p-tag-icon-size:0.75rem;--p-tag-font-size:0.875rem;--p-tag-font-weight:700;--p-tag-padding:0.25rem 0.5rem;--p-tag-gap:0.25rem;--p-tag-border-radius:var(--p-content-border-radius);--p-tag-rounded-border-radius:var(--p-border-radius-xl);--p-tag-contrast-background:var(--p-surface-950);--p-tag-contrast-color:var(--p-surface-0);--p-tag-danger-background:var(--p-red-100);--p-tag-danger-color:var(--p-red-700);--p-tag-warn-background:var(--p-orange-100);--p-tag-warn-color:var(--p-orange-700);--p-tag-info-background:var(--p-sky-100);--p-tag-info-color:var(--p-sky-700);--p-tag-success-background:var(--p-green-100);--p-tag-success-color:var(--p-green-700);--p-tag-secondary-background:var(--p-surface-100);--p-tag-secondary-color:var(--p-surface-600);--p-tag-primary-background:var(--p-primary-100);--p-tag-primary-color:var(--p-primary-700);}.p-dark{--p-tag-contrast-background:var(--p-surface-0);--p-tag-contrast-color:var(--p-surface-950);--p-tag-danger-background:color-mix(in srgb,var(--p-red-500),transparent 84%);--p-tag-danger-color:var(--p-red-300);--p-tag-warn-background:color-mix(in srgb,var(--p-orange-500),transparent 84%);--p-tag-warn-color:var(--p-orange-300);--p-tag-info-background:color-mix(in srgb,var(--p-sky-500),transparent 84%);--p-tag-info-color:var(--p-sky-300);--p-tag-success-background:color-mix(in srgb,var(--p-green-500),transparent 84%);--p-tag-success-color:var(--p-green-300);--p-tag-secondary-background:var(--p-surface-800);--p-tag-secondary-color:var(--p-surface-300);--p-tag-primary-background:color-mix(in srgb,var(--p-primary-500),transparent 84%);--p-tag-primary-color:var(--p-primary-300);}"
-    },
-    {
-        "name": "tag-style",
-        "value": ".p-tag{display:inline-flex;align-items:center;justify-content:center;background:var(--p-tag-primary-background);color:var(--p-tag-primary-color);font-size:var(--p-tag-font-size);font-weight:var(--p-tag-font-weight);padding:var(--p-tag-padding);border-radius:var(--p-tag-border-radius);gap:var(--p-tag-gap);}.p-tag-icon{font-size:var(--p-tag-icon-size);width:var(--p-tag-icon-size);height:var(--p-tag-icon-size);}.p-tag-rounded{border-radius:var(--p-tag-rounded-border-radius);}.p-tag-success{background:var(--p-tag-success-background);color:var(--p-tag-success-color);}.p-tag-info{background:var(--p-tag-info-background);color:var(--p-tag-info-color);}.p-tag-warn{background:var(--p-tag-warn-background);color:var(--p-tag-warn-color);}.p-tag-danger{background:var(--p-tag-danger-background);color:var(--p-tag-danger-color);}.p-tag-secondary{background:var(--p-tag-secondary-background);color:var(--p-tag-secondary-color);}.p-tag-contrast{background:var(--p-tag-contrast-background);color:var(--p-tag-contrast-color);}"
-    },
-    {
-        "name": "terminal-variables",
-        "value": ":root,:host{--p-terminal-command-response-margin:2px 0;--p-terminal-prompt-gap:0.25rem;--p-terminal-background:var(--p-form-field-background);--p-terminal-border-color:var(--p-form-field-border-color);--p-terminal-color:var(--p-form-field-color);--p-terminal-height:18rem;--p-terminal-padding:var(--p-form-field-padding-y) var(--p-form-field-padding-x);--p-terminal-border-radius:var(--p-form-field-border-radius);}"
-    },
-    {
-        "name": "terminal-style",
-        "value": ".p-terminal{display:block;height:var(--p-terminal-height);overflow:auto;background:var(--p-terminal-background);color:var(--p-terminal-color);border:1px solid var(--p-terminal-border-color);padding:var(--p-terminal-padding);border-radius:var(--p-terminal-border-radius);}.p-terminal-prompt{display:flex;align-items:center;}.p-terminal-prompt-value{flex:1 1 auto;border:0 none;background:transparent;color:inherit;padding:0;outline:0 none;font-family:inherit;font-feature-settings:inherit;font-size:1rem;}.p-terminal-prompt-label{margin-inline-end:var(--p-terminal-prompt-gap);}.p-terminal-input::-ms-clear{display:none;}.p-terminal-command-response{margin:var(--p-terminal-command-response-margin);}"
-    },
-    {
-        "name": "tooltip-directive-variables",
-        "value": ":root,:host{--p-tooltip-max-width:12.5rem;--p-tooltip-gutter:0.25rem;--p-tooltip-shadow:var(--p-overlay-popover-shadow);--p-tooltip-padding:0.5rem 0.75rem;--p-tooltip-border-radius:var(--p-overlay-popover-border-radius);--p-tooltip-background:var(--p-surface-700);--p-tooltip-color:var(--p-surface-0);}.p-dark{--p-tooltip-background:var(--p-surface-700);--p-tooltip-color:var(--p-surface-0);}"
-    },
-    {
-        "name": "tooltip-directive-style",
-        "value": ".p-tooltip{position:absolute;display:none;max-width:var(--p-tooltip-max-width);}.p-tooltip-right,.p-tooltip-left{padding:0 var(--p-tooltip-gutter);}.p-tooltip-top,.p-tooltip-bottom{padding:var(--p-tooltip-gutter) 0;}.p-tooltip-text{white-space:pre-line;word-break:break-word;background:var(--p-tooltip-background);color:var(--p-tooltip-color);padding:var(--p-tooltip-padding);box-shadow:var(--p-tooltip-shadow);border-radius:var(--p-tooltip-border-radius);}.p-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;}.p-tooltip-right .p-tooltip-arrow{margin-top:calc(-1 * var(--p-tooltip-gutter));border-width:var(--p-tooltip-gutter) var(--p-tooltip-gutter) var(--p-tooltip-gutter) 0;border-right-color:var(--p-tooltip-background);}.p-tooltip-left .p-tooltip-arrow{margin-top:calc(-1 * var(--p-tooltip-gutter));border-width:var(--p-tooltip-gutter) 0 var(--p-tooltip-gutter) var(--p-tooltip-gutter);border-left-color:var(--p-tooltip-background);}.p-tooltip-top .p-tooltip-arrow{margin-left:calc(-1 * var(--p-tooltip-gutter));border-width:var(--p-tooltip-gutter) var(--p-tooltip-gutter) 0 var(--p-tooltip-gutter);border-top-color:var(--p-tooltip-background);border-bottom-color:var(--p-tooltip-background);}.p-tooltip-bottom .p-tooltip-arrow{margin-left:calc(-1 * var(--p-tooltip-gutter));border-width:0 var(--p-tooltip-gutter) var(--p-tooltip-gutter) var(--p-tooltip-gutter);border-top-color:var(--p-tooltip-background);border-bottom-color:var(--p-tooltip-background);}"
-    },
-    {
-        "name": "ripple-directive-variables",
-        "value": ":root,:host{--p-ripple-background:rgba(0,0,0,0.1);}.p-dark{--p-ripple-background:rgba(255,255,255,0.3);}"
-    },
-    {
-        "name": "ripple-directive-style",
-        "value": ".p-ink{display:block;position:absolute;background:var(--p-ripple-background);border-radius:100%;transform:scale(0);pointer-events:none;}.p-ink-active{animation:ripple 0.4s linear;}@keyframes ripple{100%{opacity:0;transform:scale(2.5);}}"
-    },
-    {
-        "name": "baseicon",
-        "value": ".p-icon{display:inline-block;vertical-align:baseline;flex-shrink:0;}.p-icon-spin{-webkit-animation:p-icon-spin 2s infinite linear;animation:p-icon-spin 2s infinite linear;}@-webkit-keyframes p-icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes p-icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}}"
-    }
-]
\ No newline at end of file
diff --git a/src/lib/replateStreamText.ts b/src/lib/replateStreamText.ts
new file mode 100644
index 0000000..395ced7
--- /dev/null
+++ b/src/lib/replateStreamText.ts
@@ -0,0 +1,123 @@
+interface TextTransformStreamOptions {
+  encoding?: string;
+  handleSplitChunks?: boolean;
+  bufferSize?: number;
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Class Transformer để xử lý text transform
+ */
+class TextTransformer implements Transformer<Uint8Array, Uint8Array> {
+  private buffer: string = '';
+  private decoder: TextDecoder;
+  private encoder: TextEncoder;
+  
+  constructor(
+    private transformFn: (text: string) => string,
+    private options: Required<Omit<TextTransformStreamOptions, 'onError'>> & {
+      onError?: (error: Error) => void;
+    }
+  ) {
+    this.decoder = new TextDecoder(this.options.encoding);
+    this.encoder = new TextEncoder();
+  }
+  
+  transform(
+    chunk: Uint8Array, 
+    controller: TransformStreamDefaultController<Uint8Array>
+  ): void {
+    try {
+      const chunkText = this.decoder.decode(chunk, { stream: true });
+      const fullText = this.buffer + chunkText;
+      this.buffer = '';
+      
+      let processedText: string;
+      try {
+        processedText = this.transformFn(fullText);
+      } catch (transformError) {
+        this.handleError(transformError);
+        processedText = fullText;
+      }
+      
+      if (this.options.handleSplitChunks) {
+        this.handleSplitChunks(processedText, controller);
+      } else {
+        controller.enqueue(this.encoder.encode(processedText));
+      }
+    } catch (error) {
+      this.handleError(error);
+      controller.enqueue(chunk);
+    }
+  }
+  
+  flush(controller: TransformStreamDefaultController<Uint8Array>): void {
+    try {
+      if (this.buffer) {
+        const finalText = this.decoder.decode();
+        const remainingText = this.buffer + finalText;
+        
+        if (remainingText) {
+          let processedText: string;
+          try {
+            processedText = this.transformFn(remainingText);
+          } catch (transformError) {
+            this.handleError(transformError);
+            processedText = remainingText;
+          }
+          controller.enqueue(this.encoder.encode(processedText));
+        }
+      }
+    } catch (error) {
+      this.handleError(error);
+    }
+  }
+  
+  private handleSplitChunks(
+    text: string, 
+    controller: TransformStreamDefaultController<Uint8Array>
+  ): void {
+    const lastNewline = text.lastIndexOf('\n');
+    const lastSpace = text.lastIndexOf(' ');
+    const lastBreak = Math.max(lastNewline, lastSpace);
+    
+    if (lastBreak > text.length - this.options.bufferSize && lastBreak > 0) {
+      const safePart = text.slice(0, lastBreak + 1);
+      this.buffer = text.slice(lastBreak + 1);
+      controller.enqueue(this.encoder.encode(safePart));
+    } else {
+      controller.enqueue(this.encoder.encode(text));
+    }
+  }
+  
+  private handleError(error: unknown): void {
+    if (this.options.onError) {
+      this.options.onError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+}
+
+/**
+ * Cách 2: Sử dụng class Transformer
+ */
+export function createTextTransformStreamClass(
+  inputStream: ReadableStream<Uint8Array>,
+  transformFn: (text: string) => string,
+  options: TextTransformStreamOptions = {}
+): ReadableStream<Uint8Array> {
+  const {
+    encoding = 'utf-8',
+    handleSplitChunks = true,
+    bufferSize = 1024,
+    onError
+  } = options;
+  
+  const transformer = new TextTransformer(transformFn, {
+    encoding,
+    handleSplitChunks,
+    bufferSize,
+    onError
+  });
+  
+  return inputStream.pipeThrough(new TransformStream(transformer));
+}
\ No newline at end of file
diff --git a/src/lib/swr/cache/adapters/localStorage.ts b/src/lib/swr/cache/adapters/localStorage.ts
deleted file mode 100644
index 5fb6175..0000000
--- a/src/lib/swr/cache/adapters/localStorage.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import SWRVCache, { type ICacheItem } from '..'
-import type { IKey } from '../../types'
-
-/**
- * LocalStorage cache adapter for swrv data cache.
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
- */
-export default class LocalStorageCache extends SWRVCache<any> {
-  private STORAGE_KEY
-
-  constructor (key = 'swrv', ttl = 0) {
-    super(ttl)
-    this.STORAGE_KEY = key
-  }
-
-  private encode (storage: any) { return JSON.stringify(storage) }
-  private decode (storage: any) { return JSON.parse(storage) }
-
-  get (k: IKey): ICacheItem<IKey> {
-    const item = localStorage.getItem(this.STORAGE_KEY)
-    if (item) {
-      const _key = this.serializeKey(k)
-      const itemParsed: ICacheItem<any> = JSON.parse(item)[_key]
-
-      if (itemParsed?.expiresAt === null) {
-        itemParsed.expiresAt = Infinity // localStorage sets Infinity to 'null'
-      }
-
-      return itemParsed
-    }
-
-    return undefined as any
-  }
-
-  set (k: string, v: any, ttl: number) {
-    let payload = {}
-    const _key = this.serializeKey(k)
-    const timeToLive = ttl || this.ttl
-    const storage = localStorage.getItem(this.STORAGE_KEY)
-    const now = Date.now()
-    const item = {
-      data: v,
-      createdAt: now,
-      expiresAt: timeToLive ? now + timeToLive : Infinity
-    }
-
-    if (storage) {
-      payload = this.decode(storage)
-      (payload as any)[_key] = item
-    } else {
-      payload = { [_key]: item }
-    }
-
-    this.dispatchExpire(timeToLive, item, _key)
-    localStorage.setItem(this.STORAGE_KEY, this.encode(payload))
-  }
-
-  dispatchExpire (ttl: number, item: any, serializedKey: string) {
-    ttl && setTimeout(() => {
-      const current = Date.now()
-      const hasExpired = current >= item.expiresAt
-      if (hasExpired) this.delete(serializedKey)
-    }, ttl)
-  }
-
-  delete (serializedKey: string) {
-    const storage = localStorage.getItem(this.STORAGE_KEY)
-    let payload = {} as Record<string, any>
-
-    if (storage) {
-      payload = this.decode(storage)
-      delete payload[serializedKey]
-    }
-
-    localStorage.setItem(this.STORAGE_KEY, this.encode(payload))
-  }
-}
diff --git a/src/lib/swr/cache/index.ts b/src/lib/swr/cache/index.ts
deleted file mode 100644
index fc0aff1..0000000
--- a/src/lib/swr/cache/index.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { IKey } from '../types'
-import hash from '../lib/hash'
-export interface ICacheItem<Data> {
-  data: Data,
-  createdAt: number,
-  expiresAt: number
-}
-
-function serializeKeyDefault (key: IKey): string {
-  if (typeof key === 'function') {
-    try {
-      key = key()
-    } catch (err) {
-      // dependencies not ready
-      key = ''
-    }
-  }
-
-  if (Array.isArray(key)) {
-    key = hash(key)
-  } else {
-    // convert null to ''
-    key = String(key || '')
-  }
-
-  return key
-}
-
-export default class SWRVCache<CacheData> {
-  protected ttl: number
-  private items?: Map<string, ICacheItem<CacheData>>
-
-  constructor (ttl = 0) {
-    this.items = new Map()
-    this.ttl = ttl
-  }
-
-  serializeKey (key: IKey): string {
-    return serializeKeyDefault(key)
-  }
-
-  get (k: string): ICacheItem<CacheData> {
-    const _key = this.serializeKey(k)
-    return this.items!.get(_key)!
-  }
-
-  set (k: string, v: any, ttl: number) {
-    const _key = this.serializeKey(k)
-    const timeToLive = ttl || this.ttl
-    const now = Date.now()
-    const item = {
-      data: v,
-      createdAt: now,
-      expiresAt: timeToLive ? now + timeToLive : Infinity
-    }
-
-    this.dispatchExpire(timeToLive, item, _key)
-    this.items!.set(_key, item)
-  }
-
-  dispatchExpire (ttl: number, item: any, serializedKey: string) {
-    ttl && setTimeout(() => {
-      const current = Date.now()
-      const hasExpired = current >= item.expiresAt
-      if (hasExpired) this.delete(serializedKey)
-    }, ttl)
-  }
-
-  delete (serializedKey: string) {
-    this.items!.delete(serializedKey)
-  }
-}
diff --git a/src/lib/swr/index.ts b/src/lib/swr/index.ts
deleted file mode 100644
index a6f6983..0000000
--- a/src/lib/swr/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import SWRVCache from './cache'
-import useSWRV, { mutate } from './use-swrv'
-
-export {
-  type IConfig
-} from './types'
-export { mutate, SWRVCache }
-export default useSWRV
diff --git a/src/lib/swr/lib/hash.ts b/src/lib/swr/lib/hash.ts
deleted file mode 100644
index c4da7c6..0000000
--- a/src/lib/swr/lib/hash.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// From https://github.com/vercel/swr/blob/master/src/libs/hash.ts
-// use WeakMap to store the object->key mapping
-// so the objects can be garbage collected.
-// WeakMap uses a hashtable under the hood, so the lookup
-// complexity is almost O(1).
-const table = new WeakMap()
-
-// counter of the key
-let counter = 0
-
-// hashes an array of objects and returns a string
-export default function hash (args: any[]): string {
-  if (!args.length) return ''
-  let key = 'arg'
-  for (let i = 0; i < args.length; ++i) {
-    let _hash
-    if (
-      args[i] === null ||
-      (typeof args[i] !== 'object' && typeof args[i] !== 'function')
-    ) {
-      // need to consider the case that args[i] is a string:
-      // args[i]        _hash
-      // "undefined" -> '"undefined"'
-      // undefined   -> 'undefined'
-      // 123         -> '123'
-      // null        -> 'null'
-      // "null"      -> '"null"'
-      if (typeof args[i] === 'string') {
-        _hash = '"' + args[i] + '"'
-      } else {
-        _hash = String(args[i])
-      }
-    } else {
-      if (!table.has(args[i])) {
-        _hash = counter
-        table.set(args[i], counter++)
-      } else {
-        _hash = table.get(args[i])
-      }
-    }
-    key += '@' + _hash
-  }
-  return key
-}
diff --git a/src/lib/swr/lib/web-preset.ts b/src/lib/swr/lib/web-preset.ts
deleted file mode 100644
index 7f6ee55..0000000
--- a/src/lib/swr/lib/web-preset.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-function isOnline (): boolean {
-  if (typeof navigator.onLine !== 'undefined') {
-    return navigator.onLine
-  }
-  // always assume it's online
-  return true
-}
-
-function isDocumentVisible (): boolean {
-  if (
-    typeof document !== 'undefined' &&
-    typeof document.visibilityState !== 'undefined'
-  ) {
-    return document.visibilityState !== 'hidden'
-  }
-  // always assume it's visible
-  return true
-}
-
-const fetcher = (url: string | Request) => fetch(url).then(res => res.json())
-
-export default {
-  isOnline,
-  isDocumentVisible,
-  fetcher
-}
-
diff --git a/src/lib/swr/types.ts b/src/lib/swr/types.ts
deleted file mode 100644
index 7fe7b25..0000000
--- a/src/lib/swr/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { Ref, WatchSource } from 'vue'
-import SWRVCache from './cache'
-import LocalStorageCache from './cache/adapters/localStorage'
-
-export type fetcherFn<Data> = (...args: any) => Data | Promise<Data>
-
-export interface IConfig<
-  Data = any,
-  Fn extends fetcherFn<Data> = fetcherFn<Data>
-> {
-  refreshInterval?: number
-  cache?: LocalStorageCache | SWRVCache<any>
-  dedupingInterval?: number
-  ttl?: number
-  serverTTL?: number
-  revalidateOnFocus?: boolean
-  revalidateDebounce?: number
-  shouldRetryOnError?: boolean
-  errorRetryInterval?: number
-  errorRetryCount?: number
-  fetcher?: Fn,
-  isOnline?: () => boolean
-  isDocumentVisible?: () => boolean
-}
-
-export interface revalidateOptions {
-  shouldRetryOnError?: boolean,
-  errorRetryCount?: number,
-  forceRevalidate?: boolean,
-}
-
-export interface IResponse<Data = any, Error = any> {
-  data: Ref<Data | undefined>
-  error: Ref<Error | undefined>
-  isValidating: Ref<boolean>
-  isLoading: Ref<boolean>
-  mutate: (data?: fetcherFn<Data>, opts?: revalidateOptions) => Promise<void>
-}
-
-export type keyType = string | any[] | null | undefined
-
-export type IKey = keyType | WatchSource<keyType>
diff --git a/src/lib/swr/use-swrv.ts b/src/lib/swr/use-swrv.ts
deleted file mode 100644
index 8230ca4..0000000
--- a/src/lib/swr/use-swrv.ts
+++ /dev/null
@@ -1,470 +0,0 @@
-/**              ____
- *--------------/    \.------------------/
- *            /  swrv  \.               /    //
- *          /         / /\.            /    //
- *        /     _____/ /   \.         /
- *      /      /  ____/   .  \.      /
- *    /        \ \_____        \.   /
- *  /     .     \_____ \         \ /    //
- *  \          _____/ /        ./ /    //
- *    \       / _____/       ./  /
- *      \    / /      .    ./   /
- *        \ / /          ./    /
- *    .     \/         ./     /    //
- *            \      ./      /    //
- *              \.. /       /
- *         .     |||       /
- *               |||      /
- *     .         |||     /    //
- *               |||    /    //
- *               |||   /
- */
-import {
-	reactive,
-	watch,
-	ref,
-	toRefs,
-	// isRef,
-	onMounted,
-	onUnmounted,
-	getCurrentInstance,
-	isReadonly,
-	onServerPrefetch,
-	isRef,
-	useSSRContext,
-	type FunctionPlugin,
-	inject
-} from 'vue'
-import webPreset from './lib/web-preset'
-import SWRVCache from './cache'
-import type { IConfig, IKey, IResponse, fetcherFn, revalidateOptions } from './types'
-import { tinyassert } from "@hiogawa/utils";
-
-type StateRef<Data, Error> = {
-	data: Data, error: Error, isValidating: boolean, isLoading: boolean, revalidate: Function, key: any
-};
-
-const DATA_CACHE = new SWRVCache<Omit<IResponse, 'mutate'>>()
-const REF_CACHE = new SWRVCache<StateRef<any, any>[]>()
-const PROMISES_CACHE = new SWRVCache<Omit<IResponse, 'mutate'>>()
-
-const defaultConfig: IConfig = {
-	cache: DATA_CACHE,
-	refreshInterval: 0,
-	ttl: 0,
-	serverTTL: 1000,
-	dedupingInterval: 2000,
-	revalidateOnFocus: true,
-	revalidateDebounce: 0,
-	shouldRetryOnError: true,
-	errorRetryInterval: 5000,
-	errorRetryCount: 5,
-	fetcher: webPreset.fetcher,
-	isOnline: webPreset.isOnline,
-	isDocumentVisible: webPreset.isDocumentVisible
-}
-
-/**
- * Cache the refs for later revalidation
- */
-function setRefCache(key: string, theRef: StateRef<any, any>, ttl: number) {
-	const refCacheItem = REF_CACHE.get(key)
-	if (refCacheItem) {
-		refCacheItem.data.push(theRef)
-	} else {
-		// #51 ensures ref cache does not evict too soon
-		const gracePeriod = 5000
-		REF_CACHE.set(key, [theRef], ttl > 0 ? ttl + gracePeriod : ttl)
-	}
-}
-
-function onErrorRetry(revalidate: (any: any, opts: revalidateOptions) => void, errorRetryCount: number, config: IConfig): void {
-	if (!(config as any).isDocumentVisible()) {
-		return
-	}
-
-	if (config.errorRetryCount !== undefined && errorRetryCount > config.errorRetryCount) {
-		return
-	}
-
-	const count = Math.min(errorRetryCount || 0, (config as any).errorRetryCount)
-	const timeout = count * (config as any).errorRetryInterval
-	setTimeout(() => {
-		revalidate(null, { errorRetryCount: count + 1, shouldRetryOnError: true })
-	}, timeout)
-}
-
-/**
- * Main mutation function for receiving data from promises to change state and
- * set data cache
- */
-const mutate = async <Data>(key: string, res: Promise<Data> | Data, cache = DATA_CACHE, ttl = defaultConfig.ttl) => {
-	let data, error, isValidating
-
-	if (isPromise(res)) {
-		try {
-			data = await res
-		} catch (err) {
-			error = err
-		}
-	} else {
-		data = res
-	}
-
-	// eslint-disable-next-line prefer-const
-	isValidating = false
-
-	const newData = { data, error, isValidating }
-	if (typeof data !== 'undefined') {
-		try {
-			cache.set(key, newData, Number(ttl))
-		} catch (err) {
-			console.error('swrv(mutate): failed to set cache', err)
-		}
-	}
-
-	/**
-	 * Revalidate all swrv instances with new data
-	 */
-	const stateRef = REF_CACHE.get(key)
-	if (stateRef && stateRef.data.length) {
-		// This filter fixes #24 race conditions to only update ref data of current
-		// key, while data cache will continue to be updated if revalidation is
-		// fired
-		let refs = stateRef.data.filter(r => r.key === key)
-
-		refs.forEach((r, idx) => {
-			if (typeof newData.data !== 'undefined') {
-				r.data = newData.data
-			}
-			r.error = newData.error
-			r.isValidating = newData.isValidating
-			r.isLoading = newData.isValidating
-
-			const isLast = idx === refs.length - 1
-			if (!isLast) {
-				// Clean up refs that belonged to old keys
-				delete refs[idx]
-			}
-		})
-
-		refs = refs.filter(Boolean)
-	}
-
-	return newData
-}
-
-/* Stale-While-Revalidate hook to handle fetching, caching, validation, and more... */
-function useSWRV<Data = any, Error = any>(
-	key: IKey
-): IResponse<Data, Error>
-function useSWRV<Data = any, Error = any>(
-	key: IKey,
-	fn: fetcherFn<Data> | undefined | null,
-	config?: IConfig
-): IResponse<Data, Error>
-function useSWRV<Data = any, Error = any>(...args: any[]): IResponse<Data, Error> {
-	const injectedConfig = inject<Partial<IConfig> | null>('swrv-config', null)
-	tinyassert(injectedConfig, 'Injected swrv-config must be an object')
-	let key: IKey
-	let fn: fetcherFn<Data> | undefined | null
-	let config: IConfig = { ...defaultConfig, ...injectedConfig }
-	let unmounted = false
-	let isHydrated = false
-
-	const instance = getCurrentInstance() as any
-	const vm = instance?.proxy || instance // https://github.com/vuejs/composition-api/pull/520
-	if (!vm) {
-		console.error('Could not get current instance, check to make sure that `useSwrv` is declared in the top level of the setup function.')
-		throw new Error('Could not get current instance')
-	}
-
-	const IS_SERVER = typeof window === 'undefined' || false
-	// #region ssr
-	const isSsrHydration = Boolean(
-		!IS_SERVER &&
-		window !== undefined && (window as any).__SSR_STATE__.swrv)
-	// #endregion
-	if (args.length >= 1) {
-		key = args[0]
-	}
-	if (args.length >= 2) {
-		fn = args[1]
-	}
-	if (args.length > 2) {
-		config = {
-			...config,
-			...args[2]
-		}
-	}
-
-	const ttl = IS_SERVER ? config.serverTTL : config.ttl
-	const keyRef = typeof key === 'function' ? (key as any) : ref(key)
-
-	if (typeof fn === 'undefined') {
-		// use the global fetcher
-		fn = config.fetcher
-	}
-
-	let stateRef: StateRef<Data, Error> | null = null
-	// #region ssr
-	if (isSsrHydration) {
-		// component was ssrHydrated, so make the ssr reactive as the initial data
-
-		const swrvState = (window as any).__SSR_STATE__.swrv || []
-		const swrvKey = nanoHex(vm.$.type.__name ?? vm.$.type.name)
-		if (swrvKey !== undefined && swrvKey !== null) {
-			const nodeState = swrvState[swrvKey] || []
-			const instanceState = nodeState[nanoHex(isRef(keyRef) ? keyRef.value : keyRef())]
-
-			if (instanceState) {
-				stateRef = reactive(instanceState)
-				isHydrated = true
-			}
-		}
-	}
-	// #endregion
-
-	if (!stateRef) {
-		stateRef = reactive({
-			data: undefined,
-			error: undefined,
-			isValidating: true,
-			isLoading: true,
-			key: null
-		}) as StateRef<Data, Error>
-	}
-
-	/**
-	 * Revalidate the cache, mutate data
-	 */
-	const revalidate = async (data?: fetcherFn<Data>, opts?: revalidateOptions) => {
-		const isFirstFetch = stateRef.data === undefined
-		const keyVal = keyRef.value
-		if (!keyVal) { return }
-
-		const cacheItem = config.cache!.get(keyVal)
-		const newData = cacheItem && cacheItem.data
-
-		stateRef.isValidating = true
-		stateRef.isLoading = !newData
-		if (newData) {
-			stateRef.data = newData.data
-			stateRef.error = newData.error
-		}
-
-		const fetcher = data || fn
-		if (
-			!fetcher ||
-			(!(config as any).isDocumentVisible() && !isFirstFetch) ||
-			(opts?.forceRevalidate !== undefined && !opts?.forceRevalidate)
-		) {
-			stateRef.isValidating = false
-			stateRef.isLoading = false
-			return
-		}
-
-		// Dedupe items that were created in the last interval #76
-		if (cacheItem) {
-			const shouldRevalidate = Boolean(
-				((Date.now() - cacheItem.createdAt) >= (config as any).dedupingInterval) || opts?.forceRevalidate
-			)
-
-			if (!shouldRevalidate) {
-				stateRef.isValidating = false
-				stateRef.isLoading = false
-				return
-			}
-		}
-
-		const trigger = async () => {
-			const promiseFromCache = PROMISES_CACHE.get(keyVal)
-			if (!promiseFromCache) {
-				const fetcherArgs = Array.isArray(keyVal) ? keyVal : [keyVal]
-				const newPromise = fetcher(...fetcherArgs)
-				PROMISES_CACHE.set(keyVal, newPromise, (config as any).dedupingInterval)
-				await mutate(keyVal, newPromise, (config as any).cache, ttl)
-			} else {
-				await mutate(keyVal, promiseFromCache.data, (config as any).cache, ttl)
-			}
-			stateRef.isValidating = false
-			stateRef.isLoading = false
-			PROMISES_CACHE.delete(keyVal)
-			if (stateRef.error !== undefined) {
-				const shouldRetryOnError = !unmounted && config.shouldRetryOnError && (opts ? opts.shouldRetryOnError : true)
-				if (shouldRetryOnError) {
-					onErrorRetry(revalidate, opts ? Number(opts.errorRetryCount) : 1, config)
-				}
-			}
-		}
-
-		if (newData && config.revalidateDebounce) {
-			setTimeout(async () => {
-				if (!unmounted) {
-					await trigger()
-				}
-			}, config.revalidateDebounce)
-		} else {
-			await trigger()
-		}
-	}
-
-	const revalidateCall = async () => revalidate(null as any, { shouldRetryOnError: false })
-	let timer: any = null
-	/**
-	 * Setup polling
-	 */
-	onMounted(() => {
-		const tick = async () => {
-			// component might un-mount during revalidate, so do not set a new timeout
-			// if this is the case, but continue to revalidate since promises can't
-			// be cancelled and new hook instances might rely on promise/data cache or
-			// from pre-fetch
-			if (!stateRef.error && (config as any).isOnline()) {
-				// if API request errored, we stop polling in this round
-				// and let the error retry function handle it
-				await revalidate()
-			} else {
-				if (timer) {
-					clearTimeout(timer)
-				}
-			}
-
-			if (config.refreshInterval && !unmounted) {
-				timer = setTimeout(tick, config.refreshInterval)
-			}
-		}
-
-		if (config.refreshInterval) {
-			timer = setTimeout(tick, config.refreshInterval)
-		}
-		if (config.revalidateOnFocus) {
-			document.addEventListener('visibilitychange', revalidateCall, false)
-			window.addEventListener('focus', revalidateCall, false)
-		}
-	})
-
-	/**
-	 * Teardown
-	 */
-	onUnmounted(() => {
-		unmounted = true
-		if (timer) {
-			clearTimeout(timer)
-		}
-		if (config.revalidateOnFocus) {
-			document.removeEventListener('visibilitychange', revalidateCall, false)
-			window.removeEventListener('focus', revalidateCall, false)
-		}
-		const refCacheItem = REF_CACHE.get(keyRef.value)
-		if (refCacheItem) {
-			refCacheItem.data = refCacheItem.data.filter((ref) => ref !== stateRef)
-		}
-	})
-
-	// #region ssr
-	if (IS_SERVER) {
-		const ssrContext = useSSRContext()
-		// make sure srwv exists in ssrContext
-		let swrvRes: Record<string, any> = {}
-		if (ssrContext) {
-			swrvRes = ssrContext.swrv = ssrContext.swrv || swrvRes
-		}
-
-		const ssrKey = nanoHex(vm.$.type.__name ?? vm.$.type.name)
-		// if (!vm.$vnode || (vm.$node && !vm.$node.data)) {
-		//   vm.$vnode = {
-		//     data: { attrs: { 'data-swrv-key': ssrKey } }
-		//   }
-		// }
-
-		// const attrs = (vm.$vnode.data.attrs = vm.$vnode.data.attrs || {})
-		// attrs['data-swrv-key'] = ssrKey
-		// // Nuxt compatibility
-		// if (vm.$ssrContext && vm.$ssrContext.nuxt) {
-		//   vm.$ssrContext.nuxt.swrv = swrvRes
-		// }
-		if (ssrContext) {
-			ssrContext.swrv = swrvRes
-		}
-		onServerPrefetch(async () => {
-			await revalidate()
-			if (!swrvRes[ssrKey]) swrvRes[ssrKey] = {}
-
-			swrvRes[ssrKey][nanoHex(keyRef.value)] = {
-				data: stateRef.data,
-				error: stateRef.error,
-				isValidating: stateRef.isValidating
-			}
-		})
-	}
-	// #endregion
-
-	/**
-	 * Revalidate when key dependencies change
-	 */
-	try {
-		watch(keyRef, (val) => {
-			if (!isReadonly(keyRef)) {
-				keyRef.value = val
-			}
-			stateRef.key = val
-			stateRef.isValidating = Boolean(val)
-			setRefCache(keyRef.value, stateRef, Number(ttl))
-
-			if (!IS_SERVER && !isHydrated && keyRef.value) {
-				revalidate()
-			}
-			isHydrated = false
-		}, {
-			immediate: true
-		})
-	} catch {
-		// do nothing
-	}
-
-	const res: IResponse = {
-		...toRefs(stateRef),
-		mutate: (data?: fetcherFn<Data>, opts?: revalidateOptions) => revalidate(data, {
-			...opts,
-			forceRevalidate: true
-		})
-	}
-
-	return res
-}
-
-function isPromise<T>(p: any): p is Promise<T> {
-	return p !== null && typeof p === 'object' && typeof p.then === 'function'
-}
-
-/**
- * string to hex 8 chars
- * @param name string
- * @returns string
- */
-function nanoHex(name: string): string {
-	try {
-		let hash = 0
-		for (let i = 0; i < name.length; i++) {
-			const chr = name.charCodeAt(i)
-			hash = ((hash << 5) - hash) + chr
-			hash |= 0 // Convert to 32bit integer
-		}
-		let hex = (hash >>> 0).toString(16)
-		while (hex.length < 8) {
-			hex = '0' + hex
-		}
-		return hex
-	} catch {
-		console.error("err name: ", name)
-		return '0000'
-	}
-}
-export const vueSWR = (swrvConfig: Partial<IConfig> = defaultConfig): FunctionPlugin => (app) => {
-	app.config.globalProperties.$swrv = useSWRV
-	// app.provide('swrv', useSWRV)
-	app.provide('swrv-config', swrvConfig)
-}
-export { mutate }
-export default useSWRV
diff --git a/src/lib/translation/index.ts b/src/lib/translation/index.ts
new file mode 100644
index 0000000..6c4bbe0
--- /dev/null
+++ b/src/lib/translation/index.ts
@@ -0,0 +1,42 @@
+import i18next from "i18next";
+import I18NextHttpBackend, { HttpBackendOptions } from "i18next-http-backend";
+const backendOptions: HttpBackendOptions = {
+    loadPath: 'http://localhost:5173/locales/{{lng}}/{{ns}}.json',
+    request: (_options, url, _payload, callback) => {
+        fetch(url)
+            .then((res) =>
+                res.json().then((r) => {
+                    callback(null, {
+                        data: JSON.stringify(r),
+                        status: 200,
+                    })
+                })
+            )
+            .catch(() => {
+                callback(null, {
+                    status: 500,
+                    data: '',
+                })
+            })
+    },
+}
+export const createI18nInstance = (lng: string) => {
+  console.log('Initializing i18n with language:', lng);
+const i18n = i18next.createInstance();
+
+i18n
+  .use(I18NextHttpBackend)
+  .init({
+    lng,
+    supportedLngs: ["en", "vi"],
+    fallbackLng: "en",
+    defaultNS: "translation",
+    ns: ['translation'],
+    interpolation: {
+      escapeValue: false,
+    },
+    backend: backendOptions,
+  });
+  return i18n;
+};
+export default createI18nInstance;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6e987f9..cbd249f 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -5,9 +5,12 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
-export function debounce<Func extends (...args: any[]) => any>(func: Func, wait: number): Func {
+export function debounce<Func extends (...args: any[]) => any>(
+  func: Func,
+  wait: number
+): Func {
   let timeout: ReturnType<typeof setTimeout> | null;
-  return function(this: any, ...args: any[]) {
+  return function (this: any, ...args: any[]) {
     if (timeout) clearTimeout(timeout);
     timeout = setTimeout(() => {
       func.apply(this, args);
@@ -17,8 +20,8 @@ export function debounce<Func extends (...args: any[]) => any>(func: Func, wait:
 type AspectInfo = {
   width: number;
   height: number;
-  ratio: string;     // ví dụ: "16:9"
-  float: number;     // ví dụ: 1.777...
+  ratio: string; // ví dụ: "16:9"
+  float: number; // ví dụ: 1.777...
 };
 
 function gcd(a: number, b: number): number {
@@ -39,7 +42,7 @@ export function getImageAspectRatio(url: string): Promise<AspectInfo> {
         width: w,
         height: h,
         ratio: `${w / g}:${h / g}`,
-        float: w / h
+        float: w / h,
       });
     };
 
@@ -47,4 +50,102 @@ export function getImageAspectRatio(url: string): Promise<AspectInfo> {
 
     img.src = url;
   });
-}
\ No newline at end of file
+}
+
+export const formatBytes = (bytes?: number) => {
+  if (!bytes) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const value = parseFloat((bytes / Math.pow(k, i)).toFixed(2));
+  return `${value} ${sizes[i]}`;
+  // return `${new Intl.NumberFormat(getRuntimeLocaleTag()).format(value)} ${sizes[i]}`;
+};
+
+export const formatDuration = (seconds?: number) => {
+  if (!seconds) return "0:00";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, "0")}:${s
+      .toString()
+      .padStart(2, "0")}`;
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
+
+export const formatDate = (
+  dateString: string = "",
+  dateOnly: boolean = false
+) => {
+  if (!dateString) return "";
+  const locale =
+    typeof document !== "undefined"
+      ? document.documentElement.lang === "vi"
+        ? "vi-VN"
+        : "en-US"
+      : "en-US";
+  return new Date(dateString).toLocaleDateString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    ...(dateOnly ? {} : { hour: "2-digit", minute: "2-digit" }),
+  });
+};
+type Status = "success" | "failed" | "pending" | string;
+export const getStatusSeverity = (status: Status = "") => {
+  switch (status) {
+    case "success":
+    case "ready":
+      return "success";
+    case "failed":
+      return "danger";
+    case "pending":
+      return "warn";
+    default:
+      return "info";
+  }
+};
+export const getStatusStyles = (status: Status = "") => {
+  switch (status) {
+    case "success":
+      return "bg-success/10 text-success";
+    case "failed":
+      return "bg-danger/10 text-danger";
+    case "pending":
+      return "bg-warning/10 text-warning";
+    default:
+      return "bg-info/10 text-info";
+  }
+};
+export const isAdmin = (role: string = "") => {
+  const r = String(role).toLowerCase();
+  return r === "admin" || r === "superadmin";
+};
+export type ApiErrorPayload = {
+  code?: number;
+  message?: string;
+  data?: Record<string, any>;
+};
+export const getApiErrorPayload = (error: unknown): ApiErrorPayload | null => {
+  if (!error || typeof error !== "object") return null;
+  const candidate = error as {
+    error?: ApiErrorPayload;
+    data?: ApiErrorPayload;
+    message?: string;
+  };
+
+  if (candidate.error && typeof candidate.error === "object")
+    return candidate.error;
+  if (candidate.data && typeof candidate.data === "object")
+    return candidate.data;
+  if (candidate.message) return { message: candidate.message };
+
+  return null;
+};
+export const getApiErrorMessage = (error: unknown, fallback: string) => {
+  const payload = getApiErrorPayload(error);
+  return payload?.message || fallback;
+};
diff --git a/src/main.ts b/src/main.ts
index 2b30978..c0e879e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,56 +1,65 @@
-import { createHead as CSRHead } from "@unhead/vue/client";
-import { createHead as SSRHead } from "@unhead/vue/server";
+import { PiniaColada, useQueryCache } from '@pinia/colada';
+import { createHead as CSRHead } from '@unhead/vue/client';
+import { createHead as SSRHead } from '@unhead/vue/server';
+import { createPinia } from 'pinia';
 import { createSSRApp } from 'vue';
 import { RouterView } from 'vue-router';
+
+import I18NextVue from 'i18next-vue';
+
 import { withErrorBoundary } from './lib/hoc/withErrorBoundary';
-import { vueSWR } from './lib/swr/use-swrv';
+import createI18nInstance from './lib/translation';
 import createAppRouter from './routes';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { createPinia } from "pinia";
-import { useAuthStore } from './stores/auth';
-import ToastService from 'primevue/toastservice';
-import Tooltip from 'primevue/tooltip';
-const bodyClass = ":uno: font-sans text-gray-800 antialiased flex flex-col min-h-screen"
-export function createApp() {
+
+const bodyClass = ':uno: font-sans text-gray-800 antialiased flex flex-col min-h-screen';
+
+const getSerializedAppData = () => {
+    if (typeof document === 'undefined') return {} as Record<string, any>;
+    return JSON.parse(document.getElementById('__APP_DATA__')?.innerText || '{}') as Record<string, any>;
+};
+
+export async function createApp(lng: string = 'en') {
     const pinia = createPinia();
     const app = createSSRApp(withErrorBoundary(RouterView));
-    const head = import.meta.env.SSR ? SSRHead() : CSRHead();
     
+    const head = import.meta.env.SSR ? SSRHead() : CSRHead();
+    const appData = !import.meta.env.SSR ? getSerializedAppData() : ({} as Record<string, any>);
+
     app.use(head);
-    app.use(PrimeVue, {
-        // unstyled: true,
-        theme: {
-            preset: Aura,
-            options: {
-                darkModeSelector: '.my-app-dark',
-                cssLayer: false,
-                // cssLayer: {
-                //     name: 'primevue',
-                //     order: 'theme, base, primevue'
-                // }
-            }
-        }
-    });
-    app.use(ToastService);
     app.directive('nh', {
         created(el) {
             el.__v_skip = true;
         }
     });
-    app.directive("tooltip", Tooltip)
+    app.use(pinia);
+    app.use(I18NextVue, { i18next: createI18nInstance(lng) });
+    app.use(PiniaColada, {
+        pinia,
+        plugins: [
+            () => {
+                // reserved for query plugins
+            }
+        ],
+        queryOptions: {
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+            ssrCatchError: true,
+        }
+    });
+
+    const queryCache = useQueryCache();
+
     if (!import.meta.env.SSR) {
-        Object.entries(JSON.parse(document.getElementById("__APP_DATA__")?.innerText || "{}")).forEach(([key, value]) => {
+        Object.entries(appData).forEach(([key, value]) => {
             (window as any)[key] = value;
         });
-        if ((window as any).$p ) {
+        if ((window as any).$p) {
             pinia.state.value = (window as any).$p;
         }
     }
-    app.use(pinia);
-    app.use(vueSWR({revalidateOnFocus: false}));
+
     const router = createAppRouter();
     app.use(router);
-    
-    return { app, router, head, pinia, bodyClass };
-}
\ No newline at end of file
+
+    return { app, router, head, pinia, bodyClass, queryCache };
+}
diff --git a/src/mocks/videos.ts b/src/mocks/videos.ts
new file mode 100644
index 0000000..f5608f3
--- /dev/null
+++ b/src/mocks/videos.ts
@@ -0,0 +1,356 @@
+import type { Video as ModelVideo } from "@/server/api/proto/app/v1/common";
+
+export const mockVideos: ModelVideo[] = [
+    {
+        id: '1',
+        title: 'Getting Started with Stream UI',
+        description: 'A comprehensive guide to using the new Stream UI platform for your daily tasks.',
+        thumbnail: 'https://picsum.photos/seed/video1/640/360',
+        duration: 345, // 5m 45s
+        status: 'ready',
+        size: 1024 * 1024 * 45, // 45MB
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2).toISOString(), // 2 days ago
+        views: 12500,
+        url: '#'
+    },
+    {
+        id: '2',
+        title: 'Advanced Editing Techniques',
+        description: 'Learn how to edit your videos like a pro using our built-in tools.',
+        thumbnail: 'https://picsum.photos/seed/video2/640/360',
+        duration: 890, // 14m 50s
+        status: 'processing',
+        size: 1024 * 1024 * 128, // 128MB
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 5).toISOString(), // 5 hours ago
+        views: 0,
+        url: '#'
+    },
+    {
+        id: '3',
+        title: 'Project Alpha Demo',
+        description: 'Internal demonstration of the upcoming Project Alpha features.',
+        thumbnail: 'https://picsum.photos/seed/video3/640/360',
+        duration: 120, // 2m 00s
+        status: 'ready',
+        size: 1024 * 1024 * 25, // 25MB
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString(), // 1 week ago
+        views: 340,
+        url: '#'
+    },
+    {
+        id: '4',
+        title: 'Weekly Team Standup',
+        description: 'Recording of the weekly engineering team standup meeting.',
+        thumbnail: 'https://picsum.photos/seed/video4/640/360',
+        duration: 1800, // 30m 00s
+        status: 'ready',
+        size: 1024 * 1024 * 350, // 350MB
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14).toISOString(), // 2 weeks ago
+        views: 12,
+        url: '#'
+    },
+    {
+        id: '5',
+        title: 'Funny Cat Compilation',
+        description: 'A collection of the funniest cat videos found on the internet.',
+        thumbnail: 'https://picsum.photos/seed/video5/640/360',
+        duration: 600, // 10m 00s
+        status: 'failed',
+        size: 1024 * 1024 * 80, // 80MB
+        createdAt: new Date(Date.now() - 1000 * 60 * 30).toISOString(), // 30 mins ago
+        views: 0,
+        url: '#'
+    },
+    {
+        id: '6',
+        title: 'Product Launch Event 2024',
+        description: 'Full coverage of our annual product launch event in San Francisco.',
+        thumbnail: 'https://picsum.photos/seed/video6/640/360',
+        duration: 5400, // 1h 30m
+        status: 'ready',
+        size: 1024 * 1024 * 1024 * 2.5, // 2.5GB
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30).toISOString(), // 1 month ago
+        views: 45000,
+        url: '#'
+    },
+     {
+        id: '7',
+        title: 'Tutorial: React vs Vue',
+        description: 'Comparing the two most popular frontend frameworks.',
+        thumbnail: 'https://picsum.photos/seed/video7/640/360',
+        duration: 1540, 
+        status: 'ready',
+        size: 1024 * 1024 * 200, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3).toISOString(),
+        views: 8900,
+        url: '#'
+    },
+     {
+        id: '8',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '9',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '10',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '11',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '12',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '13',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '14',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '15',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '16',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '17',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '18',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '19',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '20',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '21',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '22',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+     {
+        id: '23',
+        title: 'Nature Documentary - 4K',
+        description: 'Breathtaking views of mountains and rivers.',
+        thumbnail: 'https://picsum.photos/seed/video8/640/360',
+        duration: 3200, 
+        status: 'ready',
+        size: 1024 * 1024 * 800, 
+        createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+        views: 1500,
+        url: '#'
+    },
+]
+
+interface FetchVideosParams {
+    page: number;
+    limit: number;
+    searchQuery?: string;
+    status?: string;
+}
+
+export const fetchMockVideos = async ({ page, limit, searchQuery, status }: FetchVideosParams) => {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    let filtered = [...mockVideos];
+
+    // Filter by search query
+    if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        filtered = filtered.filter(v =>
+            v.title?.toLowerCase().includes(query) ||
+            v.description?.toLowerCase().includes(query)
+        );
+    }
+
+    // Filter by status
+    if (status && status !== 'all') {
+        filtered = filtered.filter(v => v.status?.toLowerCase() === status.toLowerCase());
+    }
+
+    const total = filtered.length;
+
+    // Pagination
+    const start = (page - 1) * limit;
+    const end = start + limit;
+    const data = filtered.slice(start, end);
+
+    return {
+        data,
+        total
+    };
+};
+export const fetchMockVideoById = async (id: string) => {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 500));
+    const video = mockVideos.find(v => v.id === id);
+    if (!video) {
+        throw new Error('Video not found');
+    }
+    return video;
+};
+
+export const updateMockVideo = async (id: string, updates: { title: string; description?: string }) => {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 800));
+    const videoIndex = mockVideos.findIndex(v => v.id === id);
+    if (videoIndex === -1) {
+        throw new Error('Video not found');
+    }
+    mockVideos[videoIndex] = {
+        ...mockVideos[videoIndex],
+        title: updates.title,
+        description: updates.description,
+        updatedAt: new Date().toISOString()
+    };
+    return mockVideos[videoIndex];
+};
+
+export const deleteMockVideo = async (id: string) => {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 600));
+    const videoIndex = mockVideos.findIndex(v => v.id === id);
+    if (videoIndex === -1) {
+        throw new Error('Video not found');
+    }
+    mockVideos.splice(videoIndex, 1);
+    return { success: true };
+};
\ No newline at end of file
diff --git a/src/routes/NotFound.vue b/src/routes/NotFound.vue
index eec1360..101e213 100644
--- a/src/routes/NotFound.vue
+++ b/src/routes/NotFound.vue
@@ -1,12 +1,15 @@
 <template>
-    <vue-head :input="{title: '404 - Page Not Found'}"/>
+    <vue-head :input="{ title: t('notFound.headTitle') }" />
     <div class="mx-auto text-center mt-20 flex flex-col items-center gap-4">
-        <h1>404 - Page Not Found</h1>
-        <p>The page you are looking for does not exist.</p>
-        <router-link class="btn btn-primary" to="/">Go back to Home</router-link>
+        <h1>{{ t('notFound.title') }}</h1>
+        <p>{{ t('notFound.description') }}</p>
+        <router-link class="btn btn-primary" to="/">{{ t('notFound.backHome') }}</router-link>
     </div>
 </template>
 
 <script setup lang="ts">
-import { VueHead } from "@/components/VueHead";
-</script>
\ No newline at end of file
+import { VueHead } from '@/components/VueHead';
+import { useTranslation } from 'i18next-vue';
+
+const { t } = useTranslation();
+</script>
diff --git a/src/routes/add/Add.vue b/src/routes/add/Add.vue
deleted file mode 100644
index 9a96ec9..0000000
--- a/src/routes/add/Add.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <div>Add video</div>
-</template>
\ No newline at end of file
diff --git a/src/routes/analytics/Analytics.vue b/src/routes/analytics/Analytics.vue
new file mode 100644
index 0000000..c253667
--- /dev/null
+++ b/src/routes/analytics/Analytics.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <PageHeader title="Analytics"
+            description="Your streaming analytics will be displayed here."
+            :breadcrumbs="breadcrumbs" />
+        <div class="p-6 rounded-xl border border-gray-200">
+            <h2 class="text-lg font-semibold mb-4">Coming Soon</h2>
+            <p class="text-gray-600">We are working hard to bring you detailed analytics about your streams. Stay tuned!</p>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { useTranslation } from 'i18next-vue';
+
+const {t} = useTranslation()
+const breadcrumbs = computed(() => [
+    { label: t('pageHeader.dashboard'), to: '/overview' },
+    { label: t('pageHeader.settings'), to: '/settings' },
+    { label: "Analytics"}
+    // ...(currentItem.value ? [{ label: currentItem.value.label + (currentItem.value.value.includes("admin") ? " (Admin)" : "") }] : []),
+]);
+</script>
\ No newline at end of file
diff --git a/src/routes/auth/forgot.vue b/src/routes/auth/forgot.vue
index 3c445e8..fdb9d56 100644
--- a/src/routes/auth/forgot.vue
+++ b/src/routes/auth/forgot.vue
@@ -1,20 +1,17 @@
 <template>
     <div class="w-full">
-        <Toast />
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit"
-            class="flex flex-col gap-4 w-full">
+        <form @submit.prevent="onFormSubmit" class="flex flex-col gap-4 w-full">
             <div class="text-sm text-gray-600 mb-2">
-                Enter your email address and we'll send you a link to reset your password.
+                {{ t('auth.forgot.description') }}
             </div>
 
             <div class="flex flex-col gap-1">
-                <label for="email" class="text-sm font-medium text-gray-700">Email address</label>
-                <InputText name="email" type="email" placeholder="you@example.com" fluid />
-                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{
-                    $form.email.error?.message }}</Message>
+                <label for="email" class="text-sm font-medium text-gray-700">{{ t('auth.forgot.email') }}</label>
+                <AppInput id="email" v-model="form.email" type="email" :placeholder="t('auth.forgot.placeholders.email')" />
+                <p v-if="errors.email" class="text-xs text-red-500 mt-0.5">{{ errors.email }}</p>
             </div>
 
-            <Button type="submit" label="Send Reset Link" fluid />
+            <AppButton type="submit" class="w-full">{{ t('auth.forgot.sendResetLink') }}</AppButton>
 
             <div class="text-center mt-2">
                 <router-link to="/login" replace
@@ -23,44 +20,61 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                     </svg>
-                    Back to Sign in
+                    {{ t('auth.forgot.backToSignIn') }}
                 </router-link>
             </div>
-        </Form>
+        </form>
     </div>
 </template>
 
 <script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import { useAppToast } from '@/composables/useAppToast';
 import { reactive } from 'vue';
-import { Form, type FormSubmitEvent } from '@primevue/forms';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useTranslation } from 'i18next-vue';
 import { z } from 'zod';
 
+const toast = useAppToast();
+const { t } = useTranslation();
 
-import { useAuthStore } from '@/stores/auth';
-import { useToast } from "primevue/usetoast";
-import { forgotPassword } from '@/lib/firebase';
-
-const auth = useAuthStore();
-const toast = useToast();
-
-const initialValues = reactive({
+const form = reactive({
     email: ''
 });
 
-const resolver = zodResolver(
-    z.object({
-        email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
-    })
-);
+const errors = reactive<{ email?: string }>({});
 
-const onFormSubmit = ({ valid, values }: FormSubmitEvent) => {
-    if (valid) {
-        forgotPassword(values.email).then(() => {
-             toast.add({ severity: 'success', summary: 'Success', detail: 'Reset link sent', life: 3000 });
-        }).catch(() => {
-             toast.add({ severity: 'error', summary: 'Error', detail: auth.error, life: 3000 });
-        });
+const schema = z.object({
+    email: z.string().min(1, { message: t('auth.forgot.errors.emailRequired') }).email({ message: t('auth.forgot.errors.emailInvalid') })
+});
+
+const onFormSubmit = () => {
+    errors.email = undefined;
+
+    const result = schema.safeParse(form);
+    if (!result.success) {
+        for (const issue of result.error.issues) {
+            const field = issue.path[0] as keyof typeof errors;
+            if (field in errors) errors[field] = issue.message;
+        }
+        return;
     }
+
+    rpcClient.forgotPassword({ email: form.email })
+        .then(() => {
+            toast.add({
+                severity: 'success',
+                summary: t('auth.forgot.toast.successSummary'),
+                detail: t('auth.forgot.toast.successDetail'),
+                life: 3000,
+            });
+        })
+        .catch((error) => {
+            toast.add({
+                severity: 'error',
+                summary: t('auth.forgot.toast.errorSummary'),
+                detail: error.message || t('auth.forgot.toast.errorDetail'),
+                life: 3000,
+            });
+        });
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/auth/google-finalize.vue b/src/routes/auth/google-finalize.vue
new file mode 100644
index 0000000..2c91139
--- /dev/null
+++ b/src/routes/auth/google-finalize.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col items-center gap-3 py-6 text-center">
+    <div class="i-svg-spinners-90-ring-with-bg h-10 w-10 text-blue-600"></div>
+    <p class="text-sm text-gray-600">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppToast } from '@/composables/useAppToast';
+import { useAuthStore } from '@/stores/auth';
+import { computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+const toast = useAppToast();
+
+const status = computed(() => String(route.query.status ?? 'error'));
+const reason = computed(() => String(route.query.reason ?? 'google_login_failed'));
+
+const reasonMessages: Record<string, string> = {
+  missing_code: 'Google did not return an authorization code.',
+  access_denied: 'Google login was cancelled.',
+  exchange_failed: 'Failed to verify your Google sign-in. Please try again.',
+  userinfo_failed: 'Failed to load your Google account information.',
+  userinfo_parse_failed: 'Failed to read your Google account information.',
+  missing_email: 'Your Google account did not provide an email address.',
+  create_user_failed: 'Failed to create your account.',
+  update_user_failed: 'Failed to update your account.',
+  reload_user_failed: 'Failed to finish signing you in.',
+  session_failed: 'Failed to create your sign-in session.',
+  fetch_me_failed: 'Signed in with Google, but failed to load your account.',
+  google_login_failed: 'Google login failed. Please try again.',
+};
+
+const errorMessage = computed(() => reasonMessages[reason.value] ?? reasonMessages.google_login_failed);
+const message = computed(() => status.value === 'success' ? 'Signing you in with Google...' : errorMessage.value);
+
+onMounted(async () => {
+  if (status.value !== 'success') {
+    toast.add({
+      severity: 'error',
+      summary: 'Google login failed',
+      detail: errorMessage.value,
+      life: 5000,
+    });
+    await router.replace({ name: 'login', query: { reason: reason.value } });
+    return;
+  }
+
+  try {
+    const user = await auth.fetchMe();
+    if (!user) {
+      throw new Error('missing_user');
+    }
+
+    await router.replace({ name: 'overview' });
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: 'Google login failed',
+      detail: 'Signed in with Google, but failed to load your account.',
+      life: 5000,
+    });
+    await router.replace({ name: 'login', query: { reason: 'fetch_me_failed' } });
+  }
+});
+</script>
diff --git a/src/routes/auth/layout.vue b/src/routes/auth/layout.vue
index 7b8db21..bb1c2d8 100644
--- a/src/routes/auth/layout.vue
+++ b/src/routes/auth/layout.vue
@@ -1,44 +1,55 @@
 <template>
-    <div class="w-full max-w-md bg-white p-8 rounded-xl border border-primary m-auto overflow-hidden">
-        <div class="text-center mb-8">
-            <router-link to="/" class="inline-flex items-center justify-center w-12 h-12 mb-4">
-                <img class="w-12 h-12" src="/apple-touch-icon.png" alt="Logo" />
-            </router-link>
-            <h2 class="text-2xl font-bold text-gray-900">
-                {{ content[route.name as keyof typeof content]?.title || '' }}
-            </h2>
-            <p class="text-gray-500 text-sm mt-1">
-                {{ content[route.name as keyof typeof content]?.subtitle || '' }}
-            </p>
-            <vue-head :input="{
-                title: content[route.name as keyof typeof content]?.headTitle || 'Authentication',
-                meta: [
-                    { name: 'description', content: content[route.name as keyof typeof content]?.subtitle || '' }
-                ]
-            }" />
+    <div class="mx-a max-w-md w-full min-h-screen flex flex-col items-center px-4 justify-center">
+        <div class="w-full h-6 mb-10"></div>
+        <div
+            class=":uno: w-full shadow-xl bg-white p-6 rounded-xl relative before:(content-[''] absolute inset-[-5px] translate-0 z-[-1] opacity-50 rounded-xl bg-[linear-gradient(135deg,var(--glow-stop-1)_0,var(--glow-stop-2)_25%,var(--glow-stop-3)_50%,var(--glow-stop-4)_75%,var(--glow-stop-5)_100%)] animate-[glow-enter-blur_1s_ease_.5s_both]) after:(content-[''] absolute inset-[-1px] translate-0 z-[-1] opacity-50 rounded-xl bg-[linear-gradient(135deg,transparent_0,transparent_34%,transparent_49%,#fff_57%,#fff_64%,var(--glow-stop-1)_66%,var(--glow-stop-2)_75%,var(--glow-stop-3)_83%,var(--glow-stop-4)_92%,var(--glow-stop-5)_100%)] bg-[length:300%_300%] bg-[position:0_0] bg-no-repeat transition-background-position duration-800 ease animate-[glow-enter-stroke_.5s_ease_.5s_both])">
+            <div class="mb-6">
+                <h2 class="text-xl font-medium text-gray-900">
+                    {{ content[route.name as keyof typeof content.value]?.title || '' }}
+                </h2>
+                <vue-head :input="{
+                    title: content[route.name as keyof typeof content.value]?.headTitle || t('app.name'),
+                    meta: [
+                        { name: 'description', content: content[route.name as keyof typeof content.value]?.subtitle || '' }
+                    ]
+                }" />
+            </div>
+            <router-view />
         </div>
-        <router-view />
+        <router-link to="/" class="inline-flex items-center justify-center w-6 h-6 mt-10 group w-full">
+            <img class="w-6 h-6" src="/apple-touch-icon.png" alt="Logo" />&ensp;<span
+                class="text-[#6a6a6a] font-medium group-hover:text-gray-900">{{ t('app.name') }}</span>
+        </router-link>
     </div>
 </template>
 <script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
-const content = {
+const { t } = useTranslation();
+
+const content = computed(() => ({
     login: {
-        headTitle: "Login to your account",
-        title: 'Welcome back',
-        subtitle: 'Please enter your details to sign in.'
+        headTitle: t('auth.layout.login.headTitle'),
+        title: t('auth.layout.login.title'),
+        subtitle: t('auth.layout.login.subtitle')
     },
     signup: {
-        headTitle: "Create your account",
-        title: 'Create your account',
-        subtitle: 'Please fill in the information to create your account.'
+        headTitle: t('auth.layout.signup.headTitle'),
+        title: t('auth.layout.signup.title'),
+        subtitle: t('auth.layout.signup.subtitle')
     },
     forgot: {
-        title: 'Forgot your password?',
-        subtitle: "Enter your email address and we'll send you a link to reset your password.",
-        headTitle: "Reset your password"
+        title: t('auth.layout.forgot.title'),
+        subtitle: t('auth.layout.forgot.subtitle'),
+        headTitle: t('auth.layout.forgot.headTitle')
+    },
+    'google-auth-finalize': {
+        title: 'Google sign in',
+        subtitle: 'Completing your Google sign in.',
+        headTitle: 'Google sign in - Holistream'
     }
-}
-</script>
\ No newline at end of file
+}));
+</script>
diff --git a/src/routes/auth/login.vue b/src/routes/auth/login.vue
index 175e1d6..48b8e54 100644
--- a/src/routes/auth/login.vue
+++ b/src/routes/auth/login.vue
@@ -1,100 +1,123 @@
 <template>
     <div class="w-full">
-        <Toast />
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit"
-            class="flex flex-col gap-4 w-full">
+        <form @submit.prevent="onFormSubmit" class="flex flex-col gap-4 w-full">
             <div class="flex flex-col gap-1">
-                <label for="email" class="text-sm font-medium text-gray-700">Email</label>
-                <InputText name="email" type="text" placeholder="user@example.com" fluid
+                <label for="email" class="text-sm font-medium text-gray-700">{{ t('auth.login.email') }}</label>
+                <AppInput id="email" v-model="form.email" type="text" :placeholder="t('auth.signup.placeholders.email')"
                     :disabled="auth.loading" />
-                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{
-                    $form.email.error?.message }}</Message>
+                <p v-if="errors.email" class="text-xs text-red-500 mt-0.5">{{ errors.email }}</p>
             </div>
 
             <div class="flex flex-col gap-1">
-                <label for="password" class="text-sm font-medium text-gray-700">Password</label>
-                <Password name="password" placeholder="••••••••" :feedback="false" toggleMask fluid
-                    :inputStyle="{ width: '100%' }" :disabled="auth.loading" />
-                <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
-                    $form.password.error?.message }}</Message>
+                <label for="password" class="text-sm font-medium text-gray-700">{{ t('auth.login.password') }}</label>
+                <div class="relative">
+                    <AppInput id="password" v-model="form.password" :type="showPassword ? 'text' : 'password'"
+                        :placeholder="t('auth.signup.placeholders.password')" :disabled="auth.loading" />
+                    <button type="button"
+                        class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
+                        @click="showPassword = !showPassword" tabindex="-1">
+                        <svg v-if="!showPassword" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                        </svg>
+                        <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                        </svg>
+                    </button>
+                </div>
+                <p v-if="errors.password" class="text-xs text-red-500 mt-0.5">{{ errors.password }}</p>
             </div>
 
-            <div class="flex items-center justify-between">
-                <div class="flex items-center gap-2">
-                    <Checkbox inputId="remember-me" name="rememberMe" binary :disabled="auth.loading" />
-                    <label for="remember-me" class="text-sm text-gray-900">Remember me</label>
-                </div>
+            <div class="flex items-center justify-end">
                 <div class="text-sm">
                     <router-link to="/forgot"
-                        class="font-medium text-blue-600 hover:text-blue-500 hover:underline">Forgot
-                        password?</router-link>
+                        class="text-blue-600 hover:text-blue-500 hover:underline">{{ t('auth.login.forgotPassword') }}</router-link>
                 </div>
             </div>
 
-            <Button type="submit" :label="auth.loading ? 'Signing in...' : 'Sign in'" fluid :loading="auth.loading" />
+            <AppButton type="submit" :loading="auth.loading" class="w-full">
+                {{ auth.loading ? `${t('common.loading')}...` : t('auth.login.signIn') }}
+            </AppButton>
 
-            <div class="relative my-4">
+            <div class="relative">
                 <div class="absolute inset-0 flex items-center">
                     <div class="w-full border-t border-gray-300"></div>
                 </div>
                 <div class="relative flex justify-center text-sm">
-                    <span class="px-2 bg-white text-gray-500">Or continue with</span>
+                    <span class="px-2 bg-white text-gray-500">{{ t('auth.login.google') }}</span>
                 </div>
             </div>
 
-            <Button type="button" variant="outlined" severity="secondary"
-                class="w-full flex items-center justify-center gap-2" @click="loginWithGoogle" :disabled="auth.loading">
+            <AppButton type="button" variant="secondary" class="w-full flex items-center justify-center gap-2"
+                @click="loginWithGoogle" :disabled="auth.loading">
                 <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                     <path
                         d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" />
                 </svg>
-                Google
-            </Button>
-
-            <p class="mt-4 text-center text-sm text-gray-600">
-                Don't have an account?
-                <router-link to="/sign-up" class="font-medium text-blue-600 hover:text-blue-500 hover:underline">Sign up
-                    for free</router-link>
-            </p>
-        </Form>
+                {{ t('auth.login.google') }}
+            </AppButton>
+            <div class="mt-2 flex flex-col items-center justify-center gap-1 text-sm text-gray-600">
+                <p class="text-center text-sm text-gray-600">
+                    {{ t('auth.login.noAccount') }}
+                    <router-link to="/sign-up"
+                        class="font-medium text-blue-600 hover:text-blue-500 hover:underline">{{ t('auth.login.signUp') }}</router-link>
+                </p>
+            </div>
+        </form>
     </div>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { Form, type FormSubmitEvent } from '@primevue/forms';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
-import { z } from 'zod';
 import { useAuthStore } from '@/stores/auth';
-import Toast from 'primevue/toast';
-import { useToast } from "primevue/usetoast";
-const t = useToast();
-const auth = useAuthStore();
-// const $form = Form.useFormContext();
-watch(() => auth.error, (newError) => {
-    if (newError) {
-        t.add({ severity: 'error', summary: String(auth.error), detail: newError, life: 5000 });
-    }
-});
+import { useAppToast } from '@/composables/useAppToast';
+import { reactive, ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import { z } from 'zod';
 
-const initialValues = reactive({
+const toast = useAppToast();
+const auth = useAuthStore();
+const showPassword = ref(false);
+const { t } = useTranslation();
+
+const form = reactive({
     email: '',
     password: '',
     rememberMe: false
 });
 
-const resolver = zodResolver(
-    z.object({
-        email: z.string().min(1, { message: 'Email or username is required.' }),
-        password: z.string().min(1, { message: 'Password is required.' })
-    })
-);
+const errors = reactive<{ email?: string; password?: string }>({});
 
-const onFormSubmit = async ({ valid, values }: FormSubmitEvent) => {
-    if (valid) auth.login(values.email, values.password);
+const schema = z.object({
+    email: z.string().min(1, { message: t('auth.login.errors.emailRequired') }),
+    password: z.string().min(1, { message: t('auth.login.errors.passwordRequired') })
+});
+
+watch(() => auth.error, (newError) => {
+    if (newError) {
+        toast.add({ severity: 'error', summary: String(auth.error), detail: newError, life: 5000 });
+    }
+});
+
+const onFormSubmit = () => {
+    errors.email = undefined;
+    errors.password = undefined;
+
+    const result = schema.safeParse(form);
+    if (!result.success) {
+        for (const issue of result.error.issues) {
+            const field = issue.path[0] as keyof typeof errors;
+            if (field in errors) errors[field] = issue.message;
+        }
+        return;
+    }
+
+    auth.login(form.email, form.password);
 };
 
 const loginWithGoogle = () => {
     auth.loginWithGoogle();
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/auth/signup.vue b/src/routes/auth/signup.vue
index a209fa7..c8dc51b 100644
--- a/src/routes/auth/signup.vue
+++ b/src/routes/auth/signup.vue
@@ -1,73 +1,118 @@
 <template>
     <div class="w-full">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit"
-            class="flex flex-col gap-4 w-full">
+        <form @submit.prevent="onFormSubmit" class="flex flex-col gap-4 w-full">
             <div class="flex flex-col gap-1">
-                <label for="name" class="text-sm font-medium text-gray-700">Full Name</label>
-                <InputText name="name" placeholder="John Doe" fluid />
-                <Message v-if="$form.name?.invalid" severity="error" size="small" variant="simple">{{
-                    $form.name.error?.message }}</Message>
+                <label for="name" class="text-sm font-medium text-gray-700">{{ t('auth.signup.fullName') }}</label>
+                <AppInput id="name" v-model="form.name" :placeholder="t('auth.signup.placeholders.name')" />
+                <p v-if="errors.name" class="text-xs text-red-500 mt-0.5">{{ errors.name }}</p>
             </div>
 
             <div class="flex flex-col gap-1">
-                <label for="email" class="text-sm font-medium text-gray-700">Email address</label>
-                <InputText name="email" type="email" placeholder="you@example.com" fluid />
-                <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{
-                    $form.email.error?.message }}</Message>
+                <label for="email" class="text-sm font-medium text-gray-700">{{ t('auth.signup.email') }}</label>
+                <AppInput id="email" v-model="form.email" type="email" :placeholder="t('auth.signup.placeholders.email')" />
+                <p v-if="errors.email" class="text-xs text-red-500 mt-0.5">{{ errors.email }}</p>
             </div>
 
             <div class="flex flex-col gap-1">
-                <label for="password" class="text-sm font-medium text-gray-700">Password</label>
-                <Password name="password" placeholder="Create a password" :feedback="true" toggleMask fluid
-                    :inputStyle="{ width: '100%' }" />
-                <small class="text-gray-500">Must be at least 8 characters.</small>
-                <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
-                    $form.password.error?.message }}</Message>
+                <label for="password" class="text-sm font-medium text-gray-700">{{ t('auth.signup.password') }}</label>
+                <div class="relative">
+                    <AppInput id="password" v-model="form.password" :type="showPassword ? 'text' : 'password'"
+                        :placeholder="t('auth.signup.placeholders.password')" />
+                    <button type="button"
+                        class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
+                        @click="showPassword = !showPassword" tabindex="-1">
+                        <svg v-if="!showPassword" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                        </svg>
+                        <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                        </svg>
+                    </button>
+                </div>
+                <small class="text-gray-500">{{ t('auth.signup.passwordHint') }}</small>
+                <p v-if="errors.password" class="text-xs text-red-500 mt-0.5">{{ errors.password }}</p>
             </div>
 
-            <Button type="submit" label="Create Account" fluid />
+            <div v-if="refUsername" class="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-700">
+                Signing up with referral: <span class="font-medium">@{{ refUsername }}</span>
+            </div>
+
+            <AppButton type="submit" class="w-full">{{ t('auth.signup.createAccount') }}</AppButton>
+
+            <div class="relative">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-300"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-white text-gray-500">{{ t('auth.login.google') }}</span>
+                </div>
+            </div>
+
+            <AppButton type="button" variant="secondary" class="w-full flex items-center justify-center gap-2" @click="signupWithGoogle">
+                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" />
+                </svg>
+                Continue with Google
+            </AppButton>
 
             <p class="mt-4 text-center text-sm text-gray-600">
-                Already have an account?
-                <router-link to="/login" class="font-medium text-blue-600 hover:text-blue-500 hover:underline">Sign
-                    in</router-link>
+                {{ t('auth.signup.alreadyHave') }}
+                <router-link to="/login"
+                    class="font-medium text-blue-600 hover:text-blue-500 hover:underline">{{ t('auth.signup.signIn') }}</router-link>
             </p>
-        </Form>
+        </form>
     </div>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { Form, type FormSubmitEvent } from '@primevue/forms';
-import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useAuthStore } from '@/stores/auth';
+import { computed, reactive, ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import { useRoute } from 'vue-router';
 import { z } from 'zod';
 
-
-import { useAuthStore } from '@/stores/auth';
-import { useToast } from "primevue/usetoast";
-
 const auth = useAuthStore();
-const toast = useToast();
+const route = useRoute();
+const showPassword = ref(false);
+const { t } = useTranslation();
+const refUsername = computed(() => String(route.query.ref || '').trim());
 
-const initialValues = reactive({
+const form = reactive({
     name: '',
     email: '',
     password: ''
 });
 
-const resolver = zodResolver(
-    z.object({
-        name: z.string().min(1, { message: 'Name is required.' }),
-        email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' }),
-        password: z.string().min(8, { message: 'Password must be at least 8 characters.' })
-    })
-);
+const errors = reactive<{ name?: string; email?: string; password?: string }>({});
 
-const onFormSubmit = ({ valid, values }: FormSubmitEvent) => {
-    if (valid) {
-        auth.register(values.name, values.email, values.password).catch(() => {
-             toast.add({ severity: 'error', summary: 'Error', detail: auth.error, life: 3000 });
-        });
+const schema = z.object({
+    name: z.string().min(1, { message: t('auth.signup.errors.nameRequired') }),
+    email: z.string().min(1, { message: t('auth.signup.errors.emailRequired') }).email({ message: t('auth.signup.errors.emailInvalid') }),
+    password: z.string().min(8, { message: t('auth.signup.errors.passwordMin') })
+});
+
+const onFormSubmit = () => {
+    errors.name = undefined;
+    errors.email = undefined;
+    errors.password = undefined;
+
+    const result = schema.safeParse(form);
+    if (!result.success) {
+        for (const issue of result.error.issues) {
+            const field = issue.path[0] as keyof typeof errors;
+            if (field in errors) errors[field] = issue.message;
+        }
+        return;
     }
+
+    auth.register(form.name, form.email, form.password, refUsername.value || undefined);
 };
-</script>
\ No newline at end of file
+
+const signupWithGoogle = () => {
+    auth.loginWithGoogle(refUsername.value || undefined);
+};
+</script>
diff --git a/src/routes/home/Home.vue b/src/routes/home/Home.vue
index e370799..f005085 100644
--- a/src/routes/home/Home.vue
+++ b/src/routes/home/Home.vue
@@ -1,234 +1,373 @@
-<template>
-	<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex items-center justify-between h-16">
-                <div class="flex items-center gap-2 cursor-pointer" onclick="window.scrollTo(0,0)"><img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />
-                    <span class="font-bold text-xl tracking-tight text-slate-900">EcoStream</span>
-                </div>
-                <div class="hidden md:flex items-center space-x-8">
-                    <a href="#features" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">Features</a>
-                    <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">Pricing</a>
-                </div>
-                <div class="hidden md:flex items-center gap-4">
-                    <RouterLink to="/login" class="text-sm font-semibold text-slate-600 hover:text-slate-900 cursor-pointer">Log in</RouterLink>
-                    <RouterLink to="/sign-up" class="bg-slate-900 hover:bg-black text-white px-5 py-2.5 rounded-lg text-sm font-semibold cursor-pointer">
-                        Start for free
-                    </RouterLink>
-                </div>
-            </div>
-        </div>
-    </nav>
-	<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
-        <div class="absolute inset-0 opacity-[0.4] -z-10"></div>
-        <div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[800px] h-[800px] bg-brand-100/50 rounded-full blur-3xl -z-10 mix-blend-multiply"></div>
-        <div class="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-teal-100/50 rounded-full blur-3xl -z-10 mix-blend-multiply"></div>
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
 
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight text-slate-900 mb-6 leading-[1.1]">
-                Video infrastructure for <br>
-                <span class="text-gradient">modern internet.</span>
-            </h1>
-            
-            <p class="text-xl text-slate-500 max-w-2xl mx-auto mb-10 leading-relaxed">
-                Seamlessly host, encode, and stream video with our developer-first API. 
-                Optimized for speed, built for scale.
-            </p>
-            
-            <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <RouterLink to="/get-started" class="flex btn btn-secondary !rounded-xl !p-4 press-animated">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="46 -286 524 580"><path d="M56 284v-560L560 4 56 284z" fill="#fff"/></svg>&nbsp;
-                    Get Started
-                </RouterLink>
-                <RouterLink to="/docs" class="flex btn btn-outline-primary !rounded-xl">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -261 468 503"><path d="M256-139V72c0 18-14 32-32 32s-32-14-32-32v-211l-41 42c-13 12-33 12-46 0-12-13-12-33 0-46l96-96c13-12 33-12 46 0l96 96c12 13 12 33 0 46-13 12-33 12-46 0l-41-42zm-32 291c44 0 80-36 80-80h80c35 0 64 29 64 64v32c0 35-29 64-64 64H64c-35 0-64-29-64-64v-32c0-35 29-64 64-64h80c0 44 36 80 80 80zm144 24c13 0 24-11 24-24s-11-24-24-24-24 11-24 24 11 24 24 24z" fill="#14a74b"/></svg>&nbsp;
-                    Upload video
-                </RouterLink>
-            </div>
-        </div>
-    </section>
-	<section id="features" class="py-24 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="mb-16 md:text-center max-w-3xl mx-auto">
-                <h2 class="text-3xl font-bold text-slate-900 mb-4">Everything you need to ship video</h2>
-                <p class="text-lg text-slate-500">Focus on building your product. We'll handle the complex video infrastructure.</p>
-            </div>
+const { t } = useTranslation();
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div class="md:col-span-2 bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-primary/60 transition-all group overflow-hidden relative">
-                    <div class="relative z-10">
-                        <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center mb-6 border border-slate-100">
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="532" viewBox="-8 -258 529 532"><path d="M342 32c-2 69-16 129-35 172-10 23-22 40-32 49-10 10-16 11-19 11h-1c-3 0-9-1-19-11-10-9-22-26-32-49-19-43-33-103-35-172h173zm169 0c-9 103-80 188-174 219 30-51 50-129 53-219h121zm-390 0c3 89 23 167 53 218C80 219 11 134 2 32h119zm53-266c-30 51-50 129-53 218H2c9-102 78-186 172-218zm82-14c3 0 9 1 19 11 10 9 22 26 32 50 19 42 33 102 35 171H169c3-69 16-129 35-171 10-24 22-41 32-50s16-11 19-11h1zm81 13c94 31 165 116 174 219H390c-3-90-23-168-53-219z" fill="#059669"/></svg>
-						</div>
-                        <h3 class="text-xl font-bold text-slate-900 mb-2">Global Edge Network</h3>
-                        <p class="text-slate-500 max-w-md">Content delivered from 200+ PoPs worldwide. Automatic region selection ensures the lowest latency for every viewer.</p>
-                    </div>
-                    <div class="absolute right-0 bottom-0 opacity-10 translate-x-1/4 translate-y-1/4">
-						<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-10 -258 532 532"><path d="M464 8c0-19-3-38-8-56l-27-5c-8-2-15 2-19 9-6 11-19 17-31 13l-14-5c-8-2-17 0-22 5-4 4-4 10 0 14l33 33c5 5 8 12 8 19 0 12-8 23-20 26l-6 1c-3 1-6 5-6 9v12c0 13-4 27-13 38l-25 34c-6 8-16 13-26 13-18 0-32-14-32-32V88c0-9-7-16-16-16h-32c-26 0-48-22-48-48V-4c0-13 6-24 16-32l39-30c6-4 13-6 20-6 3 0 7 1 10 2l32 10c7 3 15 3 22 1l36-9c10-2 17-11 17-22 0-8-5-16-13-20l-29-15c-3-2-8-1-11 2l-4 4c-4 4-11 7-17 7-4 0-8-1-11-3l-15-7c-7-4-15-2-20 4l-13 17c-6 7-16 8-22 1-3-2-5-6-5-10v-41c0-6-1-11-4-16l-10-18C102-154 48-79 48 8c0 115 93 208 208 208S464 123 464 8zM0 8c0-141 115-256 256-256S512-133 512 8 397 264 256 264 0 149 0 8z" fill="#1e3050"/></svg>
-					</div>
-                </div>
+const signalItems = computed(() => [
+    { label: t('home.features.live.bitrate'), value: t('home.features.live.bitrateValue') },
+    { label: t('home.features.live.fps'), value: t('home.features.live.fpsValue') },
+    { label: t('home.features.live.latency'), value: t('home.features.live.latencyValue') },
+]);
 
-                <div class="md:row-span-2 bg-slate-900 rounded-2xl p-8 text-white relative overflow-hidden group">
-                    <div class="absolute inset-0 bg-gradient-to-b from-slate-800/50 to-transparent"></div>
-                    <div class="relative z-10">
-                        <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mb-6 backdrop-blur-sm border border-white/10">
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -146 468 384"><path d="M392-136c-31 0-56 25-56 56v280c0 16 13 28 28 28h28c31 0 56-25 56-56V-80c0-31-25-56-56-56zM168 4c0-31 25-56 56-56h28c16 0 28 13 28 28v224c0 16-12 28-28 28h-56c-15 0-28-12-28-28V4zM0 88c0-31 25-56 56-56h28c16 0 28 13 28 28v140c0 16-12 28-28 28H56c-31 0-56-25-56-56V88z" fill="#fff"/></svg>
-                        </div>
-                        <h3 class="text-xl font-bold mb-2">Live Streaming API</h3>
-                        <p class="text-slate-400 text-sm leading-relaxed mb-8">Scale to millions of concurrent viewers with ultra-low latency. RTMP ingest and HLS playback supported natively.</p>
-                        
-                        <!-- Visual -->
-                        <div class="bg-slate-800/50 rounded-lg p-4 border border-white/5 font-mono text-xs text-brand-300">
-                            <div class="flex justify-between items-center mb-3 border-b border-white/5 pb-2">
-                                <span class="text-slate-500">Live Status</span>
-                                <span class="flex items-center gap-1.5 text-red-500 text-[10px] uppercase font-bold tracking-wider animate-pulse"><span class="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span> On Air</span>
-                            </div>
-                            <div class="space-y-1">
-                                <div class="flex justify-between"><span class="text-slate-400">Bitrate:</span> <span class="text-white">6000 kbps</span></div>
-                                <div class="flex justify-between"><span class="text-slate-400">FPS:</span> <span class="text-white">60</span></div>
-                                <div class="flex justify-between"><span class="text-slate-400">Latency:</span> <span class="text-brand-400">~2s</span></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+const featurePills = computed(() => [
+    t('home.features.global.title'),
+    t('home.features.encoding.title'),
+    t('home.features.analytics.title'),
+]);
 
-                <!-- Standard Feature -->
-                <div class="bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-brand-200 transition-all group hover:shadow-lg hover:shadow-brand-500/5">
-                    <div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-purple-600 border border-slate-100">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 570 570"><path d="M50 428c-5 5-5 14 0 19s14 5 19 0l237-237c5-5 5-14 0-19s-14-5-19 0L50 428zm16-224c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zM174 60c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zm215 29c-5 5-5 14 0 19s14 5 19 0l39-39c5-5 5-14 0-19s-14-5-19 0l-39 39zm21 357c-5 5-5 14 0 19s14 5 19 0l18-18c5-5 5-14 0-19s-14-5-19 0l-18 18z" fill="#a6acb9"/><path d="M170 26c14-15 36-15 50 0l18 18c15 14 15 36 0 50l-18 18c-14 15-36 15-50 0l-18-18c-15-14-15-36 0-50l18-18zm35 41c5-5 5-14 0-19-6-5-14-5-20 0l-11 12c-5 5-5 13 0 19 5 5 14 5 19 0l12-12zm204 342c21-21 55-21 76 0l18 18c21 21 21 55 0 76l-18 18c-21 21-55 21-76 0l-18-18c-21-21-21-55 0-76l18-18zm38 38c5-5 5-14 0-19s-14-5-19 0l-18 18c-5 5-5 14 0 19s14 5 19 0l18-18zM113 170c-15-15-37-15-51 0l-18 18c-14 14-14 36 0 50l18 18c14 15 37 15 51 0l18-18c14-14 14-36 0-50l-18-18zm-16 41-12 12c-5 5-14 5-19 0-5-6-5-14 0-20l11-11c6-5 14-5 20 0 5 5 5 14 0 19zM485 31c-21-21-55-21-76 0l-39 39c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l39-39c21-21 21-55 0-76l-54-54zm-38 38-39 39c-5 5-14 5-19 0s-5-14 0-19l39-39c5-5 14-5 19 0s5 14 0 19zm-49 233c21-21 21-55 0-76l-54-54c-21-21-55-21-76 0L31 409c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l237-237zm-92-92L69 447c-5 5-14 5-19 0s-5-14 0-19l237-237c5-5 14-5 19 0s5 14 0 19z" fill="#1e3050"/></svg>
-                    </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">Instant Encoding</h3>
-                    <p class="text-slate-500 text-sm">Upload raw files and get optimized HLS/DASH streams in seconds.</p>
-                </div>
+const getFeatureList = (key: string): string[] => {
+    const localized = t(key, { returnObjects: true });
+    return Array.isArray(localized) ? localized.map((item) => String(item)) : [];
+};
 
-                <!-- Standard Feature -->
-                <div class="bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-brand-200 transition-all group hover:shadow-lg hover:shadow-brand-500/5">
-                    <div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-orange-600 border border-slate-100">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -226 532 468"><path d="M32-216c18 0 32 14 32 32v336c0 9 7 16 16 16h400c18 0 32 14 32 32s-14 32-32 32H80c-44 0-80-36-80-80v-336c0-18 14-32 32-32zM144-24c18 0 32 14 32 32v64c0 18-14 32-32 32s-32-14-32-32V8c0-18 14-32 32-32zm144-64V72c0 18-14 32-32 32s-32-14-32-32V-88c0-18 14-32 32-32s32 14 32 32zm80 32c18 0 32 14 32 32v96c0 18-14 32-32 32s-32-14-32-32v-96c0-18 14-32 32-32zm144-96V72c0 18-14 32-32 32s-32-14-32-32v-224c0-18 14-32 32-32s32 14 32 32z" fill="#1e3050"/></svg>
-                    </div>
-                    <h3 class="text-xl font-bold text-slate-900 mb-2">Deep Analytics</h3>
-                    <p class="text-slate-500 text-sm">Session-level insights, quality of experience (QoE) metrics, and more.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-	 <!-- Pricing -->
-    <section id="pricing" class="py-24 border-t border-slate-100 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl font-bold text-slate-900 mb-4">{{ pricing.title }}</h2>
-                <p class="text-slate-500">{{ pricing.subtitle }}</p>
-            </div>
+const pricing = computed(() => ({
+    title: t('home.pricing.title'),
+    subtitle: t('home.pricing.subtitle'),
+    packs: [
+        {
+            name: t('home.pricing.hobby.name'),
+            price: '$0',
+            features: getFeatureList('home.pricing.hobby.features'),
+            buttonText: t('home.pricing.hobby.button'),
+            tag: '',
+        },
+        {
+            name: t('home.pricing.pro.name'),
+            price: '$29',
+            features: getFeatureList('home.pricing.pro.features'),
+            buttonText: t('home.pricing.pro.button'),
+            tag: t('home.pricing.pro.tag'),
+        },
+        {
+            name: t('home.pricing.scale.name'),
+            price: '$99',
+            features: getFeatureList('home.pricing.scale.features'),
+            buttonText: t('home.pricing.scale.button'),
+            tag: t('home.pricing.scale.tag'),
+        }
+    ]
+}));
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
-                <div v-for="pack in pricing.packs" :key="pack.name" :class="cn(':uno: p-8 rounded-2xl relative overflow-hidden hover:border-primary transition-colors flex flex-col justify-between', pack.tag == 'POPULAR' ? 'border-primary/80 border-2' : 'border-slate-200 border')" :style="{background: pack.bg}">
-                    <div v-if="pack.tag" class="absolute top-0 right-0 bg-primary/80 text-white text-xs font-bold px-3 py-1 rounded-bl-lg uppercase">{{ pack.tag }}</div>
-                    <div>
-                        <h3 class="font-semibold text-slate-900 text-xl mb-2">{{ pack.name }}</h3>
-                        <div class="flex items-baseline gap-1 mb-6">
-                            <span class="text-4xl font-bold text-slate-900">{{ pack.price }}</span>
-                            <span class="text-slate-500">/mo</span>
-                        </div>
-                    </div>
-                    <ul class="space-y-3 mb-8 text-sm text-slate-600">
-                        <li v-for="value in pack.features" :key="value" class="flex items-center gap-3"><Check-Icon class="fas fa-check text-brand-500"/> {{ value }}</li>
-                    </ul>
-                    <router-link to="/sign-up" :class="cn('btn flex justify-center w-full !py-2.5', pack.tag == 'POPULAR' ? 'btn-primary' : 'btn-outline-primary')">{{ pack.buttonText }}</router-link>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="bg-white border-t border-slate-100 pt-16 pb-8">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
-                <div class="col-span-2">
-                    <div class="flex items-center gap-2 mb-4">
-                        <div class="w-6 h-6 bg-brand-600 rounded flex items-center justify-center text-white">
-                            <img class="h-6 w-6" src="/apple-touch-icon.png" alt="Logo" />
-                        </div>
-                        <span class="font-bold text-lg text-slate-900">EcoStream</span>
-                    </div>
-                    <p class="text-slate-500 text-sm max-w-xs">Building the video layer of the internet. Designed for developers.</p>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-slate-900 mb-4 text-sm">Product</h4>
-                    <ul class="space-y-2 text-sm text-slate-500">
-                        <li><a href="#" class="hover:text-brand-600">Features</a></li>
-                        <li><a href="#" class="hover:text-brand-600">Pricing</a></li>
-                        <li><a href="#" class="hover:text-brand-600">Showcase</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-slate-900 mb-4 text-sm">Company</h4>
-                    <ul class="space-y-2 text-sm text-slate-500">
-                        <li><a href="#" class="hover:text-brand-600">About</a></li>
-                        <li><a href="#" class="hover:text-brand-600">Blog</a></li>
-                        <li><a href="#" class="hover:text-brand-600">Careers</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-slate-900 mb-4 text-sm">Legal</h4>
-                    <ul class="space-y-2 text-sm text-slate-500">
-                        <li><a href="#" class="hover:text-brand-600">Privacy</a></li>
-                        <li><a href="#" class="hover:text-brand-600">Terms</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="pt-8 border-t border-slate-100 text-center text-sm text-slate-400">
-                &copy; 2026 EcoStream Inc. All rights reserved.
-            </div>
-        </div>
-    </footer>
-    <Head>
-        <title>EcoStream - Video infrastructure for modern internet</title>
-        <meta name="description" content="Seamlessly host, encode, and stream video with our developer-first API. Optimized for speed, built for scale." />
-    </Head>
-</template>
-<script lang="ts" setup>
-import { Head } from '@unhead/vue/components'
-import { cn } from '@/lib/utils';
-    const pricing = {
-        title: "Simple, transparent pricing",
-        subtitle: "Choose the plan that fits your needs. No hidden fees.",
-        packs: [
-            {
-                name: "Hobby",
-                price: "$0",
-                features: [
-                    "Unlimited upload",
-                    "1 Hour of Storage",
-                    "Standard Support",
-                ],
-                buttonText: "Start Free",
-                tag: "",
-                bg: "#f9fafb",
-            },
-            {
-                name: "Pro",
-                price: "$29",
-                features: [
-                    "Ads free player",
-                    "Support M3U8",
-                    "Unlimited upload",
-                    "Custom ads"
-                ],
-                buttonText: "Get Started",
-                tag: "POPULAR",
-                bg: "#eff6ff",
-            },
-            {
-                name: "Scale",
-                price: "$99",
-                features: [
-                    "5 TB Bandwidth",
-                    "500 Hours Storage",
-                    "Priority Support"
-                ],
-                buttonText: "Contact Sales",
-                tag: "Best Value",
-                bg: "#eef4f7",
-            }
-        ]
-    }
+const featuredTag = computed(() => t('home.pricing.pro.tag'));
+const scaleTag = computed(() => t('home.pricing.scale.tag'));
+const isFeaturedPack = (tag: string) => tag === featuredTag.value;
+const isScalePack = (tag: string) => tag === scaleTag.value;
 </script>
+
+<template>
+    <div class="bg-white text-slate-900">
+        <section class="relative overflow-hidden border-b border-slate-100 bg-gradient-to-b from-slate-50 via-white to-white">
+            <div class="pointer-events-none absolute inset-0">
+                <div class="absolute inset-0 opacity-60 bg-[linear-gradient(rgba(148,163,184,0.12)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.12)_1px,transparent_1px)] bg-[length:64px_64px] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,0.55),transparent_78%)]"></div>
+                <div class="absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,rgba(20,167,75,0.12),transparent_58%)]"></div>
+                <div class="absolute -left-16 top-28 h-56 w-56 rounded-full bg-primary/10 blur-3xl"></div>
+                <div class="absolute right-0 top-20 h-72 w-72 rounded-full bg-sky-100 blur-3xl"></div>
+            </div>
+
+            <div class="relative mx-auto max-w-7xl px-4 pb-18 pt-28 sm:px-6 lg:px-8 lg:pb-24 lg:pt-34">
+                <div class="grid items-center gap-12 lg:grid-cols-[1.02fr_0.98fr] lg:gap-14">
+                    <div>
+                        <div class="inline-flex items-center gap-2 rounded-full border border-primary/15 bg-white/90 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-primary shadow-sm">
+                            <span class="h-2 w-2 rounded-full bg-primary"></span>
+                            {{ t('home.features.live.onAir') }}
+                        </div>
+
+                        <h1 class="mt-7 max-w-4xl text-5xl font-bold leading-[1.02] tracking-tight text-slate-900 sm:text-6xl lg:text-7xl">
+                            <span class="block">{{ t('home.hero.titleLine1') }}</span>
+                            <span class="mt-2 block bg-[linear-gradient(135deg,#0f172a_0%,#14a74b_55%,#0ea5e9_100%)] bg-clip-text text-transparent">
+                                {{ t('home.hero.titleLine2') }}
+                            </span>
+                        </h1>
+
+                        <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-600 lg:text-xl">
+                            {{ t('home.hero.subtitle') }}
+                        </p>
+
+                        <div class="mt-9 flex flex-col gap-3 sm:flex-row">
+                            <RouterLink to="/sign-up" class="btn btn-success !rounded-xl !px-6 !py-3.5 shadow-sm">
+                                {{ t('home.hero.getStarted') }}
+                            </RouterLink>
+                            <RouterLink to="/login" class="btn btn-outline-primary !rounded-xl !px-6 !py-3.5">
+                                {{ t('home.hero.uploadVideo') }}
+                            </RouterLink>
+                        </div>
+
+                        <div class="mt-10 grid gap-4 sm:grid-cols-3">
+                            <div
+                                v-for="signal in signalItems"
+                                :key="signal.label"
+                                class="rounded-2xl border border-slate-200 bg-white px-5 py-4"
+                            >
+                                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
+                                    {{ signal.label }}
+                                </p>
+                                <p class="mt-2 text-xl font-bold text-slate-900">
+                                    {{ signal.value }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="relative mx-auto w-full max-w-[36rem] lg:mr-0">
+                        <div class="rounded-[2rem] border border-slate-200 bg-white p-5 shadow-[0_24px_70px_rgba(15,23,42,0.08)] sm:p-6">
+                            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
+                                <div>
+                                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
+                                        {{ t('home.features.live.status') }}
+                                    </p>
+                                    <h2 class="mt-2 text-2xl font-bold tracking-tight text-slate-900">
+                                        {{ t('home.features.live.title') }}
+                                    </h2>
+                                </div>
+                                <span class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
+                                    <span class="h-2 w-2 rounded-full bg-primary"></span>
+                                    {{ t('home.features.live.onAir') }}
+                                </span>
+                            </div>
+
+                            <p class="mt-5 text-sm leading-7 text-slate-600 sm:text-base">
+                                {{ t('home.features.live.description') }}
+                            </p>
+
+                            <div class="mt-5 rounded-[1.5rem] bg-slate-50 p-4 sm:p-5">
+                                <div class="space-y-3">
+                                    <div
+                                        v-for="signal in signalItems"
+                                        :key="signal.label"
+                                        class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-3"
+                                    >
+                                        <span class="text-sm text-slate-500">{{ signal.label }}</span>
+                                        <span class="text-sm font-semibold text-slate-900">{{ signal.value }}</span>
+                                    </div>
+                                </div>
+
+                                <div class="mt-5 grid grid-cols-12 items-end gap-2">
+                                    <span
+                                        v-for="n in 12"
+                                        :key="n"
+                                        class="rounded-full bg-[linear-gradient(180deg,rgba(20,167,75,0.95),rgba(20,167,75,0.2))]"
+                                        :style="{ height: `${34 + (n % 5) * 12}px`, opacity: 0.4 + (n % 4) * 0.13 }"
+                                    />
+                                </div>
+                            </div>
+
+                            <div class="mt-5 flex flex-wrap gap-2.5">
+                                <span
+                                    v-for="pill in featurePills"
+                                    :key="pill"
+                                    class="rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-600"
+                                >
+                                    {{ pill }}
+                                </span>
+                            </div>
+                        </div>
+
+                        <div class="absolute -right-4 top-12 hidden w-56 rounded-2xl border border-slate-200 bg-white p-4 shadow-xl lg:block">
+                            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
+                                {{ t('home.features.global.title') }}
+                            </p>
+                            <p class="mt-3 text-sm leading-6 text-slate-600">
+                                {{ t('home.features.global.description') }}
+                            </p>
+                        </div>
+
+                        <div class="absolute -left-4 bottom-8 hidden w-64 rounded-2xl border border-slate-200 bg-white p-4 shadow-xl lg:block">
+                            <div class="flex items-center justify-between">
+                                <p class="text-sm font-semibold text-slate-900">
+                                    {{ t('home.features.analytics.title') }}
+                                </p>
+                                <span class="rounded-full bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-500">
+                                    {{ t('home.features.live.onAir') }}
+                                </span>
+                            </div>
+                            <p class="mt-2 text-sm leading-6 text-slate-600">
+                                {{ t('home.features.analytics.description') }}
+                            </p>
+                            <div class="mt-4 grid grid-cols-4 items-end gap-2">
+                                <span class="h-10 rounded-full bg-slate-200"></span>
+                                <span class="h-18 rounded-full bg-primary/70"></span>
+                                <span class="h-14 rounded-full bg-sky-300"></span>
+                                <span class="h-22 rounded-full bg-slate-900"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="features" class="border-b border-slate-100 bg-slate-50/70 py-20">
+            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div class="mx-auto mb-14 max-w-3xl text-center">
+                    <p class="text-sm font-semibold uppercase tracking-[0.22em] text-primary">
+                        {{ t('home.features.heading') }}
+                    </p>
+                    <h2 class="mt-4 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
+                        {{ t('home.features.heading') }}
+                    </h2>
+                    <p class="mt-4 text-lg leading-8 text-slate-600">
+                        {{ t('home.features.subtitle') }}
+                    </p>
+                </div>
+
+                <div class="grid gap-6 lg:grid-cols-3">
+                    <article class="rounded-3xl border border-slate-200 bg-white p-8 transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-[0_18px_44px_rgba(15,23,42,0.08)]">
+                        <div class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="-8 -258 529 532" fill="none">
+                                <path
+                                    d="M342 32c-2 69-16 129-35 172-10 23-22 40-32 49-10 10-16 11-19 11h-1c-3 0-9-1-19-11-10-9-22-26-32-49-19-43-33-103-35-172h173zm169 0c-9 103-80 188-174 219 30-51 50-129 53-219h121zm-390 0c3 89 23 167 53 218C80 219 11 134 2 32h119zm53-266c-30 51-50 129-53 218H2c9-102 78-186 172-218zm82-14c3 0 9 1 19 11 10 9 22 26 32 50 19 42 33 102 35 171H169c3-69 16-129 35-171 10-24 22-41 32-50s16-11 19-11h1zm81 13c94 31 165 116 174 219H390c-3-90-23-168-53-219z"
+                                    fill="currentColor"
+                                />
+                            </svg>
+                        </div>
+                        <h3 class="mt-5 text-2xl font-bold tracking-tight text-slate-900">
+                            {{ t('home.features.global.title') }}
+                        </h3>
+                        <p class="mt-3 text-base leading-7 text-slate-600">
+                            {{ t('home.features.global.description') }}
+                        </p>
+                    </article>
+
+                    <article class="rounded-3xl border border-slate-200 bg-white p-8 transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-[0_18px_44px_rgba(15,23,42,0.08)]">
+                        <div class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-50 text-violet-600">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 570 570" fill="none">
+                                <path
+                                    d="M50 428c-5 5-5 14 0 19s14 5 19 0l237-237c5-5 5-14 0-19s-14-5-19 0L50 428zm16-224c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zM174 60c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zm215 29c-5 5-5 14 0 19s14 5 19 0l39-39c5-5 5-14 0-19s-14-5-19 0l-39 39zm21 357c-5 5-5 14 0 19s14 5 19 0l18-18c5-5 5-14 0-19s-14-5-19 0l-18 18z"
+                                    fill="#a6acb9"
+                                />
+                                <path
+                                    d="M170 26c14-15 36-15 50 0l18 18c15 14 15 36 0 50l-18 18c-14 15-36 15-50 0l-18-18c-15-14-15-36 0-50l18-18zm35 41c5-5 5-14 0-19-6-5-14-5-20 0l-11 12c-5 5-5 13 0 19 5 5 14 5 19 0l12-12zm204 342c21-21 55-21 76 0l18 18c21 21 21 55 0 76l-18 18c-21 21-55 21-76 0l-18-18c-21-21-21-55 0-76l18-18zm38 38c5-5 5-14 0-19s-14-5-19 0l-18 18c-5 5-5 14 0 19s14 5 19 0l18-18zM113 170c-15-15-37-15-51 0l-18 18c-14 14-14 36 0 50l18 18c14 15 37 15 51 0l18-18c14-14 14-36 0-50l-18-18zm-16 41-12 12c-5 5-14 5-19 0-5-6-5-14 0-20l11-11c6-5 14-5 20 0 5 5 5 14 0 19zM485 31c-21-21-55-21-76 0l-39 39c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l39-39c21-21 21-55 0-76l-54-54zm-38 38-39 39c-5 5-14 5-19 0s-5-14 0-19l39-39c5-5 14-5 19 0s5 14 0 19zm-49 233c21-21 21-55 0-76l-54-54c-21-21-55-21-76 0L31 409c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l237-237zm-92-92L69 447c-5 5-14 5-19 0s-5-14 0-19l237-237c5-5 14-5 19 0s5 14 0 19z"
+                                    fill="currentColor"
+                                />
+                            </svg>
+                        </div>
+                        <h3 class="mt-5 text-2xl font-bold tracking-tight text-slate-900">
+                            {{ t('home.features.encoding.title') }}
+                        </h3>
+                        <p class="mt-3 text-base leading-7 text-slate-600">
+                            {{ t('home.features.encoding.description') }}
+                        </p>
+                    </article>
+
+                    <article class="rounded-3xl border border-slate-200 bg-white p-8 transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-[0_18px_44px_rgba(15,23,42,0.08)]">
+                        <div class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-50 text-amber-600">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="-10 -226 532 468" fill="none">
+                                <path
+                                    d="M32-216c18 0 32 14 32 32v336c0 9 7 16 16 16h400c18 0 32 14 32 32s-14 32-32 32H80c-44 0-80-36-80-80v-336c0-18 14-32 32-32zM144-24c18 0 32 14 32 32v64c0 18-14 32-32 32s-32-14-32-32V8c0-18 14-32 32-32zm144-64V72c0 18-14 32-32 32s-32-14-32-32V-88c0-18 14-32 32-32s32 14 32 32zm80 32c18 0 32 14 32 32v96c0 18-14 32-32 32s-32-14-32-32v-96c0-18 14-32 32-32zm144-96V72c0 18-14 32-32 32s-32-14-32-32v-224c0-18 14-32 32-32s32 14 32 32z"
+                                    fill="currentColor"
+                                />
+                            </svg>
+                        </div>
+                        <h3 class="mt-5 text-2xl font-bold tracking-tight text-slate-900">
+                            {{ t('home.features.analytics.title') }}
+                        </h3>
+                        <p class="mt-3 text-base leading-7 text-slate-600">
+                            {{ t('home.features.analytics.description') }}
+                        </p>
+                    </article>
+                </div>
+
+                <div class="mt-6 rounded-3xl border border-slate-200 bg-white p-6 sm:p-8">
+                    <div class="grid gap-6 lg:grid-cols-[1fr_0.9fr] lg:items-center">
+                        <div>
+                            <p class="text-sm font-semibold uppercase tracking-[0.22em] text-primary">
+                                {{ t('home.features.live.title') }}
+                            </p>
+                            <h3 class="mt-3 text-3xl font-bold tracking-tight text-slate-900">
+                                {{ t('home.features.live.title') }}
+                            </h3>
+                            <p class="mt-4 max-w-2xl text-base leading-8 text-slate-600">
+                                {{ t('home.features.live.description') }}
+                            </p>
+                        </div>
+
+                        <div class="rounded-[1.75rem] bg-slate-50 p-4">
+                            <div class="space-y-3">
+                                <div
+                                    v-for="signal in signalItems"
+                                    :key="`summary-${signal.label}`"
+                                    class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-3"
+                                >
+                                    <span class="text-sm text-slate-500">{{ signal.label }}</span>
+                                    <span class="text-sm font-semibold text-slate-900">{{ signal.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="pricing" class="bg-white py-20">
+            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div class="mx-auto mb-14 max-w-3xl text-center">
+                    <p class="text-sm font-semibold uppercase tracking-[0.22em] text-primary">
+                        {{ pricing.title }}
+                    </p>
+                    <h2 class="mt-4 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
+                        {{ pricing.title }}
+                    </h2>
+                    <p class="mt-4 text-lg leading-8 text-slate-600">
+                        {{ pricing.subtitle }}
+                    </p>
+                </div>
+
+                <div class="grid gap-6 lg:grid-cols-3 lg:items-stretch">
+                    <article
+                        v-for="pack in pricing.packs"
+                        :key="pack.name"
+                        :class="[
+                            'relative flex h-full flex-col overflow-hidden rounded-3xl border p-8 shadow-sm transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-[0_18px_44px_rgba(15,23,42,0.08)]',
+                            isFeaturedPack(pack.tag)
+                                ? 'border-primary bg-primary/[0.04] ring-1 ring-primary/15'
+                                : isScalePack(pack.tag)
+                                    ? 'border-slate-200 bg-slate-50/80'
+                                    : 'border-slate-200 bg-white'
+                        ]"
+                    >
+                        <div
+                            v-if="pack.tag"
+                            :class="[
+                                'absolute right-5 top-5 rounded-full px-3 py-1 text-xs font-semibold',
+                                isFeaturedPack(pack.tag) ? 'bg-primary text-white' : 'bg-slate-900 text-white'
+                            ]"
+                        >
+                            {{ pack.tag }}
+                        </div>
+
+                        <div>
+                            <p class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500">
+                                {{ pack.name }}
+                            </p>
+                            <div class="mt-5 flex items-end gap-2">
+                                <span class="text-5xl font-bold tracking-tight text-slate-900">{{ pack.price }}</span>
+                                <span class="pb-2 text-slate-500">{{ t('home.pricing.perMonth') }}</span>
+                            </div>
+                        </div>
+
+                        <ul class="mt-8 space-y-4">
+                            <li v-for="value in pack.features" :key="value" class="flex items-start gap-3">
+                                <span class="mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                        <path d="M5 12.5l4.2 4.2L19 7" />
+                                    </svg>
+                                </span>
+                                <span class="text-slate-600">{{ value }}</span>
+                            </li>
+                        </ul>
+
+                        <RouterLink
+                            to="/sign-up"
+                            :class="[
+                                'mt-10 inline-flex w-full items-center justify-center !rounded-xl !py-3.5',
+                                isFeaturedPack(pack.tag) ? 'btn btn-success' : 'btn btn-outline-primary'
+                            ]"
+                        >
+                            {{ pack.buttonText }}
+                        </RouterLink>
+                    </article>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
diff --git a/src/routes/home/Layout.vue b/src/routes/home/Layout.vue
new file mode 100644
index 0000000..1edaa94
--- /dev/null
+++ b/src/routes/home/Layout.vue
@@ -0,0 +1,86 @@
+<template>
+    <header>
+        <nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <router-link to="/" class="flex items-center gap-2 cursor-pointer">
+                        <img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />
+                        <span class="font-bold text-xl tracking-tight text-slate-900">{{ t('app.name') }}</span>
+                    </router-link>
+                    <div class="hidden md:flex items-center space-x-8">
+                        <a href="#features"
+                            class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">{{ t('home.nav.features') }}</a>
+                        <a href="#pricing"
+                            class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">{{ t('home.nav.pricing') }}</a>
+                    </div>
+                    <div class="hidden md:flex items-center gap-4">
+                        <RouterLink to="/login"
+                            class="text-sm font-semibold text-slate-600 hover:text-slate-900 cursor-pointer">{{ t('home.nav.login') }}
+                        </RouterLink>
+                        <RouterLink to="/sign-up"
+                            class="bg-slate-900 hover:bg-black text-white px-5 py-2.5 rounded-lg text-sm font-semibold cursor-pointer">
+                            {{ t('home.nav.startFree') }}
+                        </RouterLink>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="animate-fade-in delay-50 grow">
+        <router-view />
+    </main>
+    <!-- Footer -->
+    <footer class="bg-white border-t border-slate-100 pt-16 pb-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
+                <div class="col-span-2">
+                    <div class="flex items-center gap-2 mb-4">
+                        <div class="w-6 h-6 bg-brand-600 rounded flex items-center justify-center text-white">
+                            <img class="h-6 w-6" src="/apple-touch-icon.png" alt="Logo" />
+                        </div>
+                        <span class="font-bold text-lg text-slate-900">{{ t('app.name') }}</span>
+                    </div>
+                    <p class="text-slate-500 text-sm max-w-xs">{{ t('home.footer.description') }}</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-slate-900 mb-4 text-sm">{{ t('home.footer.product') }}</h4>
+                    <ul class="space-y-2 text-sm text-slate-500">
+                        <li><a href="#" class="hover:text-brand-600">{{ t('home.footer.productFeatures') }}</a></li>
+                        <li><a href="#" class="hover:text-brand-600">{{ t('home.footer.productPricing') }}</a></li>
+                        <li><a href="#" class="hover:text-brand-600">{{ t('home.footer.productShowcase') }}</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-slate-900 mb-4 text-sm">{{ t('home.footer.company') }}</h4>
+                    <ul class="space-y-2 text-sm text-slate-500">
+                        <li><a href="#" class="hover:text-brand-600">{{ t('home.footer.companyAbout') }}</a></li>
+                        <li><a href="#" class="hover:text-brand-600">{{ t('home.footer.companyBlog') }}</a></li>
+                        <li><a href="#" class="hover:text-brand-600">{{ t('home.footer.companyCareers') }}</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-slate-900 mb-4 text-sm">{{ t('home.footer.legal') }}</h4>
+                    <ul class="space-y-2 text-sm text-slate-500">
+                        <li><router-link to="/privacy" class="hover:text-brand-600">{{ t('home.footer.privacy') }}</router-link></li>
+                        <li><router-link to="/terms" class="hover:text-brand-600">{{ t('home.footer.terms') }}</router-link></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="pt-8 border-t border-slate-100 text-center text-sm text-slate-400">
+                {{ t('home.footer.copyright', { year: 2026 }) }}
+            </div>
+        </div>
+    </footer>
+
+    <Head>
+        <title>{{ t('home.head.title') }}</title>
+        <meta name="description"
+            :content="t('home.head.description')" />
+    </Head>
+</template>
+<script lang="ts" setup>
+import { Head } from '@unhead/vue/components'
+import { useTranslation } from 'i18next-vue';
+
+const { t } = useTranslation();
+</script>
diff --git a/src/routes/home/Privacy.vue b/src/routes/home/Privacy.vue
new file mode 100644
index 0000000..f1affb6
--- /dev/null
+++ b/src/routes/home/Privacy.vue
@@ -0,0 +1,101 @@
+<template>
+    <section class="relative overflow-hidden border-b border-slate-100 bg-gradient-to-b from-slate-50 via-white to-white">
+        <div class="pointer-events-none absolute inset-0">
+            <div class="absolute inset-0 opacity-55 bg-[linear-gradient(rgba(148,163,184,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.1)_1px,transparent_1px)] bg-[length:64px_64px] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,0.45),transparent_78%)]"></div>
+            <div class="absolute left-0 top-20 h-56 w-56 rounded-full bg-primary/10 blur-3xl"></div>
+            <div class="absolute right-0 top-24 h-64 w-64 rounded-full bg-sky-100 blur-3xl"></div>
+        </div>
+
+        <div class="relative mx-auto max-w-5xl px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pb-20 lg:pt-34">
+            <div class="mx-auto max-w-4xl">
+                <div class="inline-flex items-center rounded-full border border-primary/15 bg-white/90 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-primary shadow-sm">
+                    {{ pageContent.data.pageSubheading }}
+                </div>
+
+                <div class="mt-6 max-w-3xl space-y-4">
+                    <h1 class="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl">
+                        {{ pageContent.data.pageHeading }}
+                    </h1>
+                    <p class="text-lg leading-8 text-slate-600">
+                        {{ pageContent.data.description }}
+                    </p>
+                </div>
+
+                <div class="mt-10 rounded-[2rem] border border-slate-200 bg-white p-6 shadow-sm sm:p-8 lg:p-10">
+                    <div class="space-y-6">
+                        <section
+                            v-for="(item, index) in pageContent.data.list"
+                            :key="index"
+                            class="rounded-2xl border border-slate-200 bg-slate-50/70 p-5 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-primary/25 hover:bg-white hover:shadow-[0_14px_32px_rgba(15,23,42,0.06)] sm:p-6"
+                        >
+                            <div class="flex items-start gap-4">
+                                <div class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-sm font-bold text-primary">
+                                    {{ index + 1 }}
+                                </div>
+                                <div class="min-w-0">
+                                    <h2 class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl">
+                                        {{ item.heading }}
+                                    </h2>
+                                    <p class="mt-3 leading-8 text-slate-600">
+                                        {{ item.text }}
+                                    </p>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import { useHead } from '@unhead/vue';
+
+const { t } = useTranslation();
+
+const pageContent = computed(() => {
+    const title = t('legal.privacy.title');
+    const description = t('legal.privacy.description');
+
+    return {
+        head: {
+            title,
+            meta: [
+                { name: 'description', content: description },
+                { property: 'og:title', content: title },
+                { property: 'og:description', content: description },
+                { property: 'twitter:title', content: title },
+                { property: 'twitter:description', content: description },
+                { property: 'twitter:image', content: 'https://Ecostream.com/thumb.png' }
+            ]
+        },
+        data: {
+            pageHeading: t('legal.privacy.pageHeading'),
+            pageSubheading: t('legal.privacy.pageSubheading'),
+            description: t('legal.privacy.pageDescription'),
+            list: [
+                {
+                    heading: t('legal.privacy.sections.policyTitle'),
+                    text: t('legal.privacy.sections.policyText')
+                },
+                {
+                    heading: t('legal.privacy.sections.dataCollectionTitle'),
+                    text: t('legal.privacy.sections.dataCollectionText')
+                },
+                {
+                    heading: t('legal.privacy.sections.cookieTitle'),
+                    text: t('legal.privacy.sections.cookieText')
+                },
+                {
+                    heading: t('legal.privacy.sections.dmcaTitle'),
+                    text: t('legal.privacy.sections.dmcaText')
+                }
+            ]
+        }
+    };
+});
+
+useHead(() => pageContent.value.head);
+</script>
diff --git a/src/routes/home/Terms.vue b/src/routes/home/Terms.vue
new file mode 100644
index 0000000..4d7534e
--- /dev/null
+++ b/src/routes/home/Terms.vue
@@ -0,0 +1,105 @@
+<template>
+    <section class="relative overflow-hidden border-b border-slate-100 bg-gradient-to-b from-slate-50 via-white to-white">
+        <div class="pointer-events-none absolute inset-0">
+            <div class="absolute inset-0 opacity-55 bg-[linear-gradient(rgba(148,163,184,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.1)_1px,transparent_1px)] bg-[length:64px_64px] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,0.45),transparent_78%)]"></div>
+            <div class="absolute left-0 top-20 h-56 w-56 rounded-full bg-primary/10 blur-3xl"></div>
+            <div class="absolute right-0 top-24 h-64 w-64 rounded-full bg-sky-100 blur-3xl"></div>
+        </div>
+
+        <div class="relative mx-auto max-w-5xl px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pb-20 lg:pt-34">
+            <div class="mx-auto max-w-4xl">
+                <div class="inline-flex items-center rounded-full border border-primary/15 bg-white/90 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-primary shadow-sm">
+                    {{ pageContent.data.pageSubheading }}
+                </div>
+
+                <div class="mt-6 max-w-3xl space-y-4">
+                    <h1 class="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl">
+                        {{ pageContent.data.pageHeading }}
+                    </h1>
+                    <p class="text-lg leading-8 text-slate-600">
+                        {{ pageContent.data.description }}
+                    </p>
+                </div>
+
+                <div class="mt-10 rounded-[2rem] border border-slate-200 bg-white p-6 shadow-sm sm:p-8 lg:p-10">
+                    <div class="space-y-6">
+                        <section
+                            v-for="(item, index) in pageContent.data.list"
+                            :key="index"
+                            class="rounded-2xl border border-slate-200 bg-slate-50/70 p-5 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-primary/25 hover:bg-white hover:shadow-[0_14px_32px_rgba(15,23,42,0.06)] sm:p-6"
+                        >
+                            <div class="flex items-start gap-4">
+                                <div class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-sm font-bold text-primary">
+                                    {{ index + 1 }}
+                                </div>
+                                <div class="min-w-0">
+                                    <h2 class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl">
+                                        {{ item.heading }}
+                                    </h2>
+                                    <p class="mt-3 leading-8 text-slate-600">
+                                        {{ item.text }}
+                                    </p>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import { useHead } from '@unhead/vue';
+
+const { t } = useTranslation();
+
+const pageContent = computed(() => {
+    const title = t('legal.terms.title');
+    const description = t('legal.terms.description');
+
+    return {
+        head: {
+            title,
+            meta: [
+                { name: 'description', content: description },
+                { property: 'og:title', content: title },
+                { property: 'og:description', content: description },
+                { property: 'twitter:title', content: title },
+                { property: 'twitter:description', content: description },
+                { property: 'twitter:image', content: 'https://Ecostream.com/thumb.png' }
+            ]
+        },
+        data: {
+            pageHeading: t('legal.terms.pageHeading'),
+            pageSubheading: t('legal.terms.pageSubheading'),
+            description: t('legal.terms.pageDescription'),
+            list: [
+                {
+                    heading: t('legal.terms.sections.acceptanceTitle'),
+                    text: t('legal.terms.sections.acceptanceText')
+                },
+                {
+                    heading: t('legal.terms.sections.usageTitle'),
+                    text: t('legal.terms.sections.usageText')
+                },
+                {
+                    heading: t('legal.terms.sections.ownershipTitle'),
+                    text: t('legal.terms.sections.ownershipText')
+                },
+                {
+                    heading: t('legal.terms.sections.liabilityTitle'),
+                    text: t('legal.terms.sections.liabilityText')
+                },
+                {
+                    heading: t('legal.terms.sections.changesTitle'),
+                    text: t('legal.terms.sections.changesText')
+                }
+            ]
+        }
+    };
+});
+
+useHead(() => pageContent.value.head);
+</script>
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 6a18c76..32049b7 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,15 +1,16 @@
-import { type ReactiveHead, type ResolvableValue } from "@unhead/vue";
-import { headSymbol } from '@unhead/vue'
+import { useRouteLoading } from "@/composables/useRouteLoading";
+import { useAuthStore } from "@/stores/auth";
+import { headSymbol, type ReactiveHead, type ResolvableValue } from "@unhead/vue";
+import { inject } from "vue";
 import {
   createMemoryHistory,
   createRouter,
   createWebHistory,
   type RouteRecordRaw,
 } from "vue-router";
-import { useAuthStore } from "@/stores/auth";
 
 type RouteData = RouteRecordRaw & {
-  meta?: ResolvableValue<ReactiveHead> & { requiresAuth?: boolean };
+  meta?: ResolvableValue<ReactiveHead> & { requiresAuth?: boolean; requiresAdmin?: boolean };
   children?: RouteData[];
 };
 const routes: RouteData[] = [
@@ -19,25 +20,37 @@ const routes: RouteData[] = [
     children: [
       {
         path: "",
-        component: () => import("./home/Home.vue"),
-        beforeEnter: (to, from, next) => {
-          const auth = useAuthStore();
-          if (auth.user) {
-            next({ name: "overview" });
-          } else {
-            next();
-          }
-        },
+        component: () => import("./home/Layout.vue"),
+        children: [
+          {
+            path: "",
+            component: () => import("./home/Home.vue"),
+            beforeEnter: (to, from) => {
+              const auth = useAuthStore();
+              if (auth.user) {
+                return { name: "overview" };
+              }
+            },
+          },
+          {
+            path: "/terms",
+            name: "terms",
+            component: () => import("./home/Terms.vue"),
+          },
+          {
+            path: "/privacy",
+            name: "privacy",
+            component: () => import("./home/Privacy.vue"),
+          },
+        ],
       },
       {
         path: "",
         component: () => import("./auth/layout.vue"),
-        beforeEnter: (to, from, next) => {
+        beforeEnter: (to, from) => {
           const auth = useAuthStore();
           if (auth.user) {
-            next({ name: "overview" });
-          } else {
-            next();
+            return { name: "overview" };
           }
         },
         children: [
@@ -51,11 +64,21 @@ const routes: RouteData[] = [
             name: "signup",
             component: () => import("./auth/signup.vue"),
           },
+          {
+            path: "ref/:username",
+            name: "referral-entry",
+            redirect: (to) => ({ name: "signup", query: { ref: String(to.params.username || "") } }),
+          },
           {
             path: "forgot",
             name: "forgot",
             component: () => import("./auth/forgot.vue"),
           },
+          {
+            path: "auth/google/finalize",
+            name: "google-auth-finalize",
+            component: () => import("./auth/google-finalize.vue"),
+          },
         ],
       },
       {
@@ -66,58 +89,179 @@ const routes: RouteData[] = [
           {
             path: "",
             name: "overview",
-            component: () => import("./add/Add.vue"),
+            component: () => import("./overview/Overview.vue"),
             meta: {
               head: {
-                title: 'Overview - Holistream',
+                title: "Overview - Holistream",
               },
-            }
+            },
           },
           {
-            path: "upload",
-            name: "upload",
-            component: () => import("./add/Add.vue"),
-            meta: {
-              head: {
-                title: 'Upload - Holistream',
+            path: "videos",
+            children: [
+              {
+                path: "",
+                name: "videos",
+                component: () => import("./video/Videos.vue"),
+                meta: {
+                  head: {
+                    title: "Videos - Holistream",
+                    meta: [
+                      {
+                        name: "description",
+                        content: "Manage your video content.",
+                      },
+                    ],
+                  },
+                },
               },
-            }
+            ],
           },
           {
-            path: "video",
-            name: "video",
-            component: () => import("./add/Add.vue"),
+            path: "analytics",
+            name: "analytics",
+            component: () => import("./analytics/Analytics.vue"),
             meta: {
               head: {
-                title: 'Videos - Holistream',
-                meta: [
-                  { name: 'description', content: 'Manage your video content.' },
-                ],
+                title: "Analytics - Holistream",
               },
-            }
-          },
-          {
-            path: "plans",
-            name: "plans",
-            component: () => import("./add/Add.vue"),
-            meta: {
-              head: {
-                title: 'Plans & Billing',
-                meta: [
-                  { name: 'description', content: 'Manage your plans and billing information.' },
-                ],
-              },
-            }
+            },
           },
           {
             path: "notification",
             name: "notification",
-            component: () => import("./add/Add.vue"),
+            component: () => import("./notification/Notification.vue"), // TODO: create notification page
             meta: {
               head: {
-                title: 'Notification - Holistream',
+                title: "Notification - Holistream",
               },
-            }
+            },
+          },
+          {
+            path: "settings",
+            name: "settings",
+            component: () => import("./settings/Settings.vue"),
+            meta: {
+              head: {
+                title: "Settings - Holistream",
+                meta: [
+                  {
+                    name: "description",
+                    content: "Manage your account settings and preferences.",
+                  },
+                ],
+              },
+            },
+            redirect: '/settings/security',
+            children: [
+              {
+                path: "security",
+                name: "settings-security",
+                component: () => import("./settings/SecurityNConnected/SecurityNConnected.vue"),
+                meta: {
+                  head: {
+                    title: "Security & Connected Apps - Holistream",
+                  },
+                },
+              },
+              {
+                path: "billing",
+                name: "settings-billing",
+                component: () => import("./settings/Billing/Billing.vue"),
+                meta: {
+                  head: {
+                    title: "Billing & Plans - Holistream",
+                    meta: [
+                      {
+                        name: "description",
+                        content: "Manage your plans and billing information.",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                path: "notifications",
+                name: "settings-notifications",
+                component: () => import("./settings/NotificationSettings/NotificationSettings.vue"),
+                meta: {
+                  head: {
+                    title: "Notifications - Holistream",
+                  },
+                },
+              },
+              {
+                path: "player",
+                redirect: { name: "settings-player-configs" },
+              },
+              {
+                path: "domains",
+                name: "settings-domains",
+                component: () => import("./settings/DomainsDns/DomainsDns.vue"),
+                meta: {
+                  head: {
+                    title: "Allowed Domains - Holistream",
+                  },
+                },
+              },
+              {
+                path: "ads",
+                name: "settings-ads",
+                component: () => import("./settings/AdsVast/AdsVast.vue"),
+                meta: {
+                  head: {
+                    title: "Ads & VAST - Holistream",
+                  },
+                },
+              },
+              {
+                path: "popup-ads",
+                name: "settings-popup-ads",
+                component: () => import("./settings/PopupAds/PopupAds.vue"),
+                meta: {
+                  head: {
+                    title: "Popup Ads - Holistream",
+                  },
+                },
+              },
+              {
+                path: "player-configs",
+                name: "settings-player-configs",
+                component: () => import("./settings/PlayerConfigs/PlayerConfigs.vue"),
+                meta: {
+                  head: {
+                    title: "Player Configs - Holistream",
+                  },
+                },
+              },
+              {
+                path: "danger",
+                name: "settings-danger",
+                component: () => import("./settings/DangerZone/DangerZone.vue"),
+                meta: {
+                  head: {
+                    title: "Danger Zone - Holistream",
+                  },
+                },
+              },
+              {
+                path: "admin",
+                meta: { requiresAdmin: true },
+                redirect: { name: "admin-overview" },
+                children: [
+                  { path: "users", name: "admin-users", component: () => import("./settings/admin/Users.vue") },
+                  { path: "videos", name: "admin-videos", component: () => import("./settings/admin/Videos.vue") },
+                  { path: "payments", name: "admin-payments", component: () => import("./settings/admin/Payments.vue") },
+                  { path: "plans", name: "admin-plans", component: () => import("./settings/admin/Plans.vue") },
+                  { path: "ad-templates", name: "admin-ad-templates", component: () => import("./settings/admin/AdTemplates.vue") },
+                  { path: "popup-ads", name: "admin-popup-ads", component: () => import("./settings/admin/PopupAds.vue") },
+                  { path: "player-configs", name: "admin-player-configs", component: () => import("./settings/admin/PlayerConfigs.vue") },
+                  { path: "jobs", name: "admin-jobs", component: () => import("./settings/admin/Jobs.vue") },
+                  { path: "agents", name: "admin-agents", component: () => import("./settings/admin/Agents.vue") },
+                  { path: "logs", name: "admin-logs", component: () => import("./settings/admin/Logs.vue") },
+                ],
+              },
+            ],
           },
         ],
       },
@@ -125,33 +269,57 @@ const routes: RouteData[] = [
         path: "/:pathMatch(.*)*",
         name: "not-found",
         component: () => import("./NotFound.vue"),
-      }
+      },
     ],
   },
 ];
 const createAppRouter = () => {
-const router = createRouter({
-  history: import.meta.env.SSR
-    ? createMemoryHistory() // server
-    : createWebHistory(), // client
-  routes,
-});
+  const router = createRouter({
+    history: import.meta.env.SSR
+      ? createMemoryHistory() // server
+      : createWebHistory(), // client
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+      if (savedPosition) {
+        return savedPosition;
+      }
+      return { top: 0 };
+    },
+  });
 
-router.beforeEach((to, from, next) => {
-  const auth = useAuthStore();
-  const head = inject(headSymbol);
-  (head as any).push(to.meta.head || {});
-  if (to.matched.some((record) => record.meta.requiresAuth)) {
-    if (!auth.user) {
-      next({ name: "login" });
-    } else {
-      next();
+      const loading = useRouteLoading()
+  router.beforeEach((to, from) => {
+    const auth = useAuthStore();
+    const head = inject(headSymbol);
+      (head as any).push(to.meta.head || {});
+      if (to.fullPath !== from.fullPath && !import.meta.env.SSR) {
+          loading.start()
+        }
+    if (to.matched.some((record) => record.meta.requiresAuth)) {
+      if (!auth.user) {
+        return { name: "login" };
+      }
     }
-  } else {
-    next();
-  }
-});
-return router;
-}
+
+    if (to.matched.some((record) => record.meta.requiresAdmin)) {
+      if (!auth.user) {
+        return { name: "login" };
+      }
+
+      const role = String(auth.user.role || "").toLowerCase();
+      if (role !== "admin") {
+        return { name: "overview" };
+      }
+    }
+  });
+  router.afterEach(() => {
+    loading.finish()
+  })
+
+  router.onError(() => {
+    loading.fail()
+  })
+  return router;
+};
 
 export default createAppRouter;
diff --git a/src/routes/notification/Notification.vue b/src/routes/notification/Notification.vue
new file mode 100644
index 0000000..1d8ff53
--- /dev/null
+++ b/src/routes/notification/Notification.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import PageHeader from '@/components/dashboard/PageHeader.vue';
+import NotificationActions from './components/NotificationActions.vue';
+import NotificationList from './components/NotificationList.vue';
+import NotificationTabs from './components/NotificationTabs.vue';
+import { useNotifications } from '@/composables/useNotifications';
+import Inbox from '@/components/icons/Inbox.vue';
+import Video from '@/components/icons/Video.vue';
+import Credit from '@/components/icons/Credit.vue';
+import BellOff from '@/components/icons/BellOff.vue';
+import BellDot from '@/components/icons/BellDot.vue';
+
+const activeTab = ref('all');
+const { t } = useTranslation();
+const notificationStore = useNotifications();
+
+onMounted(() => {
+    void notificationStore.fetchNotifications();
+});
+
+const unreadCount = computed(() => notificationStore.unreadCount.value);
+
+const tabs = computed(() => [
+    { key: 'all', label: t('notification.tabs.all'), icon: Inbox, count: notificationStore.notifications.value.length },
+    { key: 'unread', label: t('notification.tabs.unread'), icon: BellDot, count: unreadCount.value },
+    { key: 'video', label: t('notification.tabs.videos'), icon: Video, count: notificationStore.notifications.value.filter(n => n.type === 'video').length },
+    { key: 'payment', label: t('notification.tabs.payments'), icon: Credit, count: notificationStore.notifications.value.filter(n => n.type === 'payment').length },
+]);
+
+const filteredNotifications = computed(() => {
+    if (activeTab.value === 'all') return notificationStore.notifications.value;
+    if (activeTab.value === 'unread') return notificationStore.notifications.value.filter(n => !n.read);
+    return notificationStore.notifications.value.filter(n => n.type === activeTab.value);
+});
+
+const handleMarkRead = async (id: string) => {
+    await notificationStore.markRead(id);
+};
+
+const handleDelete = async (id: string) => {
+    await notificationStore.deleteNotification(id);
+};
+
+const handleMarkAllRead = async () => {
+    await notificationStore.markAllRead();
+};
+
+const handleClearAll = async () => {
+    await notificationStore.clearAll();
+};
+</script>
+
+<template>
+    <div>
+        <PageHeader
+            :title="t('notification.title')"
+            :description="t('notification.subtitle')"
+            :breadcrumbs="[
+                { label: t('pageHeader.dashboard'), to: '/' },
+                { label: t('nav.notification') }
+            ]"
+        />
+        <div class="w-full max-w-4xl mx-auto mt-6">
+            <div class="notification-container bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
+                <NotificationActions
+                    :loading="notificationStore.loading.value"
+                    :total-count="notificationStore.notifications.value.length"
+                    :unread-count="unreadCount"
+                    @mark-all-read="handleMarkAllRead"
+                    @clear-all="handleClearAll"
+                />
+
+                <NotificationTabs
+                    :tabs="tabs"
+                    :active-tab="activeTab"
+                    @update:active-tab="activeTab = $event"
+                />
+
+                <NotificationList
+                    :notifications="filteredNotifications"
+                    :loading="notificationStore.loading.value"
+                    @mark-read="handleMarkRead"
+                    @delete="handleDelete"
+                />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/notification/components/NotificationActions.vue b/src/routes/notification/components/NotificationActions.vue
new file mode 100644
index 0000000..21bfb69
--- /dev/null
+++ b/src/routes/notification/components/NotificationActions.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import Bell from '@/components/icons/Bell.vue';
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+import { useTranslation } from 'i18next-vue';
+
+interface Props {
+    loading?: boolean;
+    totalCount: number;
+    unreadCount: number;
+}
+
+defineProps<Props>();
+const emit = defineEmits<{
+    markAllRead: [];
+    clearAll: [];
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <div class="notification-header flex items-center justify-between mb-6">
+        <div class="flex items-center gap-3">
+            <div class="stats flex items-center gap-4">
+                <div class="flex items-center gap-2 text-sm">
+                    <Bell filled class="w-4 h-4 text-gray-400" />
+                    <span class="text-gray-600">{{ t('notification.stats.total', { count: totalCount }) }}</span>
+                </div>
+                <div v-if="unreadCount > 0" class="flex items-center gap-2 text-sm">
+                    <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
+                    <span class="text-primary font-medium">{{ t('notification.stats.unread', { count: unreadCount }) }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="actions flex items-center gap-2">
+            <button
+                v-if="unreadCount > 0"
+                @click="emit('markAllRead')"
+                :disabled="loading"
+                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary
+                       hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2"
+            >
+                 <CheckIcon class="w-4 h-4" />
+                {{ t('notification.actions.markAllRead') }}
+            </button>
+            <button
+                v-if="totalCount > 0"
+                @click="emit('clearAll')"
+                :disabled="loading"
+                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-red-600
+                       hover:bg-red-50 rounded-lg transition-colors flex items-center gap-2"
+            >
+                <TrashIcon class="w-4 h-4" />
+                {{ t('notification.actions.clearAll') }}
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/notification/components/NotificationItem.vue b/src/routes/notification/components/NotificationItem.vue
new file mode 100644
index 0000000..9f4d756
--- /dev/null
+++ b/src/routes/notification/components/NotificationItem.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import InfoIcon from '@/components/icons/InfoIcon.vue';
+import CheckCircleIcon from '@/components/icons/CheckCircleIcon.vue';
+import AlertTriangleIcon from '@/components/icons/AlertTriangleIcon.vue';
+import XCircleIcon from '@/components/icons/XCircleIcon.vue';
+import VideoIcon from '@/components/icons/VideoIcon.vue';
+import CreditCardIcon from '@/components/icons/CreditCardIcon.vue';
+import SettingsIcon from '@/components/icons/SettingsIcon.vue';
+import ArrowRightIcon from '@/components/icons/ArrowRightIcon.vue';
+import CheckMarkIcon from '@/components/icons/CheckMarkIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+
+interface Props {
+    notification: {
+        id: string;
+        type: 'info' | 'success' | 'warning' | 'error' | 'video' | 'payment' | 'system';
+        title: string;
+        message: string;
+        time: string;
+        read: boolean;
+        actionUrl?: string;
+        actionLabel?: string;
+    };
+    isDrawer?: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+    markRead: [id: string];
+    delete: [id: string];
+}>();
+
+const { t } = useTranslation();
+
+const iconComponent = computed(() => {
+    const icons: Record<string, any> = {
+        info: InfoIcon,
+        success: CheckCircleIcon,
+        warning: AlertTriangleIcon,
+        error: XCircleIcon,
+        video: VideoIcon,
+        payment: CreditCardIcon,
+        system: SettingsIcon
+    };
+    return icons[props.notification.type] || InfoIcon;
+});
+
+const iconColorClass = computed(() => {
+    const colors: Record<string, string> = {
+        info: 'text-blue-500',
+        success: 'text-green-500',
+        warning: 'text-amber-500',
+        error: 'text-red-500',
+        video: 'text-purple-500',
+        payment: 'text-emerald-500',
+        system: 'text-gray-500'
+    };
+    return colors[props.notification.type] || 'text-blue-500';
+});
+
+const bgClass = computed(() => {
+    return props.notification.read
+        ? 'bg-white hover:bg-gray-50'
+        : 'bg-blue-50/50 hover:bg-blue-50';
+});
+</script>
+
+<template>
+    <div :class="[
+        'rounded-xl p-4 border border-gray-200/80 transition-all duration-200',
+        'flex items-start gap-4 group cursor-pointer relative',
+        bgClass
+    ]" @click="emit('markRead', notification.id)">
+        <div v-if="!isDrawer" class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
+            <component :is="iconComponent" :class="[iconColorClass, 'w-5 h-5']" />
+        </div>
+
+        <div class="flex-1 min-w-0">
+            <div class="flex items-start justify-between gap-2">
+                <h4 :class="['font-semibold text-gray-900', !notification.read && 'text-primary-700']">
+                    {{ notification.title }}
+                </h4>
+                <span class="text-xs text-gray-400 whitespace-nowrap">{{ notification.time }}</span>
+            </div>
+            <p class="text-sm text-gray-600 mt-1 line-clamp-2">{{ notification.message }}</p>
+
+            <router-link v-if="notification.actionUrl" :to="notification.actionUrl"
+                class="inline-flex items-center gap-1 text-sm text-primary font-medium mt-2 hover:underline">
+                {{ notification.actionLabel || t('notification.item.viewDetails') }}
+                <ArrowRightIcon class="w-4 h-4" />
+            </router-link>
+        </div>
+
+        <div v-if="!isDrawer"
+            class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
+            <button v-if="!notification.read" @click.stop="emit('markRead', notification.id)"
+                class="p-2 rounded-lg hover:bg-gray-200 text-gray-500 hover:text-gray-700 transition-colors"
+                :title="t('notification.item.markAsRead')">
+                <CheckMarkIcon class="w-4 h-4" />
+            </button>
+            <button @click.stop="emit('delete', notification.id)"
+                class="p-2 rounded-lg hover:bg-red-100 text-gray-500 hover:text-red-600 transition-colors"
+                :title="t('notification.item.delete')">
+                <TrashIcon class="w-4 h-4" />
+            </button>
+        </div>
+
+        <div v-if="!notification.read"
+            class="absolute left-2 top-1/10 -translate-y-1/2 w-2 h-2 rounded-full bg-primary">
+        </div>
+    </div>
+</template>
diff --git a/src/routes/notification/components/NotificationList.vue b/src/routes/notification/components/NotificationList.vue
new file mode 100644
index 0000000..63b4eb1
--- /dev/null
+++ b/src/routes/notification/components/NotificationList.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+import NotificationItem from './NotificationItem.vue';
+import BellOff from '@/components/icons/BellOff.vue';
+
+interface Notification {
+    id: string;
+    type: 'info' | 'success' | 'warning' | 'error' | 'video' | 'payment' | 'system';
+    title: string;
+    message: string;
+    time: string;
+    read: boolean;
+    actionUrl?: string;
+    actionLabel?: string;
+}
+
+interface Props {
+    notifications: Notification[];
+    loading?: boolean;
+}
+
+defineProps<Props>();
+const emit = defineEmits<{
+    markRead: [id: string];
+    delete: [id: string];
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <div class="notification-list space-y-3">
+        <template v-if="loading">
+            <div
+                v-for="i in 5"
+                :key="i"
+                class="p-4 rounded-xl border border-gray-200 animate-pulse"
+            >
+                <div class="flex items-start gap-4">
+                    <div class="w-10 h-10 rounded-full bg-gray-200"></div>
+                    <div class="flex-1 space-y-2">
+                        <div class="h-4 bg-gray-200 rounded w-1/3"></div>
+                        <div class="h-3 bg-gray-200 rounded w-2/3"></div>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <template v-else-if="notifications.length > 0">
+            <NotificationItem
+                v-for="notification in notifications"
+                :key="notification.id"
+                :notification="notification"
+                @mark-read="emit('markRead', $event)"
+                @delete="emit('delete', $event)"
+            />
+        </template>
+
+        <div
+            v-else
+            class="py-16 text-center"
+        >
+            <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
+                 <BellOff class="w-10 h-10 text-gray-400" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-1">{{ t('notification.empty.title') }}</h3>
+            <p class="text-gray-500">{{ t('notification.empty.subtitle') }}</p>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/notification/components/NotificationTabs.vue b/src/routes/notification/components/NotificationTabs.vue
new file mode 100644
index 0000000..ef01e10
--- /dev/null
+++ b/src/routes/notification/components/NotificationTabs.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+
+interface Tab {
+    key: string;
+    label: string;
+    icon: any;
+    count?: number;
+}
+
+interface Props {
+    tabs: Tab[];
+    activeTab: string;
+}
+
+defineProps<Props>();
+const emit = defineEmits<{
+    'update:activeTab': [key: string];
+}>();
+</script>
+
+<template>
+    <div class="notification-tabs flex items-center gap-1 p-1 bg-gray-100 rounded-xl mb-6">
+        <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            @click="emit('update:activeTab', tab.key)"
+            :class="[
+                'flex-1 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200',
+                'flex items-center justify-center gap-2',
+                activeTab === tab.key 
+                    ? 'bg-white text-primary shadow-sm' 
+                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+            ]"
+        >
+                <component :is="tab.icon" :filled="activeTab === tab.key" class="w-4 h-4" />
+            {{ tab.label }}
+            <span 
+                v-if="tab.count && tab.count > 0" 
+                :class="[
+                    'px-1.5 py-0.5 text-xs rounded-full min-w-[20px]',
+                    activeTab === tab.key 
+                        ? 'bg-primary text-white' 
+                        : 'bg-gray-200 text-gray-600'
+                ]"
+            >
+                {{ tab.count > 99 ? '99+' : tab.count }}
+            </span>
+        </button>
+    </div>
+</template>
diff --git a/src/routes/overview/Overview.vue b/src/routes/overview/Overview.vue
new file mode 100644
index 0000000..f2e239a
--- /dev/null
+++ b/src/routes/overview/Overview.vue
@@ -0,0 +1,74 @@
+<script setup lang="tsx">
+import { client as rpcClient } from '@/api/rpcclient';
+import type { Video as ModelVideo } from '@/server/api/proto/app/v1/common';
+import { useUsageQuery } from '@/composables/useUsageQuery';
+import PageHeader from '@/components/dashboard/PageHeader.vue';
+import { computed, onMounted, ref } from 'vue';
+import NameGradient from './components/NameGradient.vue';
+import QuickActions from './components/QuickActions.vue';
+import RecentVideos from './components/RecentVideos.vue';
+import StatsOverview from './components/StatsOverview.vue';
+import type { StatProps } from '@/components/dashboard/StatsCard.vue';
+import { formatBytes, isAdmin } from '@/lib/utils';
+import { useTranslation } from 'i18next-vue';
+import { useAuthStore } from '@/stores/auth';
+const AdminOverview = defineAsyncComponent(() => import('./components/AdminOverview.vue'));
+const {t} = useTranslation()
+const auth = useAuthStore();
+const recentVideosLoading = ref(true);
+const recentVideos = ref<ModelVideo[]>([]);
+const { data: usageSnapshot, isPending: isUsagePending, refresh } = useUsageQuery();
+
+const stats = computed<StatProps[]>(() => [
+    {
+        title: 'overview.stats.totalVideos',
+        value: usageSnapshot.value?.totalVideos ?? 0,
+        trend: { value: 12, isPositive: true }
+    },
+    {
+        title: 'overview.stats.totalViews',
+        value: recentVideos.value.reduce((sum, v: any) => sum + (v.views || 0), 0),
+        trend: { value: 8, isPositive: true }
+    },
+    {
+        title: 'overview.stats.storageUsed',
+        value: `${formatBytes(usageSnapshot.value?.totalStorage ?? 0)} / ${t('overview.stats.unlimited')}`,
+        color: 'warning',
+        trend: { value: 5, isPositive: false }
+    }
+]);
+const statsLoading = computed(() => recentVideosLoading.value || (isUsagePending.value && !usageSnapshot.value));
+
+const fetchDashboardData = async () => {
+    recentVideosLoading.value = true;
+    try {
+        const response = await rpcClient.listVideos({ page: 1, limit: 5 });
+        recentVideos.value = response.videos ?? [];
+    } catch (err) {
+        console.error('Failed to fetch dashboard data:', err);
+    } finally {
+        recentVideosLoading.value = false;
+    }
+};
+
+onMounted(() => {
+    refresh();
+    fetchDashboardData();
+});
+</script>
+
+<template>
+    <div class="dashboard-overview">
+        <PageHeader :title="NameGradient" :description="$t('overview.welcome.subtitle')" :breadcrumbs="[
+            { label: $t('pageHeader.dashboard') }
+        ]" />
+
+        <AdminOverview v-if="isAdmin(auth.user?.role)" />
+        <template v-else>
+            <StatsOverview :loading="statsLoading" :stats="stats" />
+            <QuickActions :loading="recentVideosLoading" />
+            <RecentVideos :loading="recentVideosLoading" :videos="recentVideos" />
+        </template>
+        <!-- <StorageUsage :loading="loading" :stats="stats" /> -->
+    </div>
+</template>
diff --git a/src/routes/overview/components/AdminOverview.vue b/src/routes/overview/components/AdminOverview.vue
new file mode 100644
index 0000000..1cce947
--- /dev/null
+++ b/src/routes/overview/components/AdminOverview.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import { useQuery } from "@pinia/colada";
+import { computed, onMounted, ref } from "vue";
+import StatsOverview from "./StatsOverview.vue";
+
+
+const error = ref<string | null>(null);
+// const dashboard = ref<AdminDashboard | null>(null);
+
+const cards = computed(() => {
+  const data = dashboard.value;
+  return [
+    { title: "Total users", value: data?.totalUsers ?? 0, note: `${data?.newUsersToday ?? 0} new today`, tone: 'accent' as const },
+    { title: "Total videos", value: data?.totalVideos ?? 0, note: `${data?.newVideosToday ?? 0} new today`, tone: 'success' as const },
+    { title: "Payments", value: data?.totalPayments ?? 0, note: "Completed finance events", tone: 'warning' as const },
+    { title: "Revenue", value: data?.totalRevenue ?? 0, note: "Lifetime gross amount", tone: 'neutral' as const },
+  ];
+});
+
+const secondaryCards = computed(() => {
+  const data = dashboard.value;
+  return [
+    { title: "Active subscriptions", value: data?.activeSubscriptions ?? 0 },
+    { title: "Ad templates", value: data?.totalAdTemplates ?? 0 },
+    { title: "New users today", value: data?.newUsersToday ?? 0 },
+    { title: "New videos today", value: data?.newVideosToday ?? 0 },
+  ];
+});
+
+const highlights = computed(() => {
+  const data = dashboard.value;
+  return [
+    { label: "Acquisition", value: `${data?.newUsersToday ?? 0} user signups in the current day window.` },
+    { label: "Content velocity", value: `${data?.newVideosToday ?? 0} newly created videos landed today.` },
+    { label: "Catalog depth", value: `${data?.totalAdTemplates ?? 0} ad templates available to pair with uploads.` },
+  ];
+});
+
+const { data: dashboard, isLoading, refresh } = useQuery({
+  key: () => ['admin-dashboard'],
+  query: () => rpcClient.getAdminDashboard(),
+});
+onMounted(refresh);
+</script>
+
+<template>
+  <StatsOverview :loading="isLoading" :stats="cards" />
+  <div class="mb-8">
+    <div class="grid gap-4 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
+      <div class="grid gap-3 sm:grid-cols-2">
+        <div v-for="card in secondaryCards" :key="card.title"
+          class="rounded-lg border border-border bg-muted/15 px-4 py-4">
+          <div class="text-[11px] font-medium text-foreground/55">{{ card.title }}</div>
+          <div class="mt-3 text-2xl font-semibold tracking-tight text-foreground">{{ isLoading ? '—' : card.value }}
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-border bg-muted/15 p-4">
+        <div class="text-[11px] font-medium text-foreground/55">Operations notes</div>
+        <div class="mt-4 space-y-3">
+          <div v-for="item in highlights" :key="item.label"
+            class="rounded-2xl border border-border bg-background px-4 py-3">
+            <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+            <div class="mt-1 text-sm leading-6 text-foreground/70">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/routes/overview/components/NameGradient.vue b/src/routes/overview/components/NameGradient.vue
new file mode 100644
index 0000000..e7b4232
--- /dev/null
+++ b/src/routes/overview/components/NameGradient.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="text-3xl font-bold text-gray-900 mb-1">
+        <span class=":uno: bg-[linear-gradient(130deg,#14a74b_0%,#22c55e_35%,#10b981_65%,#06b6d4_100%)] bg-clip-text text-transparent">{{ $t('overview.welcome.title', { name: auth.user?.username || $t('app.name') }) }}</span>
+    </div>
+</template>
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth';
+
+const auth = useAuthStore();
+</script>
diff --git a/src/routes/overview/components/QuickActions.vue b/src/routes/overview/components/QuickActions.vue
new file mode 100644
index 0000000..464dc7e
--- /dev/null
+++ b/src/routes/overview/components/QuickActions.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import Chart from '@/components/icons/Chart.vue';
+import Credit from '@/components/icons/Credit.vue';
+import Upload from '@/components/icons/Upload.vue';
+import Video from '@/components/icons/Video.vue';
+import { useUIState } from '@/stores/uiState';
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import Referral from './Referral.vue';
+
+interface Props {
+    loading: boolean;
+}
+
+defineProps<Props>();
+
+const uiState = useUIState();
+const router = useRouter();
+const { t } = useTranslation();
+
+const quickActions = computed(() => [
+    {
+        title: t('overview.quickActions.uploadVideo.title'),
+        description: t('overview.quickActions.uploadVideo.description'),
+        icon: Upload,
+        onClick: () => uiState.toggleUploadDialog()
+    },
+    {
+        title: t('overview.quickActions.videoLibrary.title'),
+        description: t('overview.quickActions.videoLibrary.description'),
+        icon: Video,
+        onClick: () => router.push('/videos')
+    },
+    {
+        title: t('overview.quickActions.analytics.title'),
+        description: t('overview.quickActions.analytics.description'),
+        icon: Chart,
+        onClick: () => { }
+    },
+    {
+        title: t('overview.quickActions.managePlan.title'),
+        description: t('overview.quickActions.managePlan.description'),
+        icon: Credit,
+        onClick: () => router.push('/settings/billing')
+    },
+]);
+</script>
+
+<template>
+    <div v-if="loading" class="mb-8">
+        <div class="w-40 h-6 bg-gray-200 rounded animate-pulse mb-4" />
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div v-for="i in 4" :key="i" class="p-6 rounded-xl border border-gray-200">
+                    <div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse mb-4" />
+                    <div class="w-32 h-5 bg-gray-200 rounded animate-pulse mb-2" />
+                    <div class="w-full h-4 bg-gray-200 rounded animate-pulse" />
+                </div>
+            </div>
+            <div class="flex flex-col justify-between p-6 rounded-xl border border-gray-200">
+                <div class="w-40 h-8 bg-gray-200 rounded animate-pulse" />
+                <div class="w-full h-5 bg-gray-200 rounded animate-pulse my-4" />
+                <div class="w-full h-4 bg-gray-200 rounded animate-pulse" />
+            </div>
+        </div>
+    </div>
+
+    <div v-else class="mb-8">
+        <h2 class="text-xl font-semibold mb-4">{{ t('overview.quickActions.title') }}</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <button v-for="action in quickActions" :key="action.title" @click="action.onClick" :class="[
+                    'p-6 rounded-xl text-left transition-all duration-200 flex flex-col bg-header',
+                    'border border-gray-300 hover:border-primary hover:shadow-lg',
+                    'group press-animated',
+                ]">
+                    <div
+                        class="w-12 h-12 rounded-lg flex items-center justify-center mb-4 bg-muted-dark group-hover:(bg-primary/10 text-primary) transition-colors">
+                        <component filled :is="action.icon" class="w-6 h-6" />
+                    </div>
+                    <h3 class="font-semibold mb-1 group-hover:text-primary transition-colors">{{ action.title }}</h3>
+                    <p class="text-sm text-gray-600">{{ action.description }}</p>
+                </button>
+            </div>
+            <Referral />
+        </div>
+    </div>
+</template>
diff --git a/src/routes/overview/components/RecentVideos.vue b/src/routes/overview/components/RecentVideos.vue
new file mode 100644
index 0000000..aaec4a3
--- /dev/null
+++ b/src/routes/overview/components/RecentVideos.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import BaseTable from '@/components/ui/BaseTable.vue';
+import EmptyState from '@/components/dashboard/EmptyState.vue';
+import type { Video as ModelVideo } from '@/server/api/proto/app/v1/common';
+import { formatDate, formatDuration } from '@/lib/utils';
+import type { ColumnDef } from '@tanstack/vue-table';
+import { useTranslation } from 'i18next-vue';
+import { useRouter } from 'vue-router';
+import { useUIState } from '@/stores/uiState';
+
+interface Props {
+  loading: boolean;
+  videos: ModelVideo[];
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+const uiState = useUIState();
+const { t } = useTranslation();
+
+const getStatusClass = (status?: string) => {
+  switch (status?.toLowerCase()) {
+    case 'ready': return 'bg-green-100 text-green-700';
+    case 'processing': return 'bg-yellow-100 text-yellow-700';
+    case 'failed': return 'bg-red-100 text-red-700';
+    default: return 'bg-gray-100 text-gray-700';
+  }
+};
+
+const columns = computed<ColumnDef<ModelVideo>[]>(() => [
+  {
+    id: 'video',
+    header: t('overview.recentVideos.table.video'),
+    cell: ({ row }) => h('div', { class: 'flex items-center gap-3' }, [
+      h('div', { class: 'h-12 w-20 flex-shrink-0 overflow-hidden rounded bg-gray-200' }, row.original.thumbnail
+        ? h('img', {
+          src: row.original.thumbnail,
+          alt: row.original.title,
+          class: 'h-full w-full object-cover',
+        })
+        : h('div', { class: 'flex h-full w-full items-center justify-center' }, [
+          h('span', { class: 'i-heroicons-film text-xl text-gray-400' }),
+        ])),
+      h('div', { class: 'min-w-0 flex-1' }, [
+        h('p', { class: 'truncate font-medium text-gray-900' }, row.original.title),
+        h('p', { class: 'truncate text-sm text-gray-500' }, row.original.description || t('overview.recentVideos.noDescription')),
+      ]),
+    ]),
+    meta: {
+      headerClass: 'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-500',
+      cellClass: 'px-6 py-4',
+    },
+  },
+  {
+    id: 'status',
+    header: t('overview.recentVideos.table.status'),
+    accessorFn: row => row.status || '',
+    cell: ({ row }) => h('span', {
+      class: ['whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium', getStatusClass(row.original.status)],
+    }, row.original.status || t('overview.recentVideos.unknownStatus')),
+    meta: {
+      headerClass: 'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-500',
+      cellClass: 'px-6 py-4',
+    },
+  },
+  {
+    id: 'duration',
+    header: t('overview.recentVideos.table.duration'),
+    accessorFn: row => Number(row.duration || 0),
+    cell: ({ row }) => h('span', { class: 'text-sm text-gray-500' }, formatDuration(row.original.duration)),
+    meta: {
+      headerClass: 'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-500',
+      cellClass: 'px-6 py-4',
+    },
+  },
+  {
+    id: 'createdAt',
+    header: t('overview.recentVideos.table.uploadDate'),
+    accessorFn: row => row.createdAt || '',
+    cell: ({ row }) => h('span', { class: 'text-sm text-gray-500' }, formatDate(row.original.createdAt)),
+    meta: {
+      headerClass: 'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-500',
+      cellClass: 'px-6 py-4',
+    },
+  },
+  {
+    id: 'actions',
+    header: t('overview.recentVideos.table.actions'),
+    enableSorting: false,
+    cell: () => h('div', { class: 'flex items-center gap-2' }, [
+      h('button', {
+        class: 'rounded p-1.5 transition-colors hover:bg-gray-100',
+        title: t('overview.recentVideos.actionEdit'),
+      }, [h('span', { class: 'i-heroicons-pencil h-4 w-4 text-gray-600' })]),
+      h('button', {
+        class: 'rounded p-1.5 transition-colors hover:bg-gray-100',
+        title: t('overview.recentVideos.actionShare'),
+      }, [h('span', { class: 'i-heroicons-share h-4 w-4 text-gray-600' })]),
+      h('button', {
+        class: 'rounded p-1.5 transition-colors hover:bg-red-100',
+        title: t('overview.recentVideos.actionDelete'),
+      }, [h('span', { class: 'i-heroicons-trash h-4 w-4 text-red-600' })]),
+    ]),
+    meta: {
+      headerClass: 'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-500',
+      cellClass: 'px-6 py-4',
+    },
+  },
+]);
+</script>
+
+<template>
+  <div class="mb-8">
+    <div v-if="loading">
+      <div class="mb-4 flex items-center justify-between">
+        <div class="h-6 w-32 rounded bg-gray-200 animate-pulse" />
+        <div class="h-4 w-20 rounded bg-gray-200 animate-pulse" />
+      </div>
+      <div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+        <div v-for="i in 5" :key="i" class="border-b border-gray-200 p-4 last:border-b-0">
+          <div class="flex gap-4">
+            <div class="h-10 w-16 rounded bg-gray-200 animate-pulse" />
+            <div class="flex-1 space-y-2">
+              <div class="h-4 w-[30%] rounded bg-gray-200 animate-pulse" />
+              <div class="h-3 w-[20%] rounded bg-gray-200 animate-pulse" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <div class="mb-4 flex items-center justify-between">
+        <h2 class="text-xl font-semibold">{{ t('overview.recentVideos.title') }}</h2>
+        <router-link to="/videos" class="flex items-center gap-1 text-sm font-medium text-primary hover:underline">
+          {{ t('overview.recentVideos.viewAll') }}
+          <span class="i-heroicons-arrow-right h-4 w-4" />
+        </router-link>
+      </div>
+
+      <EmptyState
+        v-if="videos.length === 0"
+        :title="t('overview.recentVideos.emptyTitle')"
+        :description="t('overview.recentVideos.emptyDescription')"
+        imageUrl="https://cdn-icons-png.flaticon.com/512/7486/7486747.png"
+        :actionLabel="t('overview.recentVideos.emptyAction')"
+        :onAction="() => uiState.toggleUploadDialog()"
+      />
+
+      <BaseTable
+        v-else
+        :data="props.videos"
+        :columns="columns"
+        :get-row-id="(row, index) => row.id || `recent-video-${index}`"
+        wrapperClass="rounded-xl border border-gray-200 bg-white"
+        tableClass="w-full"
+        headerRowClass="bg-gray-50 border-b border-gray-200"
+        bodyRowClass="hover:bg-gray-50"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/routes/overview/components/Referral.vue b/src/routes/overview/components/Referral.vue
new file mode 100644
index 0000000..5763bc7
--- /dev/null
+++ b/src/routes/overview/components/Referral.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="rounded-xl border border-gray-300 hover:border-primary hover:shadow-lg text-card-foreground bg-header">
+        <div class="flex flex-col space-y-1.5 p-6">
+            <h3 class="text-lg font-semibold leading-none tracking-tight">{{ t('overview.referral.title') }}</h3>
+        </div>
+        <div class="p-6 pt-0 space-y-4">
+            <p class="text-sm text-gray-600 font-medium">{{ t('overview.referral.subtitle') }}</p>
+            <div class="flex gap-2">
+                <AppInput class="w-full" readonly type="text" :modelValue="url" @click="copyToClipboard" />
+                <button class="btn btn-primary" @click="copyToClipboard" :disabled="isCopied" :aria-label="t('common.copy')">
+                    <svg v-if="!isCopied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                        stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true">
+                        <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+                        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+                    </svg>
+                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                        stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M22 11.02V12a10 10 0 1 1-5.93-9.14"></path>
+                        <path d="M22 4L12 14.01l-3-3"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { useAuthStore } from '@/stores/auth';
+import { useTranslation } from 'i18next-vue';
+import { computed, ref } from 'vue';
+
+const auth = useAuthStore();
+const isCopied = ref(false);
+const { t } = useTranslation();
+
+const url = computed(() => {
+    if (typeof location === 'undefined') {
+        return auth.user?.username ? `/ref/${auth.user.username}` : '';
+    }
+    return `${location.origin}/ref/${auth.user?.username || ''}`;
+});
+
+const copyToClipboard = ($event: MouseEvent) => {
+    if ($event.target instanceof HTMLInputElement) {
+        $event.target.select();
+    }
+
+    navigator.clipboard.writeText(url.value);
+    isCopied.value = true;
+
+    setTimeout(() => {
+        isCopied.value = false;
+    }, 3000);
+};
+</script>
diff --git a/src/routes/overview/components/StatsOverview.vue b/src/routes/overview/components/StatsOverview.vue
new file mode 100644
index 0000000..393e6cd
--- /dev/null
+++ b/src/routes/overview/components/StatsOverview.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import StatsCard, { type StatProps } from '@/components/dashboard/StatsCard.vue';
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+
+interface Props {
+    loading: boolean;
+    stats: StatProps[]
+}
+
+const props = defineProps<Props>();
+const { t, i18next } = useTranslation();
+const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US');
+</script>
+
+<template>
+    <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <div v-for="i in stats.length" :key="i" class="bg-header rounded-xl border border-gray-200 p-6">
+            <div class="flex items-center justify-between mb-4">
+                <div class="space-y-2">
+                    <div class="w-20 h-4 bg-gray-200 rounded animate-pulse mb-2" />
+                    <div class="w-32 h-8 bg-gray-200 rounded animate-pulse" />
+                </div>
+            </div>
+            <div class="w-16 h-4 bg-gray-200 rounded animate-pulse" />
+        </div>
+    </div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <StatsCard v-for="stat in stats" :key="stat.title" v-bind="stat"/>
+    </div>
+</template>
diff --git a/src/routes/overview/components/StorageUsage.vue b/src/routes/overview/components/StorageUsage.vue
new file mode 100644
index 0000000..6766c6f
--- /dev/null
+++ b/src/routes/overview/components/StorageUsage.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { formatBytes } from '@/lib/utils';
+import { computed } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+interface Props {
+    loading: boolean;
+    stats: {
+        totalVideos: number;
+        storageUsed: number;
+        storageLimit: number;
+    }
+}
+
+const props = defineProps<Props>();
+const { t } = useTranslation();
+
+const storagePercentage = computed(() => {
+    return Math.round((props.stats.storageUsed / props.stats.storageLimit) * 100);
+});
+
+const storageBreakdown = computed(() => {
+    const videoSize = props.stats.storageUsed;
+    const thumbSize = props.stats.totalVideos * 300 * 1024; // ~300KB per thumbnail
+    const otherSize = props.stats.totalVideos * 100 * 1024; // ~100KB other files
+    const total = videoSize + thumbSize + otherSize;
+
+    return [
+        { label: t('overview.storage.breakdown.videos'), size: videoSize, percentage: (videoSize / (total || 1)) * 100, color: 'bg-primary' },
+        { label: t('overview.storage.breakdown.thumbnails'), size: thumbSize, percentage: (thumbSize / (total || 1)) * 100, color: 'bg-blue-500' },
+        { label: t('overview.storage.breakdown.other'), size: otherSize, percentage: (otherSize / (total || 1)) * 100, color: 'bg-gray-400' },
+    ];
+});
+</script>
+
+<template>
+    <div v-if="!loading" class="bg-white rounded-xl border border-gray-200 p-6">
+        <h2 class="text-xl font-semibold mb-4">{{ t('overview.storage.title') }}</h2>
+
+        <div class="mb-4">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-sm font-medium text-gray-700">
+                    {{ t('overview.storage.usedOfLimit', { used: formatBytes(stats.storageUsed), limit: formatBytes(stats.storageLimit) }) }}
+                </span>
+                <span class="text-sm font-medium" :class="storagePercentage > 80 ? 'text-danger' : 'text-gray-700'">
+                    {{ storagePercentage }}%
+                </span>
+            </div>
+
+            <div class="h-3 bg-gray-200 rounded-full overflow-hidden">
+                <div class="h-full transition-all duration-500 rounded-full"
+                    :class="storagePercentage > 80 ? 'bg-danger' : 'bg-primary'"
+                    :style="{ width: `${storagePercentage}%` }" />
+            </div>
+        </div>
+
+        <div class="space-y-2">
+            <div v-for="item in storageBreakdown" :key="item.label" class="flex items-center justify-between text-sm">
+                <div class="flex items-center gap-2">
+                    <div :class="['w-3 h-3 rounded-sm', item.color]" />
+                    <span class="text-gray-700">{{ item.label }}</span>
+                </div>
+                <span class="text-gray-500">{{ formatBytes(item.size) }}</span>
+            </div>
+        </div>
+
+        <div v-if="storagePercentage > 80" class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <div class="flex gap-2">
+                <span class="i-heroicons-exclamation-triangle w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
+                <div>
+                    <p class="text-sm font-medium text-yellow-800">{{ t('overview.storage.lowStorage.title') }}</p>
+                    <p class="text-sm text-yellow-700 mt-1">
+                        {{ t('overview.storage.lowStorage.message') }}
+                        <router-link to="/plans" class="underline font-medium">{{ t('overview.storage.lowStorage.viewPlans') }}</router-link>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/overview/components/WelcomeBanner.vue b/src/routes/overview/components/WelcomeBanner.vue
new file mode 100644
index 0000000..449d5d0
--- /dev/null
+++ b/src/routes/overview/components/WelcomeBanner.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth';
+import { useTranslation } from 'i18next-vue';
+
+const auth = useAuthStore();
+const { t } = useTranslation();
+</script>
+
+<template>
+    <div class="bg-gradient-to-r to-success/20 p-4 sm:p-6 md:p-8 rounded-xl border-2 border-success/30 mb-8">
+        <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-foreground mb-2">
+            {{ t('overview.welcome.title', { name: auth.user?.username || t('app.name') }) }}
+        </h1>
+        <p class="text-sm sm:text-base text-gray-600 font-medium">{{ t('overview.welcome.subtitle') }}</p>
+    </div>
+</template>
diff --git a/src/routes/settings/AdsVast/AdsVast.vue b/src/routes/settings/AdsVast/AdsVast.vue
new file mode 100644
index 0000000..b06e8df
--- /dev/null
+++ b/src/routes/settings/AdsVast/AdsVast.vue
@@ -0,0 +1,348 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import { useAppConfirm } from '@/composables/useAppConfirm';
+import { useAppToast } from '@/composables/useAppToast';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+import { useAuthStore } from '@/stores/auth';
+import { useQuery } from '@pinia/colada';
+import { useTranslation } from 'i18next-vue';
+import { computed, ref, watch } from 'vue';
+import AdsVastDialog from './components/AdsVastDialog.vue';
+import AdsVastNotices from './components/AdsVastNotices.vue';
+import AdsVastTable from './components/AdsVastTable';
+import AdsVastToolbar from './components/AdsVastToolbar.vue';
+import type {
+    AdTemplate,
+    CreateAdTemplateRequest
+} from './types';
+
+const toast = useAppToast();
+const confirm = useAppConfirm();
+const auth = useAuthStore();
+const { t } = useTranslation();
+
+const createInitialFormData = (): CreateAdTemplateRequest => ({
+    name: '',
+    description: '',
+    vastTagUrl: '',
+    adFormat: 'pre-roll',
+    duration: undefined,
+    isActive: true,
+    isDefault: false,
+});
+
+const showAddDialog = ref(false);
+const editingTemplate = ref<AdTemplate | null>(null);
+const saving = ref(false);
+const deletingId = ref<string | null>(null);
+const togglingId = ref<string | null>(null);
+const defaultingId = ref<string | null>(null);
+const formData = ref<CreateAdTemplateRequest>(createInitialFormData());
+
+const isFreePlan = computed(() => !auth.user?.plan_id);
+const isMutating = computed(() => saving.value || deletingId.value !== null || togglingId.value !== null || defaultingId.value !== null);
+
+const { data: templatesSnapshot, error, isPending, refetch } = useQuery({
+    key: () => ['settings', 'ad-templates'],
+    query: async () => {
+        const response = await rpcClient.listAdTemplates();
+        return response.templates || [];
+    },
+});
+
+const templates = computed<AdTemplate[]>(() => templatesSnapshot.value || []);
+const isInitialLoading = computed(() => isPending.value && !templatesSnapshot.value);
+const canCreateTemplate = computed(() => !isFreePlan.value && !isInitialLoading.value && !isMutating.value);
+const canEditDialog = computed(() => !isFreePlan.value && !saving.value);
+
+const getErrorMessage = (value: any, fallback: string) => value?.error?.message || value?.message || value?.data?.message || fallback;
+
+const showActionErrorToast = (value: any) => {
+    toast.add({
+        severity: 'error',
+        summary: t('settings.adsVast.toast.failedSummary'),
+        detail: getErrorMessage(value, t('settings.adsVast.toast.failedDetail')),
+        life: 5000,
+    });
+};
+
+const showUpgradeRequiredToast = () => {
+    toast.add({
+        severity: 'warn',
+        summary: t('settings.adsVast.toast.upgradeRequiredSummary'),
+        detail: t('settings.adsVast.toast.upgradeRequiredDetail'),
+        life: 4000,
+    });
+};
+
+const ensurePaidPlan = () => {
+    if (!isFreePlan.value) return true;
+    showUpgradeRequiredToast();
+    return false;
+};
+
+watch(error, (value, previous) => {
+    if (!value || value === previous || isMutating.value) return;
+    showActionErrorToast(value);
+});
+
+const resetForm = () => {
+    formData.value = createInitialFormData();
+    editingTemplate.value = null;
+};
+
+const closeDialog = () => {
+    showAddDialog.value = false;
+    resetForm();
+};
+
+const openAddDialog = () => {
+    if (!ensurePaidPlan()) return;
+    resetForm();
+    showAddDialog.value = true;
+};
+
+const applyTemplateToForm = (template: AdTemplate) => {
+    formData.value = {
+        name: template.name || '',
+        description: template.description || '',
+        vastTagUrl: template.vastTagUrl || '',
+        adFormat: template.adFormat || 'pre-roll',
+        duration: template.duration,
+        isActive: template.isActive,
+        isDefault: Boolean(template.isDefault),
+    };
+};
+
+const openEditDialog = (template: AdTemplate) => {
+    if (!ensurePaidPlan()) return;
+    applyTemplateToForm(template);
+    editingTemplate.value = template;
+    showAddDialog.value = true;
+};
+
+const buildRequestBody = (enabled = true): Parameters<typeof rpcClient.createAdTemplate>[0] => ({
+    ...formData.value,
+    name: (formData.value.name || '').trim(),
+    description: '',
+    vastTagUrl: (formData.value.vastTagUrl || '').trim(),
+    adFormat: formData.value.adFormat || 'pre-roll',
+    duration: formData.value.adFormat === 'mid-roll' ? formData.value.duration : undefined,
+    isActive: enabled,
+    isDefault: enabled ? Boolean(formData.value.isDefault) : false,
+});
+
+const handleSave = async () => {
+    if (saving.value || !ensurePaidPlan()) return;
+
+    if (!(formData.value.name || '').trim()) {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.adsVast.toast.nameRequiredSummary'),
+            detail: t('settings.adsVast.toast.nameRequiredDetail'),
+            life: 3000,
+        });
+        return;
+    }
+    if (!(formData.value.vastTagUrl || '').trim()) {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.adsVast.toast.urlRequiredSummary'),
+            detail: t('settings.adsVast.toast.urlRequiredDetail'),
+            life: 3000,
+        });
+        return;
+    }
+    try {
+        new URL(formData.value.vastTagUrl || '');
+    } catch {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.adsVast.toast.invalidUrlSummary'),
+            detail: t('settings.adsVast.toast.invalidUrlDetail'),
+            life: 3000,
+        });
+        return;
+    }
+    if (formData.value.adFormat === 'mid-roll' && (!formData.value.duration || formData.value.duration <= 0)) {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.adsVast.toast.durationRequiredSummary'),
+            detail: t('settings.adsVast.toast.durationRequiredDetail'),
+            life: 3000,
+        });
+        return;
+    }
+
+    saving.value = true;
+    try {
+        if (editingTemplate.value) {
+            await rpcClient.updateAdTemplate({
+                id: editingTemplate.value.id || '',
+                ...buildRequestBody(Boolean(editingTemplate.value.isActive)),
+            });
+            toast.add({
+                severity: 'success',
+                summary: t('settings.adsVast.toast.updatedSummary'),
+                detail: t('settings.adsVast.toast.updatedDetail'),
+                life: 3000,
+            });
+        } else {
+            await rpcClient.createAdTemplate(buildRequestBody(true));
+            toast.add({
+                severity: 'success',
+                summary: t('settings.adsVast.toast.createdSummary'),
+                detail: t('settings.adsVast.toast.createdDetail'),
+                life: 3000,
+            });
+        }
+
+        await refetch();
+        closeDialog();
+    } catch (value: any) {
+        console.error(value);
+        showActionErrorToast(value);
+    } finally {
+        saving.value = false;
+    }
+};
+
+const handleToggle = async (template: AdTemplate, nextValue: boolean) => {
+    if (!ensurePaidPlan()) return;
+
+    togglingId.value = template.id || null;
+    try {
+        await rpcClient.updateAdTemplate({
+            id: template.id || '',
+            name: template.name || '',
+            description: template.description || '',
+            vastTagUrl: template.vastTagUrl || '',
+            adFormat: template.adFormat,
+            duration: template.adFormat === 'mid-roll' ? template.duration : undefined,
+            isActive: nextValue,
+            isDefault: nextValue ? Boolean(template.isDefault) : false,
+        });
+
+        await refetch();
+        toast.add({
+            severity: 'info',
+            summary: nextValue
+                ? t('settings.adsVast.toast.enabledSummary')
+                : t('settings.adsVast.toast.disabledSummary'),
+            detail: t('settings.adsVast.toast.toggleDetail', {
+                name: template.name || '',
+                state: nextValue
+                    ? t('settings.adsVast.state.enabled')
+                    : t('settings.adsVast.state.disabled'),
+            }),
+            life: 2000,
+        });
+    } catch (value: any) {
+        console.error(value);
+        showActionErrorToast(value);
+    } finally {
+        togglingId.value = null;
+    }
+};
+
+const handleSetDefault = async (template: AdTemplate) => {
+    if (Boolean(template.isDefault) || !Boolean(template.isActive) || !ensurePaidPlan()) return;
+
+    defaultingId.value = template.id || null;
+    try {
+        await rpcClient.updateAdTemplate({
+            id: template.id || '',
+            name: template.name || '',
+            description: template.description || '',
+            vastTagUrl: template.vastTagUrl || '',
+            adFormat: template.adFormat,
+            duration: template.adFormat === 'mid-roll' ? template.duration : undefined,
+            isActive: template.isActive,
+            isDefault: true,    
+        });
+
+        await refetch();
+        toast.add({
+            severity: 'success',
+            summary: t('settings.adsVast.toast.defaultUpdatedSummary'),
+            detail: t('settings.adsVast.toast.defaultUpdatedDetail', { name: template.name || '' }),
+            life: 3000,
+        });
+    } catch (value: any) {
+        console.error(value);
+        showActionErrorToast(value);
+    } finally {
+        defaultingId.value = null;
+    }
+};
+
+const handleDelete = (template: AdTemplate) => {
+    if (!ensurePaidPlan()) return;
+
+    confirm.require({
+        message: t('settings.adsVast.confirm.deleteMessage', { name: template.name || '' }),
+        header: t('settings.adsVast.confirm.deleteHeader'),
+        acceptLabel: t('settings.adsVast.confirm.deleteAccept'),
+        rejectLabel: t('settings.adsVast.confirm.deleteReject'),
+        accept: async () => {
+            deletingId.value = template.id || null;
+            try {
+                await rpcClient.deleteAdTemplate({ id: template.id || '' });
+                await refetch();
+                toast.add({
+                    severity: 'info',
+                    summary: t('settings.adsVast.toast.deletedSummary'),
+                    detail: t('settings.adsVast.toast.deletedDetail'),
+                    life: 3000,
+                });
+            } catch (value: any) {
+                console.error(value);
+                showActionErrorToast(value);
+            } finally {
+                deletingId.value = null;
+            }
+        },
+    });
+};
+</script>
+
+<template>
+    <SettingsSectionCard
+        :title="t('settings.content.ads.title')"
+        :description="t('settings.content.ads.subtitle')"
+        bodyClass=""
+    >
+        <template #header-actions>
+            <AdsVastToolbar :disabled="!canCreateTemplate" @create="openAddDialog" />
+        </template>
+
+        <AdsVastNotices :is-free-plan="isFreePlan" />
+
+        <AdsVastTable
+            :templates="templates"
+            :is-initial-loading="isInitialLoading"
+            :is-read-only="isFreePlan"
+            :is-mutating="isMutating"
+            :saving="saving"
+            :deleting-id="deletingId"
+            :toggling-id="togglingId"
+            :defaulting-id="defaultingId"
+            @edit="openEditDialog"
+            @delete="handleDelete"
+            @toggle-active="handleToggle($event.template, $event.value)"
+            @set-default="handleSetDefault"
+        />
+
+        <AdsVastDialog
+            :visible="showAddDialog"
+            :editing-template="editingTemplate"
+            :form-data="formData"
+            :saving="saving"
+            :can-edit="canEditDialog"
+            @update:visible="showAddDialog = $event"
+            @update:form-data="formData = $event"
+            @save="handleSave"
+            @close="closeDialog"
+        />
+    </SettingsSectionCard>
+</template>
diff --git a/src/routes/settings/AdsVast/components/AdsVastDialog.vue b/src/routes/settings/AdsVast/components/AdsVastDialog.vue
new file mode 100644
index 0000000..d05e974
--- /dev/null
+++ b/src/routes/settings/AdsVast/components/AdsVastDialog.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+import type { AdTemplate, CreateAdTemplateRequest } from '../types';
+
+const AD_FORMAT_OPTIONS = ['pre-roll', 'mid-roll', 'post-roll'] as const;
+
+type AdFormatOption = NonNullable<CreateAdTemplateRequest['adFormat']>;
+
+const props = defineProps<{
+    visible: boolean;
+    editingTemplate: AdTemplate | null;
+    formData: CreateAdTemplateRequest;
+    saving: boolean;
+    canEdit: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+    (e: 'update:formData', value: CreateAdTemplateRequest): void;
+    (e: 'save'): void;
+    (e: 'close'): void;
+}>();
+
+const { t } = useTranslation();
+
+const title = computed(() => props.editingTemplate
+    ? t('settings.adsVast.dialog.editTitle')
+    : t('settings.adsVast.dialog.createTitle'));
+
+const canToggleDefault = computed(() => props.canEdit && (!props.editingTemplate || Boolean(props.editingTemplate.isActive)));
+
+const defaultHint = computed(() => props.editingTemplate && !Boolean(props.editingTemplate.isActive)
+    ? t('settings.adsVast.dialog.defaultDisabledHint')
+    : t('settings.adsVast.dialog.defaultHint'));
+
+const adFormatLabels = computed<Record<string, string>>(() => ({
+    'pre-roll': t('settings.adsVast.formats.preRoll'),
+    'mid-roll': t('settings.adsVast.formats.midRoll'),
+    'post-roll': t('settings.adsVast.formats.postRoll'),
+}));
+
+const updateForm = (patch: Partial<CreateAdTemplateRequest>) => {
+    emit('update:formData', {
+        ...props.formData,
+        ...patch,
+    });
+};
+
+const updateTextField = (key: 'name' | 'vastTagUrl', value: string | number | null) => {
+    updateForm({
+        [key]: typeof value === 'string' ? value : value == null ? '' : String(value),
+    });
+};
+
+const updateDuration = (value: string | number | null) => {
+    if (typeof value === 'number') {
+        updateForm({ duration: value });
+        return;
+    }
+
+    if (value == null || value === '') {
+        updateForm({ duration: undefined });
+        return;
+    }
+
+    const parsed = Number(value);
+    updateForm({ duration: Number.isNaN(parsed) ? undefined : parsed });
+};
+
+const updateCheckbox = (event: Event) => {
+    updateForm({
+        isDefault: (event.target as HTMLInputElement).checked,
+    });
+};
+
+const selectAdFormat = (format: AdFormatOption) => {
+    updateForm({
+        adFormat: format,
+        duration: format === 'mid-roll' ? props.formData.duration : undefined,
+    });
+};
+
+const formatButtonClass = (format: AdFormatOption) => [
+    'px-3 py-2 border rounded-md text-sm font-medium transition-all disabled:opacity-60 disabled:cursor-not-allowed',
+    props.formData.adFormat === format
+        ? 'border-primary bg-primary/5 text-primary'
+        : 'border-border text-foreground/60 hover:border-primary/50',
+];
+</script>
+
+<template>
+    <AppDialog
+        :visible="visible"
+        :title="title"
+        maxWidthClass="max-w-lg"
+        @update:visible="emit('update:visible', $event)"
+        @close="emit('close')"
+    >
+        <div class="space-y-4">
+            <div class="grid gap-2">
+                <label for="name" class="text-sm font-medium text-foreground">{{ t('settings.adsVast.dialog.templateName') }}</label>
+                <AppInput
+                    id="name"
+                    :model-value="formData.name"
+                    :disabled="!canEdit"
+                    :placeholder="t('settings.adsVast.dialog.templateNamePlaceholder')"
+                    @update:model-value="updateTextField('name', $event)"
+                />
+            </div>
+
+            <div class="grid gap-2">
+                <label for="vastUrl" class="text-sm font-medium text-foreground">{{ t('settings.adsVast.dialog.vastUrlLabel') }}</label>
+                <AppInput
+                    id="vastUrl"
+                    :model-value="formData.vastTagUrl"
+                    :disabled="!canEdit"
+                    :placeholder="t('settings.adsVast.dialog.vastUrlPlaceholder')"
+                    @update:model-value="updateTextField('vastTagUrl', $event)"
+                />
+            </div>
+
+            <div class="grid gap-2">
+                <label class="text-sm font-medium text-foreground">{{ t('settings.adsVast.dialog.adFormat') }}</label>
+                <div class="grid grid-cols-3 gap-2">
+                    <button
+                        v-for="format in AD_FORMAT_OPTIONS"
+                        :key="format"
+                        type="button"
+                        :disabled="!canEdit"
+                        :class="formatButtonClass(format)"
+                        @click="selectAdFormat(format)"
+                    >
+                        {{ adFormatLabels[format] }}
+                    </button>
+                </div>
+            </div>
+
+            <div v-if="formData.adFormat === 'mid-roll'" class="grid gap-2">
+                <label for="duration" class="text-sm font-medium text-foreground">{{ t('settings.adsVast.dialog.adInterval') }}</label>
+                <AppInput
+                    id="duration"
+                    :model-value="formData.duration"
+                    :disabled="!canEdit"
+                    type="number"
+                    :placeholder="t('settings.adsVast.dialog.adIntervalPlaceholder')"
+                    :min="10"
+                    :max="600"
+                    @update:model-value="updateDuration"
+                />
+            </div>
+
+            <div class="grid gap-2">
+                <label class="text-sm font-medium text-foreground">{{ t('settings.adsVast.dialog.defaultLabel') }}</label>
+                <label
+                    :class="[
+                        'flex items-start gap-3 rounded-md border border-border p-3',
+                        canToggleDefault && !saving ? 'cursor-pointer' : 'opacity-60 cursor-not-allowed',
+                    ]"
+                >
+                    <input
+                        :checked="Boolean(formData.isDefault)"
+                        type="checkbox"
+                        class="mt-1 h-4 w-4 rounded border-border"
+                        :disabled="!canToggleDefault || saving"
+                        @change="updateCheckbox($event)"
+                    >
+                    <div>
+                        <p class="text-sm text-foreground">{{ t('settings.adsVast.dialog.defaultCheckbox') }}</p>
+                        <p class="mt-0.5 text-xs text-foreground/60">{{ defaultHint }}</p>
+                    </div>
+                </label>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <AppButton variant="secondary" size="sm" :disabled="saving" @click="emit('close')">
+                    {{ t('common.cancel') }}
+                </AppButton>
+                <AppButton size="sm" :loading="saving" :disabled="!canEdit" @click="emit('save')">
+                    <template #icon>
+                        <CheckIcon class="h-4 w-4" />
+                    </template>
+                    {{ editingTemplate ? t('settings.adsVast.dialog.update') : t('settings.adsVast.dialog.create') }}
+                </AppButton>
+            </div>
+        </template>
+    </AppDialog>
+</template>
diff --git a/src/routes/settings/AdsVast/components/AdsVastNotices.vue b/src/routes/settings/AdsVast/components/AdsVastNotices.vue
new file mode 100644
index 0000000..7c03307
--- /dev/null
+++ b/src/routes/settings/AdsVast/components/AdsVastNotices.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    isFreePlan: boolean;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <SettingsNotice class="rounded-none border-x-0 border-t-0 p-3" contentClass="text-xs text-foreground/70">
+        {{ t('settings.adsVast.infoBanner') }}
+    </SettingsNotice>
+
+    <SettingsNotice
+        v-if="isFreePlan"
+        tone="warning"
+        :title="t('settings.adsVast.readOnlyTitle')"
+        class="rounded-none border-x-0 border-t-0 p-3"
+        contentClass="text-xs text-foreground/70"
+    >
+        {{ t('settings.adsVast.readOnlyMessage') }}
+    </SettingsNotice>
+</template>
diff --git a/src/routes/settings/AdsVast/components/AdsVastTable.tsx b/src/routes/settings/AdsVast/components/AdsVastTable.tsx
new file mode 100644
index 0000000..c28ad51
--- /dev/null
+++ b/src/routes/settings/AdsVast/components/AdsVastTable.tsx
@@ -0,0 +1,244 @@
+import { useAppToast } from '@/composables/useAppToast';
+import type { ColumnDef } from '@tanstack/vue-table';
+import { useTranslation } from 'i18next-vue';
+import { computed, defineComponent, type PropType } from 'vue';
+import type { AdTemplate } from '../types';
+
+// Components
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import LinkIcon from '@/components/icons/LinkIcon.vue';
+import PencilIcon from '@/components/icons/PencilIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppSwitch from '@/components/ui/AppSwitch.vue';
+import BaseTable from '@/components/ui/BaseTable.vue';
+import SettingsTableSkeleton from '@/routes/settings/components/SettingsTableSkeleton.vue';
+import { formatDate } from '@/lib/utils';
+
+export default defineComponent({
+  name: 'AdTemplateTable',
+  props: {
+    templates: { type: Array as PropType<AdTemplate[]>, required: true },
+    isInitialLoading: { type: Boolean, default: false },
+    isReadOnly: { type: Boolean, default: false },
+    isMutating: { type: Boolean, default: false },
+    saving: { type: Boolean, default: false },
+    deletingId: { type: String as PropType<string | null>, default: null },
+    togglingId: { type: String as PropType<string | null>, default: null },
+    defaultingId: { type: String as PropType<string | null>, default: null },
+  },
+  emits: {
+    edit: (template: AdTemplate) => true,
+    delete: (template: AdTemplate) => true,
+    'toggle-active': (payload: { template: AdTemplate; value: boolean }) => true,
+    'set-default': (template: AdTemplate) => true,
+  },
+  setup(props, { emit }) {
+    const toast = useAppToast();
+    const { t } = useTranslation();
+
+    const adFormatLabels = computed<Record<string, string>>(() => ({
+      'pre-roll': t('settings.adsVast.formats.preRoll'),
+      'mid-roll': t('settings.adsVast.formats.midRoll'),
+      'post-roll': t('settings.adsVast.formats.postRoll'),
+    }));
+
+    const getAdFormatLabel = (format?: string) => adFormatLabels.value[format || ''] || format || '-';
+
+    const getAdFormatColor = (format?: string) => {
+      const colors: Record<string, string> = {
+        'pre-roll': 'bg-blue-500/10 text-blue-500',
+        'mid-roll': 'bg-yellow-500/10 text-yellow-500',
+        'post-roll': 'bg-purple-500/10 text-purple-500',
+      };
+      return colors[format || ''] || 'bg-gray-500/10 text-gray-500';
+    };
+
+    const copyToClipboard = async (text: string) => {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+      }
+
+      toast.add({
+        severity: 'success',
+        summary: t('settings.adsVast.toast.copiedSummary'),
+        detail: t('settings.adsVast.toast.copiedDetail'),
+        life: 2000,
+      });
+    };
+
+    const columns = computed<ColumnDef<AdTemplate>[]>(() => [
+      {
+        id: 'template',
+        header: t('settings.adsVast.table.template'),
+        accessorFn: (row) => row.name || '',
+        cell: ({ row }) => (
+          <>
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="text-sm font-medium text-foreground">{row.original.name || ''}</span>
+              {row.original.isDefault && (
+                <span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                  {t('settings.adsVast.defaultBadge')}
+                </span>
+              )}
+            </div>
+            <p class="mt-0.5 text-xs text-foreground/50">
+              {t('settings.adsVast.createdOn', { date: formatDate(row.original.createdAt) || '-' })}
+            </p>
+          </>
+        ),
+        meta: {
+          headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
+          cellClass: 'px-6 py-3',
+        },
+      },
+      {
+        id: 'format',
+        header: t('settings.adsVast.table.format'),
+        accessorFn: (row) => row.adFormat || '',
+        cell: ({ row }) => (
+          <div>
+            <span class={['rounded-full px-2 py-1 text-xs font-medium', getAdFormatColor(row.original.adFormat)]}>
+              {getAdFormatLabel(row.original.adFormat)}
+            </span>
+            {row.original.adFormat === 'mid-roll' && row.original.duration && (
+              <span class="ml-2 text-xs text-foreground/50">({row.original.duration}s)</span>
+            )}
+          </div>
+        ),
+        meta: {
+          headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
+          cellClass: 'px-6 py-3',
+        },
+      },
+      {
+        id: 'vastUrl',
+        header: t('settings.adsVast.table.vastUrl'),
+        accessorFn: (row) => row.vastTagUrl || '',
+        cell: ({ row }) => (
+          <div class="flex max-w-[240px] items-center gap-2">
+            <code class="truncate text-xs text-foreground/60">{row.original.vastTagUrl || ''}</code>
+            <AppButton
+              variant="ghost"
+              size="sm"
+              disabled={props.isMutating || !row.original.vastTagUrl}
+              onClick={() => copyToClipboard(row.original.vastTagUrl || '')}
+              v-slots={{
+                icon: () => <CheckIcon class="h-4 w-4" />
+              }}
+            />
+          </div>
+        ),
+        enableSorting: false,
+        meta: {
+          headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
+          cellClass: 'px-6 py-3',
+        },
+      },
+      {
+        id: 'status',
+        header: t('common.status'),
+        accessorFn: (row) => Number(Boolean(row.isActive)),
+        cell: ({ row }) => (
+          <div class="text-center">
+            <AppSwitch
+              modelValue={Boolean(row.original.isActive)}
+              disabled={
+                props.isReadOnly ||
+                props.saving ||
+                props.deletingId !== null ||
+                props.defaultingId !== null ||
+                props.togglingId === row.original.id
+              }
+              onUpdate:modelValue={(value: boolean) => emit('toggle-active', { template: row.original, value })}
+            />
+          </div>
+        ),
+        meta: {
+          headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50',
+          cellClass: 'px-6 py-3 text-center',
+        },
+      },
+      {
+        id: 'actions',
+        header: t('common.actions'),
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div class="flex flex-wrap items-center justify-center gap-2">
+            {!row.original.isDefault && (
+              <AppButton
+                variant="ghost"
+                size="sm"
+                loading={props.defaultingId === row.original.id}
+                disabled={
+                  props.isReadOnly ||
+                  props.saving ||
+                  props.deletingId !== null ||
+                  props.togglingId !== null ||
+                  props.defaultingId !== null ||
+                  !Boolean(row.original.isActive)
+                }
+                onClick={() => emit('set-default', row.original)}
+              >
+                {t('settings.adsVast.actions.setDefault')}
+              </AppButton>
+            )}
+            <AppButton
+              variant="ghost"
+              size="icon"
+              disabled={props.isReadOnly || props.isMutating}
+              onClick={() => emit('edit', row.original)}
+              v-slots={{
+                icon: () => <PencilIcon filled class="h-4 w-4" />
+              }}
+            />
+            <AppButton
+              variant="ghost"
+              size="icon"
+              disabled={props.isReadOnly || props.isMutating}
+              onClick={() => emit('delete', row.original)}
+              v-slots={{
+                icon: () => <TrashIcon filled class="h-4 w-4" />
+              }}
+            />
+          </div>
+        ),
+        meta: {
+          headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50 [&>div]:justify-center',
+          cellClass: 'px-6 py-3 text-center',
+        },
+      },
+    ]);
+    
+    return () => (
+          <BaseTable
+            data={props.templates}
+            loading={props.isInitialLoading}
+            columns={columns.value}
+            getRowId={(row: AdTemplate, index: number) => 
+              row.id || `${row.name || 'template'}:${row.vastTagUrl || index}`
+            }
+            wrapperClass="mt-4 border-b border-border rounded-none border-x-0 border-t-0 bg-transparent"
+            tableClass="w-full"
+            headerRowClass="bg-muted/30"
+            bodyRowClass="border-b border-border hover:bg-muted/30"
+            v-slots={{
+              empty: () => (
+                <div class="px-6 py-12 text-center">
+                  <LinkIcon class="mx-auto mb-3 block h-10 w-10 text-foreground/30" />
+                  <p class="mb-1 text-sm text-foreground/60">{t('settings.adsVast.emptyTitle')}</p>
+                  <p class="text-xs text-foreground/40">{t('settings.adsVast.emptySubtitle')}</p>
+                </div>
+              )
+            }}
+          />
+    );
+  },
+});
\ No newline at end of file
diff --git a/src/routes/settings/AdsVast/components/AdsVastToolbar.vue b/src/routes/settings/AdsVast/components/AdsVastToolbar.vue
new file mode 100644
index 0000000..5b9adaf
--- /dev/null
+++ b/src/routes/settings/AdsVast/components/AdsVastToolbar.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import PlusIcon from '@/components/icons/PlusIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    disabled: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'create'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <AppButton size="sm" :disabled="disabled" @click="emit('create')">
+        <template #icon>
+            <PlusIcon class="h-4 w-4" />
+        </template>
+        {{ t('settings.adsVast.createTemplate') }}
+    </AppButton>
+</template>
diff --git a/src/routes/settings/AdsVast/types.ts b/src/routes/settings/AdsVast/types.ts
new file mode 100644
index 0000000..af20b44
--- /dev/null
+++ b/src/routes/settings/AdsVast/types.ts
@@ -0,0 +1,6 @@
+export type { AdTemplate } from '@/server/api/proto/app/v1/common';
+export type {
+    CreateAdTemplateRequest,
+    DeleteAdTemplateRequest,
+    UpdateAdTemplateRequest,
+} from '@/server/api/proto/app/v1/catalog';
diff --git a/src/routes/settings/Billing/Billing.vue b/src/routes/settings/Billing/Billing.vue
new file mode 100644
index 0000000..23fa0e7
--- /dev/null
+++ b/src/routes/settings/Billing/Billing.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import CoinsIcon from '@/components/icons/CoinsIcon.vue';
+import PlusIcon from '@/components/icons/PlusIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import { useUsageQuery } from '@/composables/useUsageQuery';
+import BillingTopupDialog from '@/routes/settings/Billing/components/BillingTopupDialog.vue';
+import BillingUsageSection from '@/routes/settings/Billing/components/BillingUsageSection.vue';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+import type { Plan as ModelPlan } from '@/server/api/proto/app/v1/common';
+import { useAuthStore } from '@/stores/auth';
+import { computed, ref } from 'vue';
+import SettingsRow from '../components/SettingsRow.vue';
+import PaymentHistory from './components/PaymentHistory';
+import PlanSelection from './components/PlanSelection';
+import UpgradePlan from './components/UpgradePlan';
+
+const auth = useAuthStore();
+
+const { refetch: refetchUsage } = useUsageQuery();
+
+const topupDialogVisible = ref(false);
+const topupAmount = ref<number | null>(null);
+
+const upgradeDialogVisible = ref(false);
+const selectedPlan = ref<ModelPlan | null>(null);
+
+const currentPlanId = computed(() => auth.user?.plan_id || undefined);
+const selectedPlanId = computed(() => (upgradeDialogVisible.value ? selectedPlan.value?.id || '' : ''));
+const walletBalance = computed(() => auth.user?.wallet_balance || 0);
+
+const refreshBillingState = async () => {
+    await Promise.allSettled([
+        auth.fetchMe(),
+        refetchUsage(),
+    ]);
+};
+
+const openUpgradeDialog = (plan: ModelPlan) => {
+    selectedPlan.value = plan;
+    upgradeDialogVisible.value = true;
+};
+
+const closeUpgradeDialog = () => {
+    upgradeDialogVisible.value = false;
+    selectedPlan.value = null;
+};
+
+const handleUpgradeVisibilityChange = (visible: boolean) => {
+    upgradeDialogVisible.value = visible;
+
+    if (!visible) {
+        selectedPlan.value = null;
+    }
+};
+
+const handleUpgradeSuccess = async () => {
+    await refreshBillingState();
+};
+
+const openTopupDialog = () => {
+    topupAmount.value = null;
+    topupDialogVisible.value = true;
+};
+
+</script>
+
+<template>
+    <SettingsSectionCard :title="$t('settings.content.billing.title')"
+        :description="$t('settings.content.billing.subtitle')">
+        <SettingsRow :title="$t('settings.billing.walletBalance')"
+            :description="$t('settings.billing.currentBalance', { balance: auth.formatMoney(walletBalance) })"
+            iconBoxClass="bg-primary/10">
+            <template #icon>
+                <CoinsIcon filled class="w-5 h-5 text-primary" />
+            </template>
+
+            <template #actions>
+                <div class="flex flex-col items-end gap-2">
+                    <AppButton size="sm" @click="openTopupDialog">
+                        <template #icon>
+                            <PlusIcon class="w-4 h-4" />
+                        </template>
+                        {{ $t('settings.billing.topUp') }}
+                    </AppButton>
+                </div>
+            </template>
+        </SettingsRow>
+
+        <PlanSelection
+            :current-plan-id="currentPlanId"
+            :selected-plan-id="selectedPlanId"
+            @upgrade="openUpgradeDialog"
+        />
+        <BillingUsageSection />
+        <PaymentHistory />
+    </SettingsSectionCard>
+
+    <BillingTopupDialog v-model="topupDialogVisible" />
+
+    <UpgradePlan
+        :visible="upgradeDialogVisible"
+        :selected-plan="selectedPlan"
+        @update:visible="handleUpgradeVisibilityChange"
+        @close="closeUpgradeDialog"
+        @success="handleUpgradeSuccess"
+    />
+</template>
diff --git a/src/routes/settings/Billing/components/BillingTopupDialog.vue b/src/routes/settings/Billing/components/BillingTopupDialog.vue
new file mode 100644
index 0000000..82c185e
--- /dev/null
+++ b/src/routes/settings/Billing/components/BillingTopupDialog.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { client } from '@/api/rpcclient';
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import { useAppToast } from '@/composables/useAppToast';
+import { useUsageQuery } from '@/composables/useUsageQuery';
+import { getApiErrorMessage } from '@/lib/utils';
+import { useAuthStore } from '@/stores/auth';
+import { useTranslation } from 'i18next-vue';
+import { ref } from 'vue';
+
+const visible = defineModel<boolean>();
+const toast = useAppToast();
+const auth = useAuthStore();
+const { t } = useTranslation();
+const { refetch: refetchUsage } = useUsageQuery();
+
+const topupDialogVisible = ref(false);
+const topupAmount = ref<number | null>(null);
+const topupLoading = ref(false);
+const topupPresets = [10, 20, 50, 100];
+
+const refreshBillingState = async () => {
+    await Promise.allSettled([
+        auth.fetchMe(),
+        refetchUsage(),
+    ]);
+};
+
+const handleTopup = async (amount: number) => {
+    topupLoading.value = true;
+    try {
+        await client.topupWallet({ amount });
+        await refreshBillingState();
+
+        toast.add({
+            severity: 'success',
+            summary: t('settings.billing.toast.topupSuccessSummary'),
+            detail: t('settings.billing.toast.topupSuccessDetail', { amount: auth.formatMoney(amount) }),
+            life: 3000,
+        });
+        topupDialogVisible.value = false;
+        topupAmount.value = null;
+    } catch (error) {
+        console.error(error);
+        toast.add({
+            severity: 'error',
+            summary: t('settings.billing.toast.topupFailedSummary'),
+            detail: getApiErrorMessage(error, t('settings.billing.toast.topupFailedDetail')),
+            life: 5000,
+        });
+    } finally {
+        topupLoading.value = false;
+        visible.value = false;
+    }
+};
+
+</script>
+
+<template>
+    <AppDialog
+        :visible="visible!"
+        @update:visible="visible = $event"
+        :title="$t('settings.billing.topupDialog.title')"
+        maxWidthClass="max-w-md"
+    >
+        <div class="space-y-4">
+            <p class="text-sm text-foreground/70">
+                {{ $t('settings.billing.topupDialog.subtitle') }}
+            </p>
+
+            <div class="grid grid-cols-4 gap-3">
+                <button
+                    v-for="preset in topupPresets"
+                    :key="preset"
+                    :class="[
+                        'py-2 px-3 rounded-md bg-header text-sm font-medium transition-all hover:bg-gray-500',
+                        topupAmount === preset
+                            ? 'bg-primary text-white'
+                            : 'bg-muted/50 text-foreground hover:bg-muted'
+                    ]"
+                    @click="topupAmount = preset"
+                >
+                    ${{ preset }}
+                </button>
+            </div>
+
+            <div class="space-y-2">
+                <label class="text-sm font-medium text-foreground">{{ $t('settings.billing.topupDialog.customAmount') }}</label>
+                <div class="flex items-center gap-2">
+                    <span class="text-lg font-semibold text-foreground">$</span>
+                    <AppInput
+                        :model-value="topupAmount"
+                        type="number"
+                        :placeholder="$t('settings.billing.topupDialog.enterAmount')"
+                        inputClass="flex-1"
+                        min="1"
+                        step="1"
+                        @update:model-value="topupAmount = typeof $event === 'number' || $event === null
+                            ? $event
+                            : ($event === '' ? null : Number($event))"
+                    />
+                </div>
+            </div>
+
+            <div class="bg-muted/30 rounded-md p-3 text-xs text-foreground/60">
+                <p>{{ $t('settings.billing.topupDialog.hint') }}</p>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <AppButton
+                    variant="secondary"
+                    size="sm"
+                    :disabled="topupLoading"
+                    @click="visible = false; topupAmount = null"
+                >
+                    {{ $t('common.cancel') }}
+                </AppButton>
+                <AppButton
+                    size="sm"
+                    :loading="topupLoading"
+                    :disabled="!topupAmount || topupAmount < 1 || topupLoading"
+                    @click="handleTopup(topupAmount!)"
+                >
+                    <template #icon>
+                        <CheckIcon class="w-4 h-4" />
+                    </template>
+                    {{ $t('settings.billing.topupDialog.proceed') }}
+                </AppButton>
+            </div>
+        </template>
+    </AppDialog>
+</template>
diff --git a/src/routes/settings/Billing/components/BillingUsageSection.vue b/src/routes/settings/Billing/components/BillingUsageSection.vue
new file mode 100644
index 0000000..98e6823
--- /dev/null
+++ b/src/routes/settings/Billing/components/BillingUsageSection.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import HardDrive from '@/components/icons/hard-drive.vue';
+import Video from '@/components/icons/Video.vue';
+import { useUsageQuery } from '@/composables/useUsageQuery';
+import { formatBytes } from '@/lib/utils';
+import { computed } from 'vue';
+
+defineProps<{}>();
+const { data: usageSnapshot } = useUsageQuery();
+const dataList = computed(() => [
+    {
+        id: 'storage',
+        title: 'settings.billing.storage',
+        description: { key: 'settings.billing.storageUsedOfLimit', params: { used: formatBytes(usageSnapshot.value?.totalStorage ?? 0) } },
+        icon: HardDrive,
+    },
+    {
+        id: 'videos',
+        title: 'settings.billing.totalVideos',
+        description: { key: 'settings.billing.totalVideosUsedOfLimit', params: { used: usageSnapshot.value?.totalVideos ?? 0 } },
+        icon: Video,
+    },
+]);
+</script>
+
+<template>
+    <div>
+        <div class="px-6 py-4 hover:bg-muted/30 transition-all grid grid-cols-1 md:grid-cols-2 gap-6 rounded-md">
+            <div v-for="item in dataList" :key="item.id" class="flex items-center gap-4">
+                <div class="w-10 h-10 rounded-md bg-accent/10 flex items-center justify-center shrink-0">
+                    <component :is="item.icon" filled class="w-5 h-5 text-accent" />
+                </div>
+                <div class="hover:underline">
+                    <p class="text-sm font-medium text-foreground">{{ $t(item.title) }}</p>
+                    <p class="text-xs text-foreground/60 mt-0.5">{{ $t(item.description.key, item.description.params) }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/settings/Billing/components/PaymentHistory.tsx b/src/routes/settings/Billing/components/PaymentHistory.tsx
new file mode 100644
index 0000000..6ff883e
--- /dev/null
+++ b/src/routes/settings/Billing/components/PaymentHistory.tsx
@@ -0,0 +1,294 @@
+import { client } from "@/api/rpcclient";
+import DownloadIcon from "@/components/icons/DownloadIcon.vue";
+import ListIcon from "@/components/icons/ListIcon.vue";
+import AppButton from "@/components/ui/AppButton.vue";
+import BaseTable from "@/components/ui/BaseTable.vue";
+import { useAppToast } from "@/composables/useAppToast";
+import { getApiErrorMessage, getStatusStyles } from "@/lib/utils";
+import { PaymentHistoryItem } from "@/server/api/proto/app/v1/common";
+import { useAuthStore } from "@/stores/auth";
+import { useQuery } from "@pinia/colada";
+import type { ColumnDef } from "@tanstack/vue-table";
+import { useTranslation } from "i18next-vue";
+import { computed, defineComponent, ref } from "vue";
+
+const pageSizeOptions = [5, 10, 20, 50] as const;
+
+const normalizeHistoryStatus = (status?: string) => {
+    switch ((status || '').toLowerCase()) {
+        case 'success':
+        case 'succeeded':
+        case 'paid':
+            return 'success';
+        case 'failed':
+        case 'error':
+        case 'canceled':
+        case 'cancelled':
+            return 'failed';
+        case 'pending':
+        case 'processing':
+        default:
+            return 'pending';
+    }
+};
+
+const PaymentHistory = defineComponent({
+    name: 'PaymentHistory',
+    setup() {
+        const auth = useAuthStore();
+        const { t } = useTranslation();
+        const toast = useAppToast();
+        const downloadingInvoiceId = ref<string | null>(null);
+        const page = ref(1);
+        const limit = ref(10);
+
+        const formatTermLabel = (months: number) => t('settings.billing.termOption', { months });
+        const formatPaymentMethodLabel = (value?: string) => {
+            switch ((value || '').toLowerCase()) {
+                case 'topup':
+                    return t('settings.billing.paymentMethod.topup');
+                case 'wallet':
+                default:
+                    return t('settings.billing.paymentMethod.wallet');
+            }
+        };
+        const mapHistoryItem = (item: PaymentHistoryItem) => {
+            const details: string[] = [];
+
+            if (item.kind !== 'wallet_topup' && item.termMonths) {
+                details.push(formatTermLabel(item.termMonths));
+            }
+            if (item.kind !== 'wallet_topup' && item.paymentMethod) {
+                details.push(formatPaymentMethodLabel(item.paymentMethod));
+            }
+            if (item.kind !== 'wallet_topup' && item.expiresAt) {
+                details.push(t('settings.billing.history.validUntil', { date: auth.formatHistoryDate(item.expiresAt) }));
+            }
+
+            return {
+                id: item.id || '',
+                date: auth.formatHistoryDate(item.createdAt),
+                amount: item.amount || 0,
+                plan: item.kind === 'wallet_topup'
+                    ? t('settings.billing.walletTopup')
+                    : (item.planName || t('settings.billing.unknownPlan')),
+                status: normalizeHistoryStatus(item.status),
+                invoiceId: item.invoiceId || '-',
+                currency: item.currency || 'USD',
+                kind: item.kind || 'subscription',
+                details,
+            };
+        };
+        const { data, isLoading } = useQuery({
+            key: () => ['paymentHistory', page.value, limit.value],
+            query: () => client.listPaymentHistory(page.value, limit.value).then(res => ({
+                ...res, 
+                items: (res.payments || []).map(mapHistoryItem)
+            })),
+        });
+        const totalPages = computed(() => Math.max(1, Math.ceil((data.value?.total || 0) / (data.value?.limit || limit.value || 1))));
+
+        const handleDownloadInvoice = async (item: PaymentHistoryItem) => {
+            if (!item.id) return;
+
+            downloadingInvoiceId.value = item.id;
+            toast.add({
+                severity: 'info',
+                summary: t('settings.billing.toast.downloadingSummary'),
+                detail: t('settings.billing.toast.downloadingDetail', { invoiceId: item.invoiceId }),
+                life: 2000,
+            });
+
+            try {
+                const response = await client.downloadInvoice({ id: item.id });
+                const content = response.content || '';
+                const contentType = response.contentType || 'text/plain;charset=utf-8';
+                const filename = response.filename || `${item.invoiceId}.txt`;
+                const blob = new Blob([content], { type: contentType });
+                const url = URL.createObjectURL(blob);
+                const anchor = document.createElement('a');
+                anchor.href = url;
+                anchor.download = filename;
+                document.body.appendChild(anchor);
+                anchor.click();
+                document.body.removeChild(anchor);
+                URL.revokeObjectURL(url);
+
+                toast.add({
+                    severity: 'success',
+                    summary: t('settings.billing.toast.downloadedSummary'),
+                    detail: t('settings.billing.toast.downloadedDetail', { invoiceId: item.invoiceId }),
+                    life: 3000,
+                });
+            } catch (error) {
+                console.error(error);
+                toast.add({
+                    severity: 'error',
+                    summary: t('settings.billing.toast.downloadFailedSummary'),
+                    detail: getApiErrorMessage(error, t('settings.billing.toast.downloadFailedDetail')),
+                    life: 5000,
+                });
+            } finally {
+                downloadingInvoiceId.value = null;
+            }
+        };
+
+        const columns: ColumnDef<ReturnType<typeof mapHistoryItem>>[] = [
+            {
+                accessorKey: 'date',
+                header:  t('settings.billing.table.date'),
+                cell: ({ getValue }) => (
+                    <p class="text-sm font-medium text-foreground">{getValue<string>()}</p>
+                ),
+                meta: {
+                    headerClass: 'col-span-3',
+                    cellClass: 'col-span-3',
+                },
+            },
+            {
+                accessorKey: 'amount',
+                header:  t('settings.billing.table.amount'),
+                cell: ({ row }) => (
+                    <p class="text-sm text-foreground">{auth.formatMoney(row.original.amount)}</p>
+                ),
+                meta: {
+                    headerClass: 'col-span-2',
+                    cellClass: 'col-span-2',
+                },
+            },
+            {
+                accessorKey: 'plan',
+                header:  t('settings.billing.table.plan'),
+                cell: ({ row }) => (
+                    <>
+                        <p class="text-sm text-foreground">{row.original.plan}</p>
+                        {row.original.details?.length ? (
+                            <p class="mt-1 text-xs text-foreground/60">
+                                {row.original.details.join(' · ')}
+                            </p>
+                        ) : null}
+                    </>
+                ),
+                meta: {
+                    headerClass: 'col-span-3',
+                    cellClass: 'col-span-3',
+                },
+            },
+            {
+                accessorKey: 'status',
+                header:  t('settings.billing.table.status'),
+                cell: ({ row }) => (
+                    <span class={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(row.original.status)}`}>
+                        {t('settings.billing.status.' + row.original.status)}
+                    </span>
+                ),
+                meta: {
+                    headerClass: 'col-span-2',
+                    cellClass: 'col-span-2',
+                },
+            },
+            {
+                accessorKey: 'invoice',
+                enableSorting: false,
+                header:  t('settings.billing.table.invoice'),
+                cell: ({ row }) => (
+                    <button
+                        class="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground/70 hover:text-foreground hover:bg-muted/50 rounded-md transition-all disabled:opacity-60 disabled:cursor-wait"
+                        disabled={downloadingInvoiceId.value === row.original.id}
+                        onClick={() => handleDownloadInvoice(row.original as PaymentHistoryItem)}
+                    >
+                        <DownloadIcon class="w-4 h-4" />
+                        <span>{downloadingInvoiceId.value === row.original.id ? '...' : t('settings.billing.download')}</span>
+                    </button>
+                ),
+                meta: {
+                    headerClass: 'col-span-2 flex justify-center',
+                    cellClass: 'col-span-2 flex justify-center',
+                },
+            },
+        ];
+
+        const previousPage = () => {
+            if (!data.value?.hasPrev || isLoading.value) return;
+            page.value -= 1;
+        };
+        const nextPage = () => {
+            if (!data.value?.hasNext || isLoading.value) return;
+            page.value += 1;
+        };
+        const changePageSize = (event: Event) => {
+            const nextLimit = Number((event.target as HTMLSelectElement).value) || 10;
+            if (nextLimit === limit.value) return;
+            limit.value = nextLimit;
+            page.value = 1;
+        };
+
+        return () => (
+            <div class="px-6 py-4">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="w-10 h-10 rounded-md bg-accent/10 flex items-center justify-center shrink-0">
+                        <ListIcon filled class="w-6 h-6 text-primary" />
+                    </div>
+                    <div>
+                        <p class="text-sm font-medium text-foreground">{t('settings.billing.paymentHistory')}</p>
+                        <p class="text-xs text-foreground/60 mt-0.5">{t('settings.billing.paymentHistorySubtitle')}</p>
+                    </div>
+                </div>
+
+                <BaseTable
+                    data={data.value?.items || []}
+                    columns={columns}
+                    loading={isLoading.value}
+                    emptyText={t('settings.billing.noPaymentHistory')}
+                >
+                    {{
+                        loading: () => (
+                            <div class="px-4 py-6 space-y-3">
+                                {Array.from({ length: 10 }).map((_, index) => (
+                                    <div key={index} class="grid grid-cols-12 gap-4 items-center animate-pulse">
+                                        <div class="col-span-3 h-4 rounded bg-muted/50" />
+                                        <div class="col-span-2 h-4 rounded bg-muted/50" />
+                                        <div class="col-span-3 h-4 rounded bg-muted/50" />
+                                        <div class="col-span-2 h-6 rounded bg-muted/50" />
+                                        <div class="col-span-2 h-8 rounded bg-muted/50" />
+                                    </div>
+                                ))}
+                            </div>
+                        ),
+                        empty: () => (
+                            <div class="text-center py-12 text-foreground/60">
+                                <div class="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-4">
+                                    <DownloadIcon class="w-8 h-8 text-foreground/40" />
+                                </div>
+                                <p>{t('settings.billing.noPaymentHistory')}</p>
+                            </div>
+                        )
+                    }}
+                </BaseTable>
+
+                <div class="mt-4 flex flex-col gap-3 text-xs text-foreground/55 sm:flex-row sm:items-center sm:justify-between">
+                    <div>{t('common.page', { current: data.value?.page || page.value, total: totalPages.value })} · {data.value?.total || 0} {t('common.records')}</div>
+                    <div class="flex flex-wrap items-center gap-2">
+                        <label class="flex items-center gap-2">
+                            <span>{t('common.rowsPerPage')}</span>
+                            <select
+                                class="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground"
+                                value={String(limit.value)}
+                                onChange={changePageSize}
+                            >
+                                {pageSizeOptions.map((option) => (
+                                    <option key={option} value={String(option)}>{option}</option>
+                                ))}
+                            </select>
+                        </label>
+                        <div class="flex items-center gap-2 xl:justify-end">
+                        <AppButton size="sm" variant="secondary" disabled={!data.value?.hasPrev || isLoading.value} onClick={previousPage}>{t('common.previous')}</AppButton>
+                        <AppButton size="sm" variant="secondary" disabled={!data.value?.hasNext || isLoading.value} onClick={nextPage}>{t('common.next')}</AppButton>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+export default PaymentHistory;
\ No newline at end of file
diff --git a/src/routes/settings/Billing/components/PlanSelection.tsx b/src/routes/settings/Billing/components/PlanSelection.tsx
new file mode 100644
index 0000000..78b7ac7
--- /dev/null
+++ b/src/routes/settings/Billing/components/PlanSelection.tsx
@@ -0,0 +1,169 @@
+import { client as rpcClient } from '@/api/rpcclient';
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import Credit from '@/components/icons/Credit.vue';
+import { cn } from '@/lib/utils';
+import type { Plan as ModelPlan } from '@/server/api/proto/app/v1/common';
+import { useAuthStore } from '@/stores/auth';
+import { useQuery } from '@pinia/colada';
+import { useTranslation } from 'i18next-vue';
+import { computed, defineComponent } from 'vue';
+const PlanSelection = defineComponent({
+  name: 'PlanSelection',
+  props: {
+    currentPlanId: String,
+    selectedPlanId: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: {
+    "upgrade": (plan: ModelPlan) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useTranslation();
+    const auth = useAuthStore();
+    const { data, isLoading } = useQuery({
+      key: () => ['billing-plans'],
+      query: () => rpcClient.listPlans(),
+    });
+
+    const currentPlanId = computed(() => props.currentPlanId || undefined);
+
+    const subscriptionSummary = computed(() => {
+      const expiresAt = auth.user?.planExpiresAt || auth.user?.plan_expires_at;
+      const formattedDate = auth.formatHistoryDate(expiresAt);
+      const currentPlanName = data.value?.plans?.find((plan) => plan.id === currentPlanId.value)?.name
+        || t('settings.billing.subscription.unknownPlan');
+
+      if (currentPlanId.value) {
+        if (auth.user?.plan_expiring_soon && expiresAt) {
+          return {
+            title: t('settings.billing.subscription.expiringTitle'),
+            description: t('settings.billing.subscription.expiringDescription', {
+              date: formattedDate,
+            }),
+            tone: 'warning' as const,
+          };
+        }
+
+        if (expiresAt) {
+          return {
+            title: t('settings.billing.subscription.activeTitle'),
+            description: t('settings.billing.subscription.activeDescription', {
+              date: formattedDate,
+            }),
+            tone: 'default' as const,
+          };
+        }
+
+        return {
+          title: t('settings.billing.subscription.activeTitle'),
+          description: currentPlanName,
+          tone: 'default' as const,
+        };
+      }
+
+      if (expiresAt) {
+        return {
+          title: t('settings.billing.subscription.expiredTitle'),
+          description: t('settings.billing.subscription.expiredDescription', { date: formattedDate }),
+          tone: 'warning' as const,
+        };
+      }
+
+      return {
+        title: t('settings.billing.subscription.freeTitle'),
+        description: t('settings.billing.subscription.freeDescription'),
+        tone: 'default' as const,
+      };
+    });
+
+    const sortedPlans = computed(() =>
+      [...(data.value?.plans || [])].sort((a, b) => (a.price || 0) - (b.price || 0))
+    );
+
+    const isCurrentPlan = (planId?: string) => planId === currentPlanId.value;
+    const isSelectingPlan = (planId?: string) => planId === props.selectedPlanId;
+
+    return () => (
+      <div class="px-6 py-4">
+        <div class="mb-4 flex items-center gap-4">
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10">
+            <Credit filled class="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <p class="text-sm font-medium text-foreground">{t('settings.billing.availablePlans')}</p>
+            <p class="mt-0.5 text-xs text-foreground/60">{t('settings.billing.availablePlansHint')}</p>
+          </div>
+        </div>
+
+        {isLoading.value ? (
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+            {[1, 2, 3].map((i) => (
+              <div key={i}>
+                <div class="h-[200px] animate-pulse rounded-lg bg-muted/50"></div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+            {sortedPlans.value.map((plan) => (
+              <div
+                key={plan.id}
+                class={[
+                  'flex flex-col rounded-lg border p-4 transition-all hover:bg-muted/30',
+                  isCurrentPlan(plan.id) ? 'border-primary/40 bg-primary/5' : 'border-border',
+                ]}
+              >
+                <div class="mb-3">
+                  <div class="flex items-center justify-between gap-3">
+                    <h3 class="text-lg font-semibold text-foreground">{plan.name}</h3>
+                    {isCurrentPlan(plan.id) && (
+                      <span class={cn('inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary', subscriptionSummary.value.tone === 'warning' && 'bg-warning/10 text-warning')}>
+                        {subscriptionSummary.value.description}
+                      </span>
+                    )}
+                  </div>
+                  <p class="mt-1 min-h-[2.5rem] text-sm text-foreground/60">{plan.description}</p>
+                </div>
+
+                <div class="mb-4">
+                  <span class="text-2xl font-bold text-foreground">{auth.formatMoney(plan.price || 0)}</span>
+                  <span class="text-sm text-foreground/60"> / {t(`settings.billing.cycle.${plan.cycle}`)}</span>
+                </div>
+
+                <ul class="mb-4 space-y-2 text-sm">
+                  {(plan.features || []).map((feature: string) => (
+                    <li key={feature} class="flex items-center gap-2 text-foreground/70">
+                      <CheckIcon class="h-4 w-4 shrink-0 text-success" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+
+                {!isCurrentPlan(plan.id) && (
+                  <button
+                    disabled={isSelectingPlan(plan.id)}
+                    class={[
+                      'mt-auto w-full rounded-md px-4 py-2 text-sm font-medium transition-all',
+                      isSelectingPlan(plan.id)
+                        ? 'cursor-wait bg-muted/50 text-foreground/60'
+                        : 'bg-primary text-white hover:bg-primary/90',
+                    ]}
+                    onClick={() => emit('upgrade', plan)}
+                  >
+                    {isSelectingPlan(plan.id)
+                      ? t('settings.billing.upgradeDialog.selecting')
+                      : t('settings.billing.upgradeDialog.choosePlan')}
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+});
+
+export default PlanSelection;
diff --git a/src/routes/settings/Billing/components/UpgradePlan.tsx b/src/routes/settings/Billing/components/UpgradePlan.tsx
new file mode 100644
index 0000000..73828b5
--- /dev/null
+++ b/src/routes/settings/Billing/components/UpgradePlan.tsx
@@ -0,0 +1,396 @@
+import { useTranslation } from 'i18next-vue';
+import { computed, defineComponent, ref, watch, type PropType } from 'vue';
+
+import { client } from '@/api/rpcclient';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import { useAppToast } from '@/composables/useAppToast';
+import { getApiErrorMessage, getApiErrorPayload } from '@/lib/utils';
+import type { Plan as ModelPlan } from '@/server/api/proto/app/v1/common';
+import { useAuthStore } from '@/stores/auth';
+
+const TERM_OPTIONS = [1, 3, 6, 12] as const;
+
+type UpgradePaymentMethod = 'wallet' | 'topup';
+
+const UpgradePlan = defineComponent({
+    name: 'UpgradePlan',
+    props: {
+        visible: {
+            type: Boolean,
+            required: true,
+        },
+        selectedPlan: {
+            type: Object as PropType<ModelPlan | null>,
+            default: null,
+        },
+    },
+    emits: {
+        'update:visible': (_visible: boolean) => true,
+        close: () => true,
+        success: () => true,
+    },
+    setup(props, { emit }) {
+        const toast = useAppToast();
+        const auth = useAuthStore();
+        const { t } = useTranslation();
+
+        const selectedTermMonths = ref<number>(1);
+        const selectedPaymentMethod = ref<UpgradePaymentMethod>('wallet');
+        const purchaseTopupAmount = ref<number | null>(null);
+        const purchaseLoading = ref(false);
+        const purchaseError = ref<string | null>(null);
+
+        const walletBalance = computed(() => auth.user?.wallet_balance || 0);
+        const selectedPlanPrice = computed(() => props.selectedPlan?.price || 0);
+        const selectedTotalAmount = computed(() => selectedPlanPrice.value * selectedTermMonths.value);
+        const selectedShortfall = computed(() => Math.max(selectedTotalAmount.value - walletBalance.value, 0));
+        const selectedNeedsTopup = computed(() => selectedShortfall.value > 0.000001);
+
+        const canSubmitUpgrade = computed(() => {
+            if (!props.selectedPlan?.id || purchaseLoading.value) return false;
+            if (!selectedNeedsTopup.value) return true;
+            if (selectedPaymentMethod.value !== 'topup') return false;
+
+            const topupAmount = purchaseTopupAmount.value || 0;
+            return topupAmount >= selectedShortfall.value && topupAmount > 0;
+        });
+
+        const upgradeSubmitLabel = computed(() => {
+            if (selectedNeedsTopup.value && selectedPaymentMethod.value === 'topup') {
+                return t('settings.billing.upgradeDialog.topupAndUpgrade');
+            }
+
+            return t('settings.billing.upgradeDialog.payWithWallet');
+        });
+
+        const getApiErrorData = (error: unknown) => getApiErrorPayload(error)?.data || null;
+
+        const resetUpgradeState = (plan: ModelPlan | null = props.selectedPlan) => {
+            const shortfall = Math.max((plan?.price || 0) - walletBalance.value, 0);
+            const needsTopup = shortfall > 0.000001;
+
+            selectedTermMonths.value = 1;
+            selectedPaymentMethod.value = needsTopup ? 'topup' : 'wallet';
+            purchaseTopupAmount.value = needsTopup ? Number(shortfall.toFixed(2)) : null;
+            purchaseLoading.value = false;
+            purchaseError.value = null;
+        };
+
+        const emitClose = () => {
+            emit('update:visible', false);
+            emit('close');
+        };
+
+        const closeDialog = () => {
+            if (purchaseLoading.value) return;
+            emitClose();
+        };
+
+        watch(
+            () => props.visible,
+            (visible) => {
+                if (visible) {
+                    resetUpgradeState(props.selectedPlan);
+                    return;
+                }
+
+                resetUpgradeState(null);
+            },
+            { immediate: true },
+        );
+
+        watch(
+            () => props.selectedPlan?.id,
+            (planId, previousPlanId) => {
+                if (!props.visible) return;
+                if (planId === previousPlanId) return;
+                resetUpgradeState(props.selectedPlan);
+            },
+        );
+
+        watch(selectedShortfall, (value) => {
+            if (!props.visible) return;
+
+            if (value <= 0) {
+                selectedPaymentMethod.value = 'wallet';
+                purchaseTopupAmount.value = null;
+                return;
+            }
+
+            if (selectedPaymentMethod.value === 'topup' && ((purchaseTopupAmount.value || 0) < value)) {
+                purchaseTopupAmount.value = Number(value.toFixed(2));
+            }
+        });
+
+        const selectUpgradePaymentMethod = (method: UpgradePaymentMethod) => {
+            selectedPaymentMethod.value = method;
+            purchaseError.value = null;
+
+            if (method === 'topup' && selectedShortfall.value > 0 && ((purchaseTopupAmount.value || 0) < selectedShortfall.value)) {
+                purchaseTopupAmount.value = Number(selectedShortfall.value.toFixed(2));
+            }
+        };
+
+        const updatePurchaseTopupAmount = (value: string | number | null) => {
+            if (typeof value === 'number' || value === null) {
+                purchaseTopupAmount.value = value;
+                return;
+            }
+
+            if (value === '') {
+                purchaseTopupAmount.value = null;
+                return;
+            }
+
+            const parsed = Number(value);
+            purchaseTopupAmount.value = Number.isNaN(parsed) ? null : parsed;
+        };
+
+        const submitUpgrade = async () => {
+            if (!props.selectedPlan?.id) return;
+
+            purchaseLoading.value = true;
+            purchaseError.value = null;
+
+            try {
+                const paymentMethod: UpgradePaymentMethod = selectedNeedsTopup.value ? selectedPaymentMethod.value : 'wallet';
+                const payload: Parameters<typeof client.createPayment>[0] = {
+                    planId: props.selectedPlan.id,
+                    termMonths: selectedTermMonths.value,
+                    paymentMethod,
+                };
+
+                if (paymentMethod === 'topup') {
+                    payload.topupAmount = purchaseTopupAmount.value || selectedShortfall.value;
+                }
+
+                await client.createPayment(payload);
+
+                toast.add({
+                    severity: 'success',
+                    summary: t('settings.billing.toast.subscriptionSuccessSummary'),
+                    detail: t('settings.billing.toast.subscriptionSuccessDetail', {
+                        plan: props.selectedPlan.name || '',
+                        term: t('settings.billing.termOption', { months: selectedTermMonths.value }),
+                    }),
+                    life: 3000,
+                });
+
+                emit('success');
+                emitClose();
+            } catch (error) {
+                console.error(error);
+
+                const errorData = getApiErrorData(error);
+                const nextShortfall = typeof errorData?.shortfall === 'number'
+                    ? errorData.shortfall
+                    : selectedShortfall.value;
+
+                if (nextShortfall > 0) {
+                    selectedPaymentMethod.value = 'topup';
+                    if ((purchaseTopupAmount.value || 0) < nextShortfall) {
+                        purchaseTopupAmount.value = Number(nextShortfall.toFixed(2));
+                    }
+                }
+
+                purchaseError.value = getApiErrorMessage(error, t('settings.billing.toast.subscriptionFailedDetail'));
+            } finally {
+                purchaseLoading.value = false;
+            }
+        };
+
+        return () => (
+            <AppDialog
+                visible={props.visible}
+                closable={!purchaseLoading.value}
+                title={t('settings.billing.upgradeDialog.title')}
+                maxWidthClass="max-w-2xl"
+                onUpdate:visible={(visible: boolean) => { emit('update:visible', visible); }}
+                onClose={() => { emit('close'); }}
+                v-slots={{
+                    default: () => (
+                        <>
+                            {props.selectedPlan ? (
+                                <div class="space-y-5">
+                                    <div class="rounded-lg border border-border bg-muted/20 p-4">
+                                        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                                            <div>
+                                                <p class="text-xs font-medium uppercase tracking-[0.18em] text-foreground/50">
+                                                    {t('settings.billing.upgradeDialog.selectedPlan')}
+                                                </p>
+                                                <h3 class="mt-1 text-lg font-semibold text-foreground">{props.selectedPlan.name}</h3>
+                                                <p class="mt-1 text-sm text-foreground/70">
+                                                    {props.selectedPlan.description || t('settings.billing.availablePlansHint')}
+                                                </p>
+                                            </div>
+
+                                            <div class="text-left md:text-right">
+                                                <p class="text-xs text-foreground/50">{t('settings.billing.upgradeDialog.basePrice')}</p>
+                                                <p class="mt-1 text-2xl font-semibold text-foreground">
+                                                    {auth.formatMoney(props.selectedPlan.price || 0)}
+                                                </p>
+                                                <p class="text-xs text-foreground/60">{t('settings.billing.upgradeDialog.perMonthBase')}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="space-y-3">
+                                        <div>
+                                            <p class="text-sm font-medium text-foreground">{t('settings.billing.upgradeDialog.termTitle')}</p>
+                                            <p class="mt-1 text-xs text-foreground/60">{t('settings.billing.upgradeDialog.termHint')}</p>
+                                        </div>
+
+                                        <div class="grid grid-cols-2 gap-3 md:grid-cols-4">
+                                            {TERM_OPTIONS.map((months) => (
+                                                <button
+                                                    key={months}
+                                                    type="button"
+                                                    class={[
+                                                        'rounded-lg border px-4 py-3 text-left transition-all',
+                                                        selectedTermMonths.value === months
+                                                            ? 'border-primary bg-primary/5 text-primary'
+                                                            : 'border-border bg-header text-foreground hover:border-primary/30 hover:bg-muted/30',
+                                                    ]}
+                                                    onClick={() => (selectedTermMonths.value = months)}
+                                                >
+                                                    <p class="text-sm font-medium">{t('settings.billing.termOption', { months })}</p>
+                                                    <p class="mt-1 text-xs text-foreground/60">
+                                                        {auth.formatMoney((props.selectedPlan?.price || 0) * months)}
+                                                    </p>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </div>
+
+                                    <div class="grid gap-3 md:grid-cols-3">
+                                        <div class="rounded-lg border border-border bg-header p-4">
+                                            <p class="text-xs uppercase tracking-wide text-foreground/50">
+                                                {t('settings.billing.upgradeDialog.totalLabel')}
+                                            </p>
+                                            <p class="mt-2 text-xl font-semibold text-foreground">
+                                                {auth.formatMoney(selectedTotalAmount.value)}
+                                            </p>
+                                        </div>
+                                        <div class="rounded-lg border border-border bg-header p-4">
+                                            <p class="text-xs uppercase tracking-wide text-foreground/50">
+                                                {t('settings.billing.upgradeDialog.walletBalanceLabel')}
+                                            </p>
+                                            <p class="mt-2 text-xl font-semibold text-foreground">
+                                                {auth.formatMoney(walletBalance.value)}
+                                            </p>
+                                        </div>
+                                        <div
+                                            class={[
+                                                'rounded-lg border p-4',
+                                                selectedNeedsTopup.value ? 'border-warning/30 bg-warning/10' : 'border-success/20 bg-success/5',
+                                            ]}
+                                        >
+                                            <p class="text-xs uppercase tracking-wide text-foreground/50">
+                                                {t('settings.billing.upgradeDialog.shortfallLabel')}
+                                            </p>
+                                            <p class={[
+                                                'mt-2 text-xl font-semibold',
+                                                selectedNeedsTopup.value ? 'text-warning' : 'text-success',
+                                            ]}>
+                                                {auth.formatMoney(selectedShortfall.value)}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    {selectedNeedsTopup.value ? (
+                                        <div class="space-y-3">
+                                            <div>
+                                                <p class="text-sm font-medium text-foreground">
+                                                    {t('settings.billing.upgradeDialog.paymentMethodTitle')}
+                                                </p>
+                                                <p class="mt-1 text-xs text-foreground/60">{t('settings.billing.upgradeDialog.paymentMethodHint')}</p>
+                                            </div>
+
+                                            <div class="grid gap-3 md:grid-cols-2">
+                                                <button
+                                                    type="button"
+                                                    class={[
+                                                        'rounded-lg border p-4 text-left transition-all',
+                                                        selectedPaymentMethod.value === 'wallet' ? 'border-primary bg-primary/5' : 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
+                                                    ]}
+                                                    onClick={() => selectUpgradePaymentMethod('wallet')}
+                                                >
+                                                    <p class="text-sm font-medium text-foreground">{t('settings.billing.paymentMethod.wallet')}</p>
+                                                    <p class="mt-1 text-xs text-foreground/60">{t('settings.billing.upgradeDialog.walletOptionDescription')}</p>
+                                                </button>
+
+                                                <button
+                                                    type="button"
+                                                    class={[
+                                                        'rounded-lg border p-4 text-left transition-all',
+                                                        selectedPaymentMethod.value === 'topup' ? 'border-primary bg-primary/5' : 'border-border bg-header hover:border-primary/30 hover:bg-muted/30',
+                                                    ]}
+                                                    onClick={() => selectUpgradePaymentMethod('topup')}
+                                                >
+                                                    <p class="text-sm font-medium text-foreground">{t('settings.billing.paymentMethod.topup')}</p>
+                                                    <p class="mt-1 text-xs text-foreground/60">
+                                                        {t('settings.billing.upgradeDialog.topupOptionDescription', { shortfall: auth.formatMoney(selectedShortfall.value) })}
+                                                    </p>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div class="rounded-lg border border-success/20 bg-success/5 p-4 text-sm text-success">
+                                            {t('settings.billing.upgradeDialog.walletCoveredHint')}
+                                        </div>
+                                    )}
+
+                                    {selectedNeedsTopup.value && selectedPaymentMethod.value === 'topup' && (
+                                        <div class="grid gap-2">
+                                            <label class="text-sm font-medium text-foreground">{t('settings.billing.upgradeDialog.topupAmountLabel')}</label>
+                                            <AppInput
+                                                modelValue={purchaseTopupAmount.value}
+                                                type="number"
+                                                min="0.01"
+                                                step="0.01"
+                                                placeholder={t('settings.billing.upgradeDialog.topupAmountPlaceholder')}
+                                                onUpdate:modelValue={updatePurchaseTopupAmount}
+                                            />
+                                            <p class="text-xs text-foreground/60">
+                                                {t('settings.billing.upgradeDialog.topupAmountHint', { shortfall: auth.formatMoney(selectedShortfall.value) })}
+                                            </p>
+                                        </div>
+                                    )}
+
+                                    {selectedNeedsTopup.value && selectedPaymentMethod.value === 'wallet' && (
+                                        <div class="rounded-lg border border-warning/30 bg-warning/10 p-4 text-sm text-warning">
+                                            {t('settings.billing.upgradeDialog.walletInsufficientHint', { shortfall: auth.formatMoney(selectedShortfall.value) })}
+                                        </div>
+                                    )}
+
+                                    {purchaseError.value && (
+                                        <div class="rounded-lg border border-danger bg-danger/10 p-4 text-sm text-danger">
+                                            {purchaseError.value}
+                                        </div>
+                                    )}
+                                </div>
+                            ) : null}
+                        </>
+                    ),
+                    footer: () => (
+                        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                            <p class="text-xs text-foreground/60">{t('settings.billing.upgradeDialog.footerHint')}</p>
+                            <div class="flex justify-end gap-3">
+                                <AppButton variant="secondary" size="sm" disabled={purchaseLoading.value} onClick={closeDialog}>
+                                    {t('common.cancel')}
+                                </AppButton>
+                                <AppButton size="sm" loading={purchaseLoading.value} disabled={!canSubmitUpgrade.value} onClick={submitUpgrade}>
+                                    {upgradeSubmitLabel.value}
+                                </AppButton>
+                            </div>
+                        </div>
+                    ),
+                }}
+            />
+        );
+    },
+});
+
+export default UpgradePlan;
diff --git a/src/routes/settings/DangerZone/DangerZone.vue b/src/routes/settings/DangerZone/DangerZone.vue
new file mode 100644
index 0000000..50338b4
--- /dev/null
+++ b/src/routes/settings/DangerZone/DangerZone.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import AppButton from '@/components/ui/AppButton.vue';
+import AlertTriangleIcon from '@/components/icons/AlertTriangle.vue';
+import SlidersIcon from '@/components/icons/SlidersIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+import { useAppConfirm } from '@/composables/useAppConfirm';
+import { useAppToast } from '@/composables/useAppToast';
+import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+import { useAuthStore } from '@/stores/auth';
+import { useTranslation } from 'i18next-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const auth = useAuthStore();
+const router = useRouter();
+const toast = useAppToast();
+const confirm = useAppConfirm();
+const { t } = useTranslation();
+
+const deletingAccount = ref(false);
+const clearingData = ref(false);
+
+const handleDeleteAccount = () => {
+    confirm.require({
+        message: t('settings.dangerZone.confirm.deleteAccountMessage'),
+        header: t('settings.dangerZone.confirm.deleteAccountHeader'),
+        acceptLabel: t('settings.dangerZone.confirm.deleteAccountAccept'),
+        rejectLabel: t('settings.dangerZone.confirm.deleteAccountReject'),
+        accept: async () => {
+            deletingAccount.value = true;
+            try {
+                await rpcClient.deleteMe();
+
+                auth.$reset();
+                toast.add({
+                    severity: 'success',
+                    summary: t('settings.dangerZone.toast.deleteAccountSummary'),
+                    detail: t('settings.dangerZone.toast.deleteAccountDetail'),
+                    life: 5000,
+                });
+                await router.push('/login');
+            } catch (e: any) {
+                console.error(e);
+                toast.add({
+                    severity: 'error',
+                    summary: t('settings.dangerZone.toast.failedSummary'),
+                    detail: e.message || t('settings.dangerZone.toast.failedDetail'),
+                    life: 5000,
+                });
+            } finally {
+                deletingAccount.value = false;
+            }
+        },
+    });
+};
+
+const handleClearData = () => {
+    confirm.require({
+        message: t('settings.dangerZone.confirm.clearDataMessage'),
+        header: t('settings.dangerZone.confirm.clearDataHeader'),
+        acceptLabel: t('settings.dangerZone.confirm.clearDataAccept'),
+        rejectLabel: t('settings.dangerZone.confirm.clearDataReject'),
+        accept: async () => {
+            clearingData.value = true;
+            try {
+                await rpcClient.clearMyData();
+
+                await auth.fetchMe();
+                toast.add({
+                    severity: 'success',
+                    summary: t('settings.dangerZone.toast.clearDataSummary'),
+                    detail: t('settings.dangerZone.toast.clearDataDetail'),
+                    life: 5000,
+                });
+            } catch (e: any) {
+                console.error(e);
+                toast.add({
+                    severity: 'error',
+                    summary: t('settings.dangerZone.toast.failedSummary'),
+                    detail: e.message || t('settings.dangerZone.toast.failedDetail'),
+                    life: 5000,
+                });
+            } finally {
+                clearingData.value = false;
+            }
+        },
+    });
+};
+</script>
+
+<template>
+    <SettingsSectionCard
+        :title="t('settings.content.danger.title')"
+        :description="t('settings.content.danger.subtitle')"
+        titleClass="text-base font-semibold text-danger"
+    >
+        <SettingsRow
+            :title="t('settings.dangerZone.deleteAccount.title')"
+            :description="t('settings.dangerZone.deleteAccount.description')"
+            iconBoxClass="bg-danger/10"
+            hoverClass="hover:bg-danger/5"
+        >
+            <template #icon>
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-danger" viewBox="-10 -258 532 532"><path d="M256 264c141 0 256-115 256-256S397-248 256-248 0-133 0 8s115 256 256 256zM416-24v64H96v-64h320z" fill="currentColor"/></svg>
+            </template>
+
+            <template #actions>
+                <AppButton variant="danger" size="sm" :loading="deletingAccount" :disabled="clearingData" @click="handleDeleteAccount">
+                    {{ t('settings.dangerZone.deleteAccount.button') }}
+                </AppButton>
+            </template>
+        </SettingsRow>
+
+        <SettingsRow
+            :title="t('settings.dangerZone.clearData.title')"
+            :description="t('settings.dangerZone.clearData.description')"
+            iconBoxClass="bg-danger/10"
+            hoverClass="hover:bg-danger/5"
+        >
+            <template #icon>
+                <TrashIcon filled class="w-5 h-5 text-danger" />
+            </template>
+
+            <template #actions>
+                <AppButton variant="danger" size="sm" :loading="clearingData" :disabled="deletingAccount" @click="handleClearData">
+                    {{ t('settings.dangerZone.clearData.button') }}
+                </AppButton>
+            </template>
+        </SettingsRow>
+
+        <SettingsNotice tone="warning" class="mx-6 my-4 border-warning/30">
+            <p class="font-medium text-foreground mb-1">{{ t('settings.dangerZone.warning.title') }}</p>
+            <p>{{ t('settings.dangerZone.warning.description') }}</p>
+        </SettingsNotice>
+    </SettingsSectionCard>
+</template>
diff --git a/src/routes/settings/DomainsDns/DomainsDns.vue b/src/routes/settings/DomainsDns/DomainsDns.vue
new file mode 100644
index 0000000..4b168c5
--- /dev/null
+++ b/src/routes/settings/DomainsDns/DomainsDns.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import { useAppConfirm } from '@/composables/useAppConfirm';
+import { useAppToast } from '@/composables/useAppToast';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+import { useQuery } from '@pinia/colada';
+import { useTranslation } from 'i18next-vue';
+import { computed, ref, watch } from 'vue';
+import DomainsDnsDialog from './components/DomainsDnsDialog.vue';
+import DomainsDnsEmbedCode from './components/DomainsDnsEmbedCode.vue';
+import DomainsDnsNotices from './components/DomainsDnsNotices.vue';
+import DomainsDnsTable from './components/DomainsDnsTable.vue';
+import DomainsDnsToolbar from './components/DomainsDnsToolbar.vue';
+import { normalizeDomainInput } from './helpers';
+import type { Domain } from '@/server/api/proto/app/v1/common';
+
+const toast = useAppToast();
+const confirm = useAppConfirm();
+const { t } = useTranslation();
+
+const newDomain = ref('');
+const showAddDialog = ref(false);
+const adding = ref(false);
+const removingId = ref<string | null>(null);
+
+const { data: domainsSnapshot, error, isPending, refetch } = useQuery({
+  key: () => ['settings', 'domains'],
+  query: async () => {
+    const response = await rpcClient.listDomains();
+    return (response.domains || []);
+  },
+});
+
+const domains = computed(() => domainsSnapshot.value || []);
+const isInitialLoading = computed(() => isPending.value && !domainsSnapshot.value);
+const iframeCode = computed(() => '<iframe src="https://holistream.com/embed" width="100%" height="500" frameborder="0" allowfullscreen></iframe>');
+
+watch(error, (value, previous) => {
+  if (!value || value === previous || adding.value || removingId.value !== null) return;
+
+  toast.add({
+    severity: 'error',
+    summary: t('settings.domainsDns.toast.failedSummary'),
+    detail: (value as any)?.message || t('settings.domainsDns.toast.failedDetail'),
+    life: 5000,
+  });
+});
+
+const openAddDialog = () => {
+  newDomain.value = '';
+  showAddDialog.value = true;
+};
+
+const closeAddDialog = () => {
+  showAddDialog.value = false;
+  newDomain.value = '';
+};
+
+const handleAddDomain = async () => {
+  if (adding.value) return;
+
+  const domainName = normalizeDomainInput(newDomain.value);
+  if (!domainName || !domainName.includes('.') || /[/\s]/.test(domainName)) {
+    toast.add({
+      severity: 'error',
+      summary: t('settings.domainsDns.toast.invalidSummary'),
+      detail: t('settings.domainsDns.toast.invalidDetail'),
+      life: 3000,
+    });
+    return;
+  }
+
+  const exists = domains.value.some(domain => domain.name === domainName);
+  if (exists) {
+    toast.add({
+      severity: 'error',
+      summary: t('settings.domainsDns.toast.duplicateSummary'),
+      detail: t('settings.domainsDns.toast.duplicateDetail'),
+      life: 3000,
+    });
+    return;
+  }
+
+  adding.value = true;
+  try {
+    await rpcClient.createDomain({
+      name: domainName,
+    });
+
+    await refetch();
+    closeAddDialog();
+    toast.add({
+      severity: 'success',
+      summary: t('settings.domainsDns.toast.addedSummary'),
+      detail: t('settings.domainsDns.toast.addedDetail', { domain: domainName }),
+      life: 3000,
+    });
+  } catch (e: any) {
+    console.error(e);
+    const message = String(e?.message || '').toLowerCase();
+
+    if (message.includes('already exists')) {
+      toast.add({
+        severity: 'error',
+        summary: t('settings.domainsDns.toast.duplicateSummary'),
+        detail: t('settings.domainsDns.toast.duplicateDetail'),
+        life: 3000,
+      });
+    } else if (message.includes('invalid domain')) {
+      toast.add({
+        severity: 'error',
+        summary: t('settings.domainsDns.toast.invalidSummary'),
+        detail: t('settings.domainsDns.toast.invalidDetail'),
+        life: 3000,
+      });
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: t('settings.domainsDns.toast.failedSummary'),
+        detail: e.message || t('settings.domainsDns.toast.failedDetail'),
+        life: 5000,
+      });
+    }
+  } finally {
+    adding.value = false;
+  }
+};
+
+const handleRemoveDomain = (domain: Domain) => {
+  confirm.require({
+    message: t('settings.domainsDns.confirm.removeMessage', { domain: domain.name }),
+    header: t('settings.domainsDns.confirm.removeHeader'),
+    acceptLabel: t('settings.domainsDns.confirm.removeAccept'),
+    rejectLabel: t('settings.domainsDns.confirm.removeReject'),
+    accept: async () => {
+      removingId.value = domain.id!;
+      try {
+        await rpcClient.deleteDomain({ id: domain.id! });
+        await refetch();
+        toast.add({
+          severity: 'info',
+          summary: t('settings.domainsDns.toast.removedSummary'),
+          detail: t('settings.domainsDns.toast.removedDetail', { domain: domain.name }),
+          life: 3000,
+        });
+      } catch (e: any) {
+        console.error(e);
+        toast.add({
+          severity: 'error',
+          summary: t('settings.domainsDns.toast.failedSummary'),
+          detail: e.message || t('settings.domainsDns.toast.failedDetail'),
+          life: 5000,
+        });
+      } finally {
+        removingId.value = null;
+      }
+    },
+  });
+};
+
+const copyIframeCode = async () => {
+  try {
+    await navigator.clipboard.writeText(iframeCode.value);
+  } catch {
+    const textArea = document.createElement('textarea');
+    textArea.value = iframeCode.value;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+  }
+
+  toast.add({
+    severity: 'success',
+    summary: t('settings.domainsDns.toast.copiedSummary'),
+    detail: t('settings.domainsDns.toast.copiedDetail'),
+    life: 2000,
+  });
+};
+</script>
+
+<template>
+  <SettingsSectionCard
+    :title="t('settings.content.domains.title')"
+    :description="t('settings.content.domains.subtitle')"
+    bodyClass=""
+  >
+    <template #header-actions>
+      <DomainsDnsToolbar
+        :loading="adding"
+        :disabled="isInitialLoading || removingId !== null"
+        @create="openAddDialog"
+      />
+    </template>
+
+    <DomainsDnsNotices />
+
+    <DomainsDnsTable
+      :domains="domains"
+      :is-initial-loading="isInitialLoading"
+      :adding="adding"
+      :removing-id="removingId"
+      @remove="handleRemoveDomain"
+    />
+
+    <DomainsDnsEmbedCode :code="iframeCode" @copy="copyIframeCode" />
+
+    <DomainsDnsDialog
+      :visible="showAddDialog"
+      :domain="newDomain"
+      :adding="adding"
+      @update:visible="showAddDialog = $event"
+      @update:domain="newDomain = $event"
+      @submit="handleAddDomain"
+      @close="closeAddDialog"
+    />
+  </SettingsSectionCard>
+</template>
diff --git a/src/routes/settings/DomainsDns/components/DomainsDnsDialog.vue b/src/routes/settings/DomainsDns/components/DomainsDnsDialog.vue
new file mode 100644
index 0000000..19dbe7a
--- /dev/null
+++ b/src/routes/settings/DomainsDns/components/DomainsDnsDialog.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{
+  visible: boolean;
+  domain: string;
+  adding: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'update:domain', value: string): void;
+  (e: 'submit'): void;
+  (e: 'close'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <AppDialog
+    :visible="visible"
+    :title="t('settings.domainsDns.dialog.title')"
+    maxWidthClass="max-w-md"
+    @update:visible="emit('update:visible', $event)"
+    @close="emit('close')"
+  >
+    <div class="space-y-4">
+      <div class="grid gap-2">
+        <label for="domain" class="text-sm font-medium text-foreground">{{ t('settings.domainsDns.dialog.domainLabel') }}</label>
+        <AppInput
+          id="domain"
+          :model-value="domain"
+          :placeholder="t('settings.domainsDns.dialog.domainPlaceholder')"
+          @update:model-value="emit('update:domain', String($event ?? ''))"
+          @enter="emit('submit')"
+        />
+        <p class="text-xs text-foreground/50">{{ t('settings.domainsDns.dialog.domainHint') }}</p>
+      </div>
+
+      <SettingsNotice
+        tone="warning"
+        :title="t('settings.domainsDns.dialog.importantTitle')"
+        class="p-3"
+      >
+        <p>{{ t('settings.domainsDns.dialog.importantDetail') }}</p>
+      </SettingsNotice>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="adding" @click="emit('close')">
+          {{ t('common.cancel') }}
+        </AppButton>
+        <AppButton size="sm" :loading="adding" @click="emit('submit')">
+          <template #icon>
+            <CheckIcon class="w-4 h-4" />
+          </template>
+          {{ t('settings.domainsDns.addDomain') }}
+        </AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/DomainsDns/components/DomainsDnsEmbedCode.vue b/src/routes/settings/DomainsDns/components/DomainsDnsEmbedCode.vue
new file mode 100644
index 0000000..39dddf1
--- /dev/null
+++ b/src/routes/settings/DomainsDns/components/DomainsDnsEmbedCode.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+  code: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'copy'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <div class="px-6 py-4 bg-muted/30">
+    <div class="mb-3 flex items-center justify-between">
+      <h4 class="text-sm font-medium text-foreground">{{ t('settings.domainsDns.embedCodeTitle') }}</h4>
+      <AppButton variant="secondary" size="sm" @click="emit('copy')">
+        <template #icon>
+          <CheckIcon class="w-4 h-4" />
+        </template>
+        {{ t('settings.domainsDns.copyCode') }}
+      </AppButton>
+    </div>
+
+    <p class="mb-2 text-xs text-foreground/60">
+      {{ t('settings.domainsDns.embedCodeHint') }}
+    </p>
+
+    <pre class="overflow-x-auto rounded-md border border-border bg-header p-3 text-xs text-foreground/70"><code>{{ code }}</code></pre>
+  </div>
+</template>
diff --git a/src/routes/settings/DomainsDns/components/DomainsDnsNotices.vue b/src/routes/settings/DomainsDns/components/DomainsDnsNotices.vue
new file mode 100644
index 0000000..835fc3c
--- /dev/null
+++ b/src/routes/settings/DomainsDns/components/DomainsDnsNotices.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
+import { useTranslation } from 'i18next-vue';
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <SettingsNotice class="rounded-none border-x-0 border-t-0 p-3" contentClass="text-xs text-foreground/70">
+    {{ t('settings.domainsDns.infoBanner') }}
+  </SettingsNotice>
+</template>
diff --git a/src/routes/settings/DomainsDns/components/DomainsDnsTable.vue b/src/routes/settings/DomainsDns/components/DomainsDnsTable.vue
new file mode 100644
index 0000000..b92b419
--- /dev/null
+++ b/src/routes/settings/DomainsDns/components/DomainsDnsTable.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import LinkIcon from '@/components/icons/LinkIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import BaseTable from '@/components/ui/BaseTable.vue';
+import { formatDate } from '@/lib/utils';
+import SettingsTableSkeleton from '@/routes/settings/components/SettingsTableSkeleton.vue';
+import type { Domain } from '@/server/api/proto/app/v1/common';
+import type { ColumnDef } from '@tanstack/vue-table';
+import { useTranslation } from 'i18next-vue';
+import { computed, h } from 'vue';
+
+const props = defineProps<{
+  domains: Domain[];
+  isInitialLoading: boolean;
+  adding: boolean;
+  removingId: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'remove', domain: Domain): void;
+}>();
+
+const { t } = useTranslation();
+
+const columns = computed<ColumnDef<Domain>[]>(() => [
+  {
+    id: 'domain',
+    header: t('settings.domainsDns.table.domain'),
+    cell: ({ row, getValue }) => h('div', { class: 'flex items-center gap-2' }, [
+      h(LinkIcon, { class: 'h-4 w-4 text-foreground/40' }),
+      h('span', { class: 'text-sm font-medium text-foreground' }, row.original.name),
+    ]),
+    meta: {
+      headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
+      cellClass: 'px-6 py-3',
+    },
+  },
+  {
+    id: 'addedAt',
+    header: t('settings.domainsDns.table.addedDate'),
+    accessorFn: row => formatDate(row.createdAt),
+    cell: ({ getValue }) => h('span', { class: 'text-sm text-foreground/60' }, getValue<string>()),
+    meta: {
+      headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
+      cellClass: 'px-6 py-3',
+    },
+  },
+  {
+    id: 'actions',
+    header: t('common.actions'),
+    enableSorting: false,
+    cell: ({ row }) => h(AppButton, {
+      variant: 'ghost',
+      size: 'sm',
+      disabled: props.adding || props.removingId !== null,
+      onClick: () => emit('remove', row.original),
+    }, {
+      icon: () => h(TrashIcon, { class: 'h-4 w-4 text-danger' }),
+    }),
+    meta: { headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50 [&>div]:justify-center', cellClass: 'px-6 py-3 text-center' },
+  },
+]);
+</script>
+
+<template>
+
+  <BaseTable
+    :data="domains"
+    :columns="columns"
+    :loading="isInitialLoading"
+    :skeleton-rows="4"
+    :get-row-id="(row) => row.id!"
+    wrapperClass="mt-4 border-b border-border rounded-none border-x-0 border-t-0 bg-transparent"
+    tableClass="w-full"
+    headerRowClass="bg-muted/30"
+    bodyRowClass="border-b border-border hover:bg-muted/30"
+  >
+    <template #empty>
+      <div class="px-6 py-12 text-center">
+        <LinkIcon class="mx-auto mb-3 block h-10 w-10 text-foreground/30" />
+        <p class="mb-1 text-sm text-foreground/60">{{ t('settings.domainsDns.emptyTitle') }}</p>
+        <p class="text-xs text-foreground/40">{{ t('settings.domainsDns.emptySubtitle') }}</p>
+      </div>
+    </template>
+  </BaseTable>
+</template>
diff --git a/src/routes/settings/DomainsDns/components/DomainsDnsToolbar.vue b/src/routes/settings/DomainsDns/components/DomainsDnsToolbar.vue
new file mode 100644
index 0000000..7e73841
--- /dev/null
+++ b/src/routes/settings/DomainsDns/components/DomainsDnsToolbar.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import PlusIcon from '@/components/icons/PlusIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+  disabled: boolean;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'create'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <AppButton size="sm" :loading="loading" :disabled="disabled" @click="emit('create')">
+    <template #icon>
+      <PlusIcon class="w-4 h-4" />
+    </template>
+    {{ t('settings.domainsDns.addDomain') }}
+  </AppButton>
+</template>
diff --git a/src/routes/settings/DomainsDns/helpers.ts b/src/routes/settings/DomainsDns/helpers.ts
new file mode 100644
index 0000000..eb7b9b5
--- /dev/null
+++ b/src/routes/settings/DomainsDns/helpers.ts
@@ -0,0 +1,23 @@
+export const normalizeDomainInput = (value: string) => value
+  .trim()
+  .toLowerCase()
+  .replace(/^https?:\/\//, '')
+  .replace(/^www\./, '')
+  .replace(/\/$/, '');
+
+// export const formatDate = (value?: string) => {
+//   if (!value) return '-';
+
+//   const date = new Date(value);
+//   if (Number.isNaN(date.getTime())) {
+//     return value.split('T')[0] || value;
+//   }
+
+//   return date.toISOString().split('T')[0];
+// };
+
+// export const mapDomainItem = (item: DomainApiItem): DomainItem => ({
+//   id: item.id || `${item.name || 'domain'}:${item.created_at || ''}`,
+//   name: item.name || '',
+//   addedAt: formatDate(item.created_at),
+// });
diff --git a/src/routes/settings/NotificationSettings/NotificationSettings.vue b/src/routes/settings/NotificationSettings/NotificationSettings.vue
new file mode 100644
index 0000000..fe5bfbf
--- /dev/null
+++ b/src/routes/settings/NotificationSettings/NotificationSettings.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppSwitch from '@/components/ui/AppSwitch.vue';
+import BellIcon from '@/components/icons/BellIcon.vue';
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import MailIcon from '@/components/icons/MailIcon.vue';
+import SendIcon from '@/components/icons/SendIcon.vue';
+import TelegramIcon from '@/components/icons/TelegramIcon.vue';
+import {
+    createNotificationSettingsDraft,
+    toNotificationPreferencesPayload,
+    useSettingsPreferencesQuery,
+} from '@/composables/useSettingsPreferencesQuery';
+import { useAppToast } from '@/composables/useAppToast';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+import SettingsRowSkeleton from '@/routes/settings/components/SettingsRowSkeleton.vue';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+import { computed, ref, watch } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import Bell from '@/components/icons/Bell.vue';
+
+const toast = useAppToast();
+const { t } = useTranslation();
+
+const { data: preferencesSnapshot, error, isPending, refetch } = useSettingsPreferencesQuery();
+
+const notificationSettings = ref(createNotificationSettingsDraft());
+const saving = ref(false);
+
+const notificationTypes = computed(() => [
+    {
+        key: 'email' as const,
+        title: t('settings.notificationSettings.types.email.title'),
+        description: t('settings.notificationSettings.types.email.description'),
+        icon: MailIcon,
+        bgColor: 'bg-primary/10',
+        iconColor: 'text-primary',
+    },
+    {
+        key: 'push' as const,
+        title: t('settings.notificationSettings.types.push.title'),
+        description: t('settings.notificationSettings.types.push.description'),
+        icon: Bell,
+        bgColor: 'bg-accent/10',
+        iconColor: 'text-accent',
+    },
+    {
+        key: 'marketing' as const,
+        title: t('settings.notificationSettings.types.marketing.title'),
+        description: t('settings.notificationSettings.types.marketing.description'),
+        icon: SendIcon,
+        bgColor: 'bg-info/10',
+        iconColor: 'text-info',
+    },
+    {
+        key: 'telegram' as const,
+        title: t('settings.notificationSettings.types.telegram.title'),
+        description: t('settings.notificationSettings.types.telegram.description'),
+        icon: TelegramIcon,
+        bgColor: 'bg-info/10',
+        iconColor: 'text-info',
+    },
+]);
+
+const isInitialLoading = computed(() => isPending.value && !preferencesSnapshot.value);
+const isInteractionDisabled = computed(() => saving.value || isInitialLoading.value || !preferencesSnapshot.value);
+
+watch(preferencesSnapshot, (snapshot) => {
+    if (!snapshot) return;
+    notificationSettings.value = createNotificationSettingsDraft(snapshot);
+}, { immediate: true });
+
+watch(error, (value, previous) => {
+    if (!value || value === previous || saving.value) return;
+
+    toast.add({
+        severity: 'error',
+        summary: t('settings.notificationSettings.toast.failedSummary'),
+        detail: (value as any)?.message || t('settings.notificationSettings.toast.failedDetail'),
+        life: 5000,
+    });
+});
+
+const handleSave = async () => {
+    if (saving.value || !preferencesSnapshot.value) return;
+
+    saving.value = true;
+    try {
+        await rpcClient.updatePreferences(
+            toNotificationPreferencesPayload(notificationSettings.value),
+        );
+        await refetch();
+
+        toast.add({
+            severity: 'success',
+            summary: t('settings.notificationSettings.toast.savedSummary'),
+            detail: t('settings.notificationSettings.toast.savedDetail'),
+            life: 3000,
+        });
+    } catch (e: any) {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.notificationSettings.toast.failedSummary'),
+            detail: e.message || t('settings.notificationSettings.toast.failedDetail'),
+            life: 5000,
+        });
+    } finally {
+        saving.value = false;
+    }
+};
+</script>
+
+<template>
+    <SettingsSectionCard
+        :title="t('settings.content.notifications.title')"
+        :description="t('settings.content.notifications.subtitle')"
+    >
+        <template #header-actions>
+            <AppButton size="sm" :loading="saving" :disabled="isInitialLoading || !preferencesSnapshot" @click="handleSave">
+                <template #icon>
+                    <CheckIcon class="w-4 h-4" />
+                </template>
+                {{ t('settings.notificationSettings.saveChanges') }}
+            </AppButton>
+        </template>
+
+        <template v-if="isInitialLoading">
+            <SettingsRowSkeleton
+                v-for="type in notificationTypes"
+                :key="type.key"
+            />
+        </template>
+
+        <template v-else>
+            <SettingsRow
+                v-for="type in notificationTypes"
+                :key="type.key"
+                :title="type.title"
+                :description="type.description"
+                :iconBoxClass="type.bgColor"
+            >
+                <template #icon>
+                    <component :is="type.icon" filled :class="[type.iconColor, 'w-5 h-5']" />
+                </template>
+
+                <template #actions>
+                    <AppSwitch v-model="notificationSettings[type.key]" :disabled="isInteractionDisabled" />
+                </template>
+            </SettingsRow>
+        </template>
+    </SettingsSectionCard>
+</template>
diff --git a/src/routes/settings/PlayerConfigs/PlayerConfigs.vue b/src/routes/settings/PlayerConfigs/PlayerConfigs.vue
new file mode 100644
index 0000000..bb5fa67
--- /dev/null
+++ b/src/routes/settings/PlayerConfigs/PlayerConfigs.vue
@@ -0,0 +1,402 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import { useAppConfirm } from '@/composables/useAppConfirm';
+import { useAppToast } from '@/composables/useAppToast';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+import { useAuthStore } from '@/stores/auth';
+import { useQuery } from '@pinia/colada';
+import { computed, ref, watch } from 'vue';
+import { useTranslation } from 'i18next-vue';
+import PlayerConfigDialog from './components/PlayerConfigDialog.vue';
+import PlayerConfigsNotices from './components/PlayerConfigsNotices.vue';
+import PlayerConfigsTable from './components/PlayerConfigsTable.vue';
+import PlayerConfigsToolbar from './components/PlayerConfigsToolbar.vue';
+import type { PlayerConfig, PlayerConfigApiItem, PlayerConfigFormData } from './types';
+
+const toast = useAppToast();
+const confirm = useAppConfirm();
+const auth = useAuthStore();
+const { t } = useTranslation();
+
+const createInitialFormData = (): PlayerConfigFormData => ({
+    name: '',
+    description: '',
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: true,
+    pip: true,
+    airplay: true,
+    chromecast: true,
+    encrytionM3u8: true,
+    logoUrl: '',
+    isDefault: false,
+});
+
+const showAddDialog = ref(false);
+const editingConfig = ref<PlayerConfig | null>(null);
+const saving = ref(false);
+const deletingId = ref<string | null>(null);
+const togglingId = ref<string | null>(null);
+const defaultingId = ref<string | null>(null);
+const formData = ref<PlayerConfigFormData>(createInitialFormData());
+
+const FREE_PLAN_LIMIT_MESSAGE = 'Free plan supports only 1 player config';
+const FREE_PLAN_RECONCILIATION_MESSAGE = 'Delete extra player configs to continue managing player configs on the free plan';
+
+const isFreePlan = computed(() => !auth.user?.plan_id);
+const isMutating = computed(() => saving.value || deletingId.value !== null || togglingId.value !== null || defaultingId.value !== null);
+
+const mapConfig = (item: PlayerConfigApiItem): PlayerConfig => ({
+    id: item.id || `${item.name || 'config'}:${item.createdAt || ''}`,
+    name: item.name || '',
+    description: item.description || undefined,
+    autoplay: Boolean(item.autoplay),
+    loop: Boolean(item.loop),
+    muted: Boolean(item.muted),
+    showControls: item.showControls !== false,
+    pip: item.pip !== false,
+    airplay: item.airplay !== false,
+    chromecast: item.chromecast !== false,
+    encrytionM3u8: item.encrytionM3u8 !== false,
+    logoUrl: item.logoUrl || undefined,
+    isActive: item.isActive !== false,
+    isDefault: Boolean(item.isDefault),
+    createdAt: item.createdAt || '',
+});
+
+const { data: configsSnapshot, error, isPending, refetch } = useQuery({
+    key: () => ['settings', 'player-configs'],
+    query: async () => {
+        const response = await rpcClient.listPlayerConfigs();
+        return (response.configs || []).map(mapConfig);
+    },
+});
+
+const configs = computed(() => configsSnapshot.value || []);
+const isInitialLoading = computed(() => isPending.value && !configsSnapshot.value);
+const configCount = computed(() => configs.value.length);
+const hasExactlyOneConfig = computed(() => configCount.value === 1);
+const isFreeReconciliationMode = computed(() => isFreePlan.value && configCount.value > 1);
+const canCreateConfig = computed(() => !isInitialLoading.value && !isMutating.value && (!isFreePlan.value || configCount.value === 0));
+const canManageExistingConfig = computed(() => !isMutating.value && (!isFreePlan.value || hasExactlyOneConfig.value));
+const canDeleteConfig = computed(() => !isMutating.value);
+const canEditDialog = computed(() => !saving.value && (!isFreePlan.value || hasExactlyOneConfig.value));
+const canSubmitDialog = computed(() => editingConfig.value ? canManageExistingConfig.value : canCreateConfig.value);
+
+// const refetchConfigs = () => refetch((fetchError) => {
+//     throw fetchError;
+// });
+
+const getErrorMessage = (value: any, fallback: string) => value?.error?.message || value?.message || value?.data?.message || fallback;
+
+const showQuotaToast = (key: 'limit' | 'reconciliation') => {
+    toast.add({
+        severity: 'warn',
+        summary: t(`settings.playerConfigs.toast.${key}Summary`),
+        detail: t(`settings.playerConfigs.toast.${key}Detail`),
+        life: 4000,
+    });
+};
+
+const showActionErrorToast = (value: any) => {
+    const message = getErrorMessage(value, t('settings.playerConfigs.toast.failedDetail'));
+    if (message === FREE_PLAN_LIMIT_MESSAGE) {
+        showQuotaToast('limit');
+        return;
+    }
+    if (message === FREE_PLAN_RECONCILIATION_MESSAGE) {
+        showQuotaToast('reconciliation');
+        return;
+    }
+    toast.add({
+        severity: 'error',
+        summary: t('settings.playerConfigs.toast.failedSummary'),
+        detail: message,
+        life: 5000,
+    });
+};
+
+const ensureCanCreateConfig = () => {
+    if (canCreateConfig.value) return true;
+    if (isFreePlan.value && configCount.value >= 1) {
+        showQuotaToast('limit');
+    }
+    return false;
+};
+
+const ensureCanManageExistingConfig = () => {
+    if (canManageExistingConfig.value) return true;
+    if (isFreeReconciliationMode.value) {
+        showQuotaToast('reconciliation');
+    }
+    return false;
+};
+
+watch(error, (value, previous) => {
+    if (!value || value === previous || isMutating.value) return;
+    showActionErrorToast(value);
+});
+
+const resetForm = () => {
+    formData.value = createInitialFormData();
+    editingConfig.value = null;
+};
+
+const closeDialog = () => {
+    showAddDialog.value = false;
+    resetForm();
+};
+
+const openAddDialog = () => {
+    if (!ensureCanCreateConfig()) return;
+    resetForm();
+    showAddDialog.value = true;
+};
+
+const applyConfigToForm = (config: PlayerConfig) => {
+    formData.value = {
+        name: config.name,
+        description: config.description || '',
+        autoplay: config.autoplay,
+        loop: config.loop,
+        muted: config.muted,
+        showControls: config.showControls,
+        pip: config.pip,
+        airplay: config.airplay,
+        chromecast: config.chromecast,
+        encrytionM3u8: config.encrytionM3u8,
+        logoUrl: config.logoUrl || '',
+        isDefault: config.isDefault,
+    };
+};
+
+const openEditDialog = (config: PlayerConfig) => {
+    if (!ensureCanManageExistingConfig()) return;
+    applyConfigToForm(config);
+    editingConfig.value = config;
+    showAddDialog.value = true;
+};
+
+const buildRequestBody = (enabled = true) => ({
+    name: formData.value.name.trim(),
+    description: formData.value.description.trim() || undefined,
+    autoplay: formData.value.autoplay,
+    loop: formData.value.loop,
+    muted: formData.value.muted,
+    showControls: formData.value.showControls,
+    pip: formData.value.pip,
+    airplay: formData.value.airplay,
+    chromecast: formData.value.chromecast,
+    encrytionM3u8: formData.value.encrytionM3u8,
+    logoUrl: formData.value.logoUrl.trim() || undefined,
+    isActive: enabled,
+    isDefault: enabled ? formData.value.isDefault : false,
+});
+
+const handleSave = async () => {
+    if (saving.value) return;
+    if (editingConfig.value) {
+        if (!ensureCanManageExistingConfig()) return;
+    } else if (!ensureCanCreateConfig()) {
+        return;
+    }
+
+    if (!formData.value.name.trim()) {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.playerConfigs.toast.nameRequiredSummary'),
+            detail: t('settings.playerConfigs.toast.nameRequiredDetail'),
+            life: 3000,
+        });
+        return;
+    }
+
+    saving.value = true;
+    try {
+        if (editingConfig.value) {
+            await rpcClient.updatePlayerConfig({
+                id: editingConfig.value.id,
+                ...buildRequestBody(editingConfig.value.isActive),
+            });
+            toast.add({
+                severity: 'success',
+                summary: t('settings.playerConfigs.toast.updatedSummary'),
+                detail: t('settings.playerConfigs.toast.updatedDetail'),
+                life: 3000,
+            });
+        } else {
+            await rpcClient.createPlayerConfig(buildRequestBody(true));
+            toast.add({
+                severity: 'success',
+                summary: t('settings.playerConfigs.toast.createdSummary'),
+                detail: t('settings.playerConfigs.toast.createdDetail'),
+                life: 3000,
+            });
+        }
+
+        await refetch();
+        closeDialog();
+    } catch (value: any) {
+        console.error(value);
+        showActionErrorToast(value);
+    } finally {
+        saving.value = false;
+    }
+};
+
+const handleToggle = async (config: PlayerConfig, nextValue: boolean) => {
+    if (!ensureCanManageExistingConfig()) return;
+
+    togglingId.value = config.id;
+    try {
+        await rpcClient.updatePlayerConfig({
+            id: config.id,
+            name: config.name,
+            description: config.description,
+            autoplay: config.autoplay,
+            loop: config.loop,
+            muted: config.muted,
+            showControls: config.showControls,
+            pip: config.pip,
+            airplay: config.airplay,
+            chromecast: config.chromecast,
+            encrytionM3u8: config.encrytionM3u8,
+            logoUrl: config.logoUrl,
+            isActive: nextValue,
+            isDefault: nextValue ? config.isDefault : false,
+        });
+
+        await refetch();
+        toast.add({
+            severity: 'info',
+            summary: nextValue
+                ? t('settings.playerConfigs.toast.enabledSummary')
+                : t('settings.playerConfigs.toast.disabledSummary'),
+            detail: t('settings.playerConfigs.toast.toggleDetail', {
+                name: config.name,
+                state: nextValue
+                    ? t('settings.playerConfigs.state.enabled')
+                    : t('settings.playerConfigs.state.disabled'),
+            }),
+            life: 2000,
+        });
+    } catch (value: any) {
+        console.error(value);
+        showActionErrorToast(value);
+    } finally {
+        togglingId.value = null;
+    }
+};
+
+const handleSetDefault = async (config: PlayerConfig) => {
+    if (config.isDefault || !config.isActive || !ensureCanManageExistingConfig()) return;
+
+    defaultingId.value = config.id;
+    try {
+        await rpcClient.updatePlayerConfig({
+            id: config.id,
+            name: config.name,
+            description: config.description,
+            autoplay: config.autoplay,
+            loop: config.loop,
+            muted: config.muted,
+            showControls: config.showControls,
+            pip: config.pip,
+            airplay: config.airplay,
+            chromecast: config.chromecast,
+            encrytionM3u8: config.encrytionM3u8,
+            logoUrl: config.logoUrl,
+            isActive: config.isActive,
+            isDefault: true,
+        });
+
+        await refetch();
+        toast.add({
+            severity: 'success',
+            summary: t('settings.playerConfigs.toast.defaultUpdatedSummary'),
+            detail: t('settings.playerConfigs.toast.defaultUpdatedDetail', { name: config.name }),
+            life: 3000,
+        });
+    } catch (value: any) {
+        console.error(value);
+        showActionErrorToast(value);
+    } finally {
+        defaultingId.value = null;
+    }
+};
+
+const handleDelete = (config: PlayerConfig) => {
+    if (!canDeleteConfig.value) return;
+
+    confirm.require({
+        message: t('settings.playerConfigs.confirm.deleteMessage', { name: config.name }),
+        header: t('settings.playerConfigs.confirm.deleteHeader'),
+        acceptLabel: t('settings.playerConfigs.confirm.deleteAccept'),
+        rejectLabel: t('settings.playerConfigs.confirm.deleteReject'),
+        accept: async () => {
+            deletingId.value = config.id;
+            try {
+                await rpcClient.deletePlayerConfig({ id: config.id });
+                await refetch();
+                toast.add({
+                    severity: 'info',
+                    summary: t('settings.playerConfigs.toast.deletedSummary'),
+                    detail: t('settings.playerConfigs.toast.deletedDetail'),
+                    life: 3000,
+                });
+            } catch (value: any) {
+                console.error(value);
+                showActionErrorToast(value);
+            } finally {
+                deletingId.value = null;
+            }
+        },
+    });
+};
+</script>
+
+<template>
+    <SettingsSectionCard
+        :title="t('settings.content.playerConfigs.title')"
+        :description="t('settings.content.playerConfigs.subtitle')"
+        bodyClass=""
+    >
+        <template #header-actions>
+            <PlayerConfigsToolbar :can-create-config="canCreateConfig" @create="openAddDialog" />
+        </template>
+
+        <PlayerConfigsNotices
+            :is-free-plan="isFreePlan"
+            :is-free-reconciliation-mode="isFreeReconciliationMode"
+        />
+
+        <PlayerConfigsTable
+            :configs="configs"
+            :is-initial-loading="isInitialLoading"
+            :can-manage-existing-config="canManageExistingConfig"
+            :can-delete-config="canDeleteConfig"
+            :saving="saving"
+            :deleting-id="deletingId"
+            :toggling-id="togglingId"
+            :defaulting-id="defaultingId"
+            @edit="openEditDialog"
+            @delete="handleDelete"
+            @toggle-active="handleToggle($event.config, $event.value)"
+            @set-default="handleSetDefault"
+        />
+
+        <PlayerConfigDialog
+            :visible="showAddDialog"
+            :editing-config="editingConfig"
+            :form-data="formData"
+            :saving="saving"
+            :can-edit-dialog="canEditDialog"
+            :can-submit="canSubmitDialog"
+            @update:visible="showAddDialog = $event"
+            @update:form-data="formData = $event"
+            @save="handleSave"
+            @close="closeDialog"
+        />
+    </SettingsSectionCard>
+</template>
diff --git a/src/routes/settings/PlayerConfigs/components/PlayerConfigDialog.vue b/src/routes/settings/PlayerConfigs/components/PlayerConfigDialog.vue
new file mode 100644
index 0000000..f3516d4
--- /dev/null
+++ b/src/routes/settings/PlayerConfigs/components/PlayerConfigDialog.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+import type { PlayerConfigFormData } from '../types';
+
+type FormBooleanKey =
+    | 'autoplay'
+    | 'loop'
+    | 'muted'
+    | 'showControls'
+    | 'pip'
+    | 'airplay'
+    | 'chromecast'
+    | 'encrytionM3u8'
+    | 'isDefault';
+
+const props = defineProps<{
+    visible: boolean;
+    editingConfig: { isActive: boolean } | null;
+    formData: PlayerConfigFormData;
+    saving: boolean;
+    canEditDialog: boolean;
+    canSubmit: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+    (e: 'update:formData', value: PlayerConfigFormData): void;
+    (e: 'save'): void;
+    (e: 'close'): void;
+}>();
+
+const { t } = useTranslation();
+
+const title = computed(() => props.editingConfig
+    ? t('settings.playerConfigs.dialog.editTitle')
+    : t('settings.playerConfigs.dialog.createTitle'));
+
+const canToggleDefault = computed(() => props.canEditDialog && (!props.editingConfig || props.editingConfig.isActive));
+
+const defaultHint = computed(() => props.editingConfig && !props.editingConfig.isActive
+    ? t('settings.playerConfigs.dialog.defaultDisabledHint')
+    : t('settings.playerConfigs.dialog.defaultHint'));
+
+const updateTextField = (key: 'name' | 'description' | 'logoUrl', value: string | number | null) => {
+    emit('update:formData', {
+        ...props.formData,
+        [key]: typeof value === 'string' ? value : value == null ? '' : String(value),
+    });
+};
+
+const updateCheckboxField = (key: FormBooleanKey, event: Event) => {
+    emit('update:formData', {
+        ...props.formData,
+        [key]: (event.target as HTMLInputElement).checked,
+    });
+};
+
+const optionCardClass = (disabled: boolean) => [
+    'flex items-start gap-3 rounded-md border border-border p-3 transition-colors',
+    disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:border-primary/50',
+];
+</script>
+
+<template>
+    <AppDialog
+        :visible="visible"
+        :title="title"
+        maxWidthClass="max-w-2xl"
+        @update:visible="emit('update:visible', $event)"
+        @close="emit('close')"
+    >
+        <div class="space-y-4">
+            <div class="grid gap-2">
+                <label for="name" class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.dialog.name') }}</label>
+                <AppInput
+                    id="name"
+                    :model-value="formData.name"
+                    :disabled="!canEditDialog"
+                    :placeholder="t('settings.playerConfigs.dialog.namePlaceholder')"
+                    @update:model-value="updateTextField('name', $event)"
+                />
+            </div>
+
+            <div class="grid gap-2">
+                <label for="description" class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.dialog.description') }}</label>
+                <AppInput
+                    id="description"
+                    :model-value="formData.description"
+                    :disabled="!canEditDialog"
+                    :placeholder="t('settings.playerConfigs.dialog.descriptionPlaceholder')"
+                    @update:model-value="updateTextField('description', $event)"
+                />
+            </div>
+
+            <div class="grid gap-3">
+                <label class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.dialog.playbackOptions') }}</label>
+
+                <div class="grid grid-cols-2 gap-3">
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.autoplay"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('autoplay', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.autoplay.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.autoplay.description') }}</p>
+                        </div>
+                    </label>
+
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.loop"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('loop', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.loop.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.loop.description') }}</p>
+                        </div>
+                    </label>
+
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.muted"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('muted', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.muted.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.muted.description') }}</p>
+                        </div>
+                    </label>
+
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.showControls"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('showControls', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.showControls.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.showControls.description') }}</p>
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+            <div class="grid gap-3">
+                <label class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.dialog.castingOptions') }}</label>
+
+                <div class="grid grid-cols-3 gap-3">
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.pip"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('pip', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.pip.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.pip.description') }}</p>
+                        </div>
+                    </label>
+
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.airplay"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('airplay', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.airplay.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.airplay.description') }}</p>
+                        </div>
+                    </label>
+
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.chromecast"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('chromecast', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.chromecast.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.chromecast.description') }}</p>
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+            <div class="grid gap-3">
+                <label class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.dialog.advancedOptions') }}</label>
+
+                <div class="grid grid-cols-1 gap-3">
+                    <label :class="optionCardClass(!canEditDialog)">
+                        <input
+                            :checked="formData.encrytionM3u8"
+                            type="checkbox"
+                            class="mt-1 h-4 w-4 rounded border-border"
+                            :disabled="!canEditDialog"
+                            @change="updateCheckboxField('encrytionM3u8', $event)"
+                        />
+                        <div>
+                            <p class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.items.encrytionM3u8.title') }}</p>
+                            <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.items.encrytionM3u8.description') }}</p>
+                        </div>
+                    </label>
+
+                    <div class="grid gap-2 rounded-md border border-border p-3">
+                        <label for="logoUrl" class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.dialog.logoUrl') }}</label>
+                        <AppInput
+                            id="logoUrl"
+                            :model-value="formData.logoUrl"
+                            :disabled="!canEditDialog"
+                            :placeholder="t('settings.playerConfigs.dialog.logoUrlPlaceholder')"
+                            @update:model-value="updateTextField('logoUrl', $event)"
+                        />
+                        <p class="text-xs text-foreground/60">{{ t('settings.playerConfigs.dialog.logoUrlHint') }}</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid gap-2">
+                <label class="text-sm font-medium text-foreground">{{ t('settings.playerConfigs.dialog.defaultLabel') }}</label>
+                <label
+                    :class="[
+                        'flex items-start gap-3 rounded-md border border-border p-3',
+                        canToggleDefault && !saving ? 'cursor-pointer hover:border-primary/50' : 'opacity-60 cursor-not-allowed',
+                    ]"
+                >
+                    <input
+                        :checked="formData.isDefault"
+                        type="checkbox"
+                        class="mt-1 h-4 w-4 rounded border-border"
+                        :disabled="!canToggleDefault || saving"
+                        @change="updateCheckboxField('isDefault', $event)"
+                    />
+                    <div>
+                        <p class="text-sm text-foreground">{{ t('settings.playerConfigs.dialog.defaultCheckbox') }}</p>
+                        <p class="mt-0.5 text-xs text-foreground/60">{{ defaultHint }}</p>
+                    </div>
+                </label>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <AppButton variant="secondary" size="sm" :disabled="saving" @click="emit('close')">
+                    {{ t('common.cancel') }}
+                </AppButton>
+                <AppButton size="sm" :loading="saving" :disabled="!canSubmit" @click="emit('save')">
+                    <template #icon>
+                        <CheckIcon class="h-4 w-4" />
+                    </template>
+                    {{ editingConfig ? t('settings.playerConfigs.dialog.update') : t('settings.playerConfigs.dialog.create') }}
+                </AppButton>
+            </div>
+        </template>
+    </AppDialog>
+</template>
diff --git a/src/routes/settings/PlayerConfigs/components/PlayerConfigSettingsBadges.vue b/src/routes/settings/PlayerConfigs/components/PlayerConfigSettingsBadges.vue
new file mode 100644
index 0000000..84c6457
--- /dev/null
+++ b/src/routes/settings/PlayerConfigs/components/PlayerConfigSettingsBadges.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PlayerConfig } from '../types';
+import { computed } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{
+    config: PlayerConfig;
+}>();
+
+const { t } = useTranslation();
+
+const badges = computed(() => {
+    const values: Array<{ label: string; color: string }> = [];
+
+    if (props.config.autoplay) values.push({ label: t('settings.playerConfigs.badges.autoplay'), color: 'bg-blue-500/10 text-blue-500' });
+    if (props.config.loop) values.push({ label: t('settings.playerConfigs.badges.loop'), color: 'bg-green-500/10 text-green-500' });
+    if (props.config.muted) values.push({ label: t('settings.playerConfigs.badges.muted'), color: 'bg-yellow-500/10 text-yellow-500' });
+    if (props.config.showControls) values.push({ label: t('settings.playerConfigs.badges.controls'), color: 'bg-purple-500/10 text-purple-500' });
+    if (props.config.pip) values.push({ label: t('settings.playerConfigs.badges.pip'), color: 'bg-pink-500/10 text-pink-500' });
+    if (props.config.airplay) values.push({ label: t('settings.playerConfigs.badges.airplay'), color: 'bg-indigo-500/10 text-indigo-500' });
+    if (props.config.chromecast) values.push({ label: t('settings.playerConfigs.badges.chromecast'), color: 'bg-red-500/10 text-red-500' });
+    if (props.config.encrytionM3u8) values.push({ label: t('settings.playerConfigs.badges.encrytionM3u8'), color: 'bg-amber-500/10 text-amber-500' });
+    if (props.config.logoUrl) values.push({ label: t('settings.playerConfigs.badges.logo'), color: 'bg-sky-500/10 text-sky-500' });
+
+    return values;
+});
+</script>
+
+<template>
+    <div class="flex max-w-[280px] flex-wrap gap-1">
+        <span
+            v-for="badge in badges.slice(0, 4)"
+            :key="badge.label"
+            :class="['rounded px-1.5 py-0.5 text-xs font-medium', badge.color]"
+        >
+            {{ badge.label }}
+        </span>
+        <span v-if="badges.length > 4" class="text-xs text-foreground/50">+{{ badges.length - 4 }}</span>
+    </div>
+</template>
diff --git a/src/routes/settings/PlayerConfigs/components/PlayerConfigsNotices.vue b/src/routes/settings/PlayerConfigs/components/PlayerConfigsNotices.vue
new file mode 100644
index 0000000..0b59a31
--- /dev/null
+++ b/src/routes/settings/PlayerConfigs/components/PlayerConfigsNotices.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    isFreePlan: boolean;
+    isFreeReconciliationMode: boolean;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <SettingsNotice class="rounded-none border-x-0 border-t-0 p-3" contentClass="text-xs text-foreground/70">
+        {{ t('settings.playerConfigs.infoBanner') }}
+    </SettingsNotice>
+
+    <SettingsNotice
+        v-if="isFreePlan"
+        tone="warning"
+        :title="t(isFreeReconciliationMode ? 'settings.playerConfigs.reconciliationTitle' : 'settings.playerConfigs.freePlanTitle')"
+        class="rounded-none border-x-0 border-t-0 p-3"
+        contentClass="text-xs text-foreground/70"
+    >
+        {{ t(isFreeReconciliationMode ? 'settings.playerConfigs.reconciliationMessage' : 'settings.playerConfigs.freePlanMessage') }}
+    </SettingsNotice>
+</template>
diff --git a/src/routes/settings/PlayerConfigs/components/PlayerConfigsTable.vue b/src/routes/settings/PlayerConfigs/components/PlayerConfigsTable.vue
new file mode 100644
index 0000000..75a04a9
--- /dev/null
+++ b/src/routes/settings/PlayerConfigs/components/PlayerConfigsTable.vue
@@ -0,0 +1,189 @@
+<script setup lang="tsx">
+import LinkIcon from '@/components/icons/LinkIcon.vue';
+import PencilIcon from '@/components/icons/PencilIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppSwitch from '@/components/ui/AppSwitch.vue';
+import BaseTable from '@/components/ui/BaseTable.vue';
+import SettingsTableSkeleton from '@/routes/settings/components/SettingsTableSkeleton.vue';
+import type { ColumnDef } from '@tanstack/vue-table';
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+import type { PlayerConfig } from '../types';
+import PlayerConfigSettingsBadges from './PlayerConfigSettingsBadges.vue';
+
+const props = defineProps<{
+    configs: PlayerConfig[];
+    isInitialLoading: boolean;
+    canManageExistingConfig: boolean;
+    canDeleteConfig: boolean;
+    saving: boolean;
+    deletingId: string | null;
+    togglingId: string | null;
+    defaultingId: string | null;
+}>();
+
+const emit = defineEmits<{
+    (e: 'edit', config: PlayerConfig): void;
+    (e: 'delete', config: PlayerConfig): void;
+    (e: 'toggle-active', payload: { config: PlayerConfig; value: boolean }): void;
+    (e: 'set-default', config: PlayerConfig): void;
+}>();
+
+const { t } = useTranslation();
+
+const columns = computed<ColumnDef<PlayerConfig>[]>(() => [
+    {
+        id: 'config',
+        header: t('settings.playerConfigs.table.name'),
+        accessorFn: row => row.name,
+        cell: ({ row }) => (
+          <div>
+            <div class="flex flex-wrap items-center gap-2">
+              <span
+                class="text-sm font-medium text-foreground cursor-pointer hover:underline"
+                onClick={() => emit('edit', row.original)}
+              >
+                {row.original.name}
+              </span>
+              {row.original.isDefault && (
+                <span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                  {t('settings.playerConfigs.defaultBadge')}
+                </span>
+              )}
+            </div>
+            {row.original.description ? (
+              <p class="mt-0.5 text-xs text-foreground/50">{row.original.description}</p>
+            ) : (
+              <p class="mt-0.5 text-xs text-foreground/40">
+                {t('settings.playerConfigs.createdOn', { date: row.original.createdAt || '-' })}
+              </p>
+            )}
+          </div>
+        ),
+        meta: {
+            headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
+            cellClass: 'px-6 py-3',
+        },
+    },
+    {
+        id: 'settings',
+        header: t('settings.playerConfigs.table.settings'),
+        accessorFn: row => [
+            row.autoplay ? 'autoplay' : '',
+            row.loop ? 'loop' : '',
+            row.muted ? 'muted' : '',
+            row.showControls ? 'controls' : '',
+            row.pip ? 'pip' : '',
+            row.airplay ? 'airplay' : '',
+            row.chromecast ? 'chromecast' : '',
+            row.encrytionM3u8 ? 'encrytionM3u8' : '',
+            row.logoUrl ? 'logo' : '',
+        ].filter(Boolean).join(', '),
+        cell: ({ row }) => <PlayerConfigSettingsBadges config={row.original} />,
+        meta: {
+            headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50',
+            cellClass: 'px-6 py-3',
+        },
+    },
+    {
+        id: 'status',
+        header: t('common.status'),
+        accessorFn: row => Number(row.isActive),
+        cell: ({ row }) => (
+            <div class="text-center">
+            <AppSwitch
+              modelValue={row.original.isActive}
+              disabled={
+                !props.canManageExistingConfig ||
+                props.saving ||
+                props.deletingId !== null ||
+                props.defaultingId !== null ||
+                props.togglingId === row.original.id
+              }
+              onUpdate:modelValue={(value: boolean) =>
+                emit('toggle-active', { config: row.original, value })
+              }
+            />
+          </div>
+        ),
+        meta: {
+            headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50',
+            cellClass: 'px-6 py-3 text-center',
+        },
+    },
+    {
+        id: 'actions',
+        header: t('common.actions'),
+        enableSorting: false,
+        cell: ({ row }) => (<div class="flex flex-wrap items-center justify-end gap-2">
+            {row.original.isDefault ? (
+              <span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
+                {t('settings.playerConfigs.actions.default')}
+              </span>
+            ) : (
+              <AppButton
+                variant="ghost"
+                size="sm"
+                loading={props.defaultingId === row.original.id}
+                disabled={
+                  !props.canManageExistingConfig ||
+                  props.saving ||
+                  props.deletingId !== null ||
+                  props.togglingId !== null ||
+                  props.defaultingId !== null ||
+                  !row.original.isActive
+                }
+                onClick={() => emit('set-default', row.original)}
+              >
+                {t('settings.playerConfigs.actions.setDefault')}
+              </AppButton>
+            )}
+            <AppButton
+              variant="ghost"
+              size="sm"
+              disabled={!props.canManageExistingConfig}
+              onClick={() => emit('edit', row.original)}
+              v-slots={{
+                icon: () => <PencilIcon class="h-4 w-4" />,
+              }}
+            />
+            <AppButton
+              variant="ghost"
+              size="sm"
+              disabled={!props.canDeleteConfig}
+              onClick={() => emit('delete', row.original)}
+              v-slots={{
+                icon: () => <TrashIcon class="h-4 w-4 text-danger" />,
+              }}
+            />
+          </div>),
+        meta: {
+            headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50 [&>div]:justify-center',
+            cellClass: 'px-6 py-3 text-right',
+        },
+    },
+]);
+</script>
+
+<template>
+    <BaseTable
+        :loading="isInitialLoading"
+        :skeleton-rows="4"
+        :data="configs"
+        :columns="columns"
+        :get-row-id="(row) => row.id"
+        wrapperClass="mt-4 border-b border-border rounded-none border-x-0 border-t-0 bg-transparent"
+        tableClass="w-full"
+        headerRowClass="bg-muted/30"
+        bodyRowClass="border-b border-border hover:bg-muted/30"
+    >
+        <template #empty>
+            <div class="px-6 py-12 text-center">
+                <LinkIcon class="mx-auto mb-3 block h-10 w-10 text-foreground/30" />
+                <p class="mb-1 text-sm text-foreground/60">{{ t('settings.playerConfigs.emptyTitle') }}</p>
+                <p class="text-xs text-foreground/40">{{ t('settings.playerConfigs.emptySubtitle') }}</p>
+            </div>
+        </template>
+    </BaseTable>
+</template>
diff --git a/src/routes/settings/PlayerConfigs/components/PlayerConfigsToolbar.vue b/src/routes/settings/PlayerConfigs/components/PlayerConfigsToolbar.vue
new file mode 100644
index 0000000..cad68c8
--- /dev/null
+++ b/src/routes/settings/PlayerConfigs/components/PlayerConfigsToolbar.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import PlusIcon from '@/components/icons/PlusIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    canCreateConfig: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'create'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <AppButton size="sm" :disabled="!canCreateConfig" @click="emit('create')">
+        <template #icon>
+            <PlusIcon class="h-4 w-4" />
+        </template>
+        {{ t('settings.playerConfigs.createConfig') }}
+    </AppButton>
+</template>
diff --git a/src/routes/settings/PlayerConfigs/types.ts b/src/routes/settings/PlayerConfigs/types.ts
new file mode 100644
index 0000000..b3f1290
--- /dev/null
+++ b/src/routes/settings/PlayerConfigs/types.ts
@@ -0,0 +1,50 @@
+export interface PlayerConfig {
+    id: string;
+    name: string;
+    description?: string;
+    autoplay: boolean;
+    loop: boolean;
+    muted: boolean;
+    showControls: boolean;
+    pip: boolean;
+    airplay: boolean;
+    chromecast: boolean;
+    encrytionM3u8: boolean;
+    logoUrl?: string;
+    isActive: boolean;
+    isDefault: boolean;
+    createdAt: string;
+}
+
+export type PlayerConfigApiItem = {
+    id?: string;
+    name?: string;
+    description?: string | null;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    showControls?: boolean | null;
+    pip?: boolean | null;
+    airplay?: boolean | null;
+    chromecast?: boolean | null;
+    encrytionM3u8?: boolean | null;
+    logoUrl?: string | null;
+    isActive?: boolean | null;
+    isDefault?: boolean;
+    createdAt?: string;
+};
+
+export interface PlayerConfigFormData {
+    name: string;
+    description: string;
+    autoplay: boolean;
+    loop: boolean;
+    muted: boolean;
+    showControls: boolean;
+    pip: boolean;
+    airplay: boolean;
+    chromecast: boolean;
+    encrytionM3u8: boolean;
+    logoUrl: string;
+    isDefault: boolean;
+}
diff --git a/src/routes/settings/PlayerSettings/PlayerSettings.vue b/src/routes/settings/PlayerSettings/PlayerSettings.vue
new file mode 100644
index 0000000..151e173
--- /dev/null
+++ b/src/routes/settings/PlayerSettings/PlayerSettings.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+onMounted(() => {
+  router.replace({ name: 'settings-player-configs' });
+});
+</script>
+
+<template>
+  <div class="p-4 text-sm text-foreground/60">Redirecting...</div>
+</template>
diff --git a/src/routes/settings/PopupAds/PopupAds.vue b/src/routes/settings/PopupAds/PopupAds.vue
new file mode 100644
index 0000000..11e8d5e
--- /dev/null
+++ b/src/routes/settings/PopupAds/PopupAds.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import { useAppConfirm } from '@/composables/useAppConfirm';
+import { useAppToast } from '@/composables/useAppToast';
+import SettingsSectionCard from '../components/SettingsSectionCard.vue';
+import PopupAdsDialog from './components/PopupAdsDialog.vue';
+import PopupAdsTable from './components/PopupAdsTable';
+import PopupAdsToolbar from './components/PopupAdsToolbar.vue';
+import type { PopupAdFormData, PopupAdItem } from './types';
+import { useQuery } from '@pinia/colada';
+import { computed, watch, ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const toast = useAppToast();
+const confirm = useAppConfirm();
+const { t } = useTranslation();
+
+const showDialog = ref(false);
+const saving = ref(false);
+const deletingId = ref<string | null>(null);
+const togglingId = ref<string | null>(null);
+const editingItem = ref<PopupAdItem | null>(null);
+
+const createInitialFormData = (): PopupAdFormData => ({
+  type: 'url',
+  label: '',
+  value: '',
+  isActive: true,
+  maxTriggersPerSession: 3,
+});
+
+const formData = ref<PopupAdFormData>(createInitialFormData());
+
+const pageSizeOptions = [5, 10, 20, 50] as const;
+const page = ref(1);
+const limit = ref(10);
+
+const { data: popupSnapshot, error, isPending, refetch } = useQuery({
+  key: () => ['settings', 'popup-ads', page.value, limit.value],
+  query: async () => {
+    return await rpcClient.listPopupAds({ page: page.value, limit: limit.value });
+  },
+});
+
+const items = computed<PopupAdItem[]>(() => popupSnapshot.value?.items || []);
+const total = computed(() => popupSnapshot.value?.total || 0);
+const totalPages = computed(() => Math.max(1, Math.ceil((total.value || 0) / limit.value)));
+const hasPrev = computed(() => page.value > 1);
+const hasNext = computed(() => page.value < totalPages.value);
+const isMutating = computed(() => saving.value || deletingId.value !== null || togglingId.value !== null);
+const isInitialLoading = computed(() => isPending.value && !popupSnapshot.value);
+
+const getErrorMessage = (value: any, fallback: string) => value?.error?.message || value?.message || value?.data?.message || fallback;
+const showActionErrorToast = (value: any) => {
+  toast.add({ severity: 'error', summary: t('settings.popupAds.toast.failedSummary'), detail: getErrorMessage(value, t('settings.popupAds.toast.failedDetail')), life: 5000 });
+};
+
+watch(error, (value, previous) => {
+  if (!value || value === previous || isMutating.value) return;
+  showActionErrorToast(value);
+});
+
+const resetForm = () => {
+  formData.value = createInitialFormData();
+  editingItem.value = null;
+};
+
+const closeDialog = () => {
+  showDialog.value = false;
+  resetForm();
+};
+
+const openCreateDialog = () => {
+  resetForm();
+  showDialog.value = true;
+};
+
+const openEditDialog = (item: PopupAdItem) => {
+  editingItem.value = item;
+  formData.value = {
+    type: (item.type as 'url' | 'script') || 'url',
+    label: item.label || '',
+    value: item.value || '',
+    isActive: Boolean(item.isActive),
+    maxTriggersPerSession: Number(item.maxTriggersPerSession || 3),
+  };
+  showDialog.value = true;
+};
+
+const handleSave = async () => {
+  if (saving.value) return;
+
+  const label = formData.value.label.trim();
+  const value = formData.value.value.trim();
+
+  if (!label) {
+    toast.add({ severity: 'error', summary: t('settings.popupAds.toast.labelRequiredSummary'), detail: t('settings.popupAds.toast.labelRequiredDetail'), life: 3000 });
+    return;
+  }
+  if (!value) {
+    toast.add({ severity: 'error', summary: t('settings.popupAds.toast.valueRequiredSummary'), detail: t('settings.popupAds.toast.valueRequiredDetail'), life: 3000 });
+    return;
+  }
+  if (formData.value.type === 'url') {
+    try {
+      new URL(value);
+    } catch {
+      toast.add({ severity: 'error', summary: t('settings.popupAds.toast.invalidUrlSummary'), detail: t('settings.popupAds.toast.invalidUrlDetail'), life: 3000 });
+      return;
+    }
+  }
+  if (formData.value.type === 'url' && formData.value.maxTriggersPerSession < 1) {
+    toast.add({ severity: 'error', summary: t('settings.popupAds.toast.maxTriggersRequiredSummary'), detail: t('settings.popupAds.toast.maxTriggersRequiredDetail'), life: 3000 });
+    return;
+  }
+
+  saving.value = true;
+  try {
+    const payload = {
+      type: formData.value.type,
+      label,
+      value,
+      isActive: formData.value.isActive,
+      maxTriggersPerSession: formData.value.type === 'url' ? formData.value.maxTriggersPerSession : undefined,
+    };
+
+    if (editingItem.value?.id) {
+      await rpcClient.updatePopupAd({ id: editingItem.value.id, ...payload });
+      toast.add({ severity: 'success', summary: t('settings.popupAds.toast.updatedSummary'), detail: t('settings.popupAds.toast.updatedDetail'), life: 2500 });
+    } else {
+      await rpcClient.createPopupAd(payload);
+      toast.add({ severity: 'success', summary: t('settings.popupAds.toast.createdSummary'), detail: t('settings.popupAds.toast.createdDetail'), life: 2500 });
+    }
+
+    await refetch();
+    closeDialog();
+  } catch (value: any) {
+    console.error(value);
+    showActionErrorToast(value);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const handleDelete = (item: PopupAdItem) => {
+  confirm.require({
+    message: t('settings.popupAds.confirm.deleteMessage', { name: item.label || '' }),
+    header: t('settings.popupAds.confirm.deleteHeader'),
+    acceptLabel: t('settings.popupAds.confirm.deleteAccept'),
+    rejectLabel: t('settings.popupAds.confirm.deleteReject'),
+    accept: async () => {
+      deletingId.value = item.id || null;
+      try {
+        await rpcClient.deletePopupAd({ id: item.id || '' });
+        await refetch();
+        toast.add({ severity: 'info', summary: t('settings.popupAds.toast.deletedSummary'), detail: t('settings.popupAds.toast.deletedDetail'), life: 2500 });
+      } catch (value: any) {
+        console.error(value);
+        showActionErrorToast(value);
+      } finally {
+        deletingId.value = null;
+      }
+    },
+  });
+};
+
+const handleToggleActive = async ({ item, value }: { item: PopupAdItem; value: boolean }) => {
+  togglingId.value = item.id || null;
+  try {
+    await rpcClient.updatePopupAd({
+      id: item.id || '',
+      type: item.type || 'url',
+      label: item.label || '',
+      value: item.value || '',
+      isActive: value,
+      maxTriggersPerSession: item.type === 'url' ? item.maxTriggersPerSession : undefined,
+    });
+    await refetch();
+  } catch (value: any) {
+    console.error(value);
+    showActionErrorToast(value);
+  } finally {
+    togglingId.value = null;
+  }
+};
+
+const previousPage = () => {
+  if (!hasPrev.value || isInitialLoading.value) return;
+  page.value -= 1;
+};
+
+const nextPage = () => {
+  if (!hasNext.value || isInitialLoading.value) return;
+  page.value += 1;
+};
+
+const changePageSize = (value: number) => {
+  const nextLimit = Number(value) || 10;
+  if (nextLimit === limit.value) return;
+  limit.value = nextLimit;
+  page.value = 1;
+};
+</script>
+
+<template>
+  <SettingsSectionCard :title="t('settings.content.popupAds.title')" :description="t('settings.content.popupAds.subtitle')" bodyClass="">
+    <template #header-actions>
+      <PopupAdsToolbar :disabled="isInitialLoading || isMutating" @create="openCreateDialog" />
+    </template>
+
+    <PopupAdsTable
+      :items="items"
+      :disabled="isMutating"
+      :is-loading="isInitialLoading"
+      :current-page="page"
+      :total-pages="totalPages"
+      :total-records="total"
+      :rows-per-page="limit"
+      :page-size-options="pageSizeOptions as unknown as number[]"
+      :can-previous-page="hasPrev"
+      :can-next-page="hasNext"
+      @edit="openEditDialog"
+      @delete="handleDelete"
+      @toggle-active="handleToggleActive"
+      @previous-page="previousPage"
+      @next-page="nextPage"
+      @page-size-change="changePageSize"
+    />
+
+    <div class="px-4 py-3 bg-header">
+      <p class="text-xs leading-5 text-foreground/60">
+        <strong class="text-foreground/80">{{ t('settings.popupAds.info.urlTitle') }}</strong>
+        {{ t('settings.popupAds.info.urlDescription') }}
+        <br>
+        <strong class="text-foreground/80">{{ t('settings.popupAds.info.scriptTitle') }}</strong>
+        {{ t('settings.popupAds.info.scriptDescription') }}
+      </p>
+    </div>
+
+    <PopupAdsDialog :visible="showDialog" :editing-item="editingItem" :form-data="formData" :saving="saving" @update:visible="showDialog = $event" @update:form-data="formData = $event" @save="handleSave" @close="closeDialog" />
+  </SettingsSectionCard>
+</template>
diff --git a/src/routes/settings/PopupAds/components/PopupAdsDialog.vue b/src/routes/settings/PopupAds/components/PopupAdsDialog.vue
new file mode 100644
index 0000000..ace6f41
--- /dev/null
+++ b/src/routes/settings/PopupAds/components/PopupAdsDialog.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import AppSwitch from '@/components/ui/AppSwitch.vue';
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+import type { PopupAdFormData, PopupAdItem } from '../types';
+
+const props = defineProps<{
+  visible: boolean;
+  editingItem: PopupAdItem | null;
+  formData: PopupAdFormData;
+  saving: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'update:formData', value: PopupAdFormData): void;
+  (e: 'save'): void;
+  (e: 'close'): void;
+}>();
+
+const { t } = useTranslation();
+
+const title = computed(() => props.editingItem
+  ? t('settings.popupAds.dialog.editTitle')
+  : t('settings.popupAds.dialog.createTitle'));
+
+const updateForm = (patch: Partial<PopupAdFormData>) => {
+  emit('update:formData', {
+    ...props.formData,
+    ...patch,
+  });
+};
+
+const updateTextField = (key: 'label' | 'value', value: string | number | null) => {
+  updateForm({
+    [key]: typeof value === 'string' ? value : value == null ? '' : String(value),
+  } as Partial<PopupAdFormData>);
+};
+
+const updateNumberField = (value: string | number | null) => {
+  const parsed = typeof value === 'number' ? value : Number(value ?? 0);
+  updateForm({ maxTriggersPerSession: Number.isFinite(parsed) && parsed > 0 ? parsed : 1 });
+};
+</script>
+
+<template>
+  <AppDialog
+    :visible="visible"
+    :title="title"
+    maxWidthClass="max-w-lg"
+    @update:visible="emit('update:visible', $event)"
+    @close="emit('close')"
+  >
+    <div class="space-y-4">
+      <div class="grid gap-2">
+        <label for="popup-ad-type" class="text-sm font-medium text-foreground">{{ t('settings.popupAds.dialog.type') }}</label>
+        <AppInput
+          id="popup-ad-type"
+          as="select"
+          :model-value="formData.type"
+          @update:model-value="updateForm({ type: ($event as 'url' | 'script') || 'url' })"
+        >
+          <option value="url">{{ t('settings.popupAds.types.url') }}</option>
+          <option value="script">{{ t('settings.popupAds.types.script') }}</option>
+        </AppInput>
+      </div>
+
+      <div class="grid gap-2">
+        <label for="popup-ad-label" class="text-sm font-medium text-foreground">{{ t('settings.popupAds.dialog.label') }}</label>
+        <AppInput
+          id="popup-ad-label"
+          :model-value="formData.label"
+          :placeholder="t('settings.popupAds.dialog.labelPlaceholder')"
+          @update:model-value="updateTextField('label', $event)"
+        />
+      </div>
+
+      <div class="grid gap-2">
+        <label for="popup-ad-value" class="text-sm font-medium text-foreground">{{ t(formData.type === 'url' ? 'settings.popupAds.dialog.url' : 'settings.popupAds.dialog.script') }}</label>
+        <AppInput
+          v-if="formData.type === 'url'"
+          id="popup-ad-value"
+          :model-value="formData.value"
+          :placeholder="t('settings.popupAds.dialog.urlPlaceholder')"
+          @update:model-value="updateTextField('value', $event)"
+        />
+        <AppInput
+          v-else
+          id="popup-ad-value"
+          as="textarea"
+          :rows="5"
+          :model-value="formData.value"
+          :placeholder="t('settings.popupAds.dialog.scriptPlaceholder')"
+          inputClass="resize-y font-mono text-sm"
+          @update:model-value="updateTextField('value', $event)"
+        />
+      </div>
+
+      <div v-if="formData.type === 'url'" class="grid gap-2">
+        <label for="popup-ad-max-triggers" class="text-sm font-medium text-foreground">{{ t('settings.popupAds.dialog.maxTriggersPerSession') }}</label>
+        <AppInput
+          id="popup-ad-max-triggers"
+          type="number"
+          min="1"
+          :model-value="formData.maxTriggersPerSession"
+          @update:model-value="updateNumberField($event)"
+        />
+      </div>
+
+      <div class="flex items-center justify-between rounded-md border border-border bg-header/40 px-3 py-3">
+        <div>
+          <p class="text-sm font-medium text-foreground">{{ t('settings.popupAds.dialog.activeTitle') }}</p>
+          <p class="mt-0.5 text-xs text-foreground/60">{{ t('settings.popupAds.dialog.activeDescription') }}</p>
+        </div>
+        <AppSwitch :model-value="formData.isActive" @update:model-value="updateForm({ isActive: $event })" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="saving" @click="emit('close')">
+          {{ t('common.cancel') }}
+        </AppButton>
+        <AppButton size="sm" :loading="saving" @click="emit('save')">
+          <template #icon>
+            <CheckIcon class="h-4 w-4" />
+          </template>
+          {{ editingItem ? t('settings.popupAds.dialog.update') : t('settings.popupAds.dialog.create') }}
+        </AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/PopupAds/components/PopupAdsTable.tsx b/src/routes/settings/PopupAds/components/PopupAdsTable.tsx
new file mode 100644
index 0000000..897b23f
--- /dev/null
+++ b/src/routes/settings/PopupAds/components/PopupAdsTable.tsx
@@ -0,0 +1,144 @@
+import PencilIcon from '@/components/icons/PencilIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+import LinkIcon from '@/components/icons/LinkIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppSwitch from '@/components/ui/AppSwitch.vue';
+import BaseTable from '@/components/ui/BaseTable.vue';
+import type { ColumnDef } from '@tanstack/vue-table';
+import { useTranslation } from 'i18next-vue';
+import { computed, defineComponent, type PropType } from 'vue';
+import type { PopupAdItem } from '../types';
+
+export default defineComponent({
+  name: 'PopupAdsTable',
+  props: {
+    items: { type: Array as PropType<PopupAdItem[]>, required: true },
+    disabled: { type: Boolean, default: false },
+    isLoading: { type: Boolean, default: false },
+    currentPage: { type: Number, default: 1 },
+    totalPages: { type: Number, default: 1 },
+    totalRecords: { type: Number, default: 0 },
+    rowsPerPage: { type: Number, default: 10 },
+    pageSizeOptions: { type: Array as PropType<number[]>, default: () => [] },
+    canPreviousPage: { type: Boolean, default: false },
+    canNextPage: { type: Boolean, default: false },
+  },
+  emits: {
+    edit: (item: PopupAdItem) => true,
+    delete: (item: PopupAdItem) => true,
+    'toggle-active': (payload: { item: PopupAdItem; value: boolean }) => true,
+    'previous-page': () => true,
+    'next-page': () => true,
+    'page-size-change': (value: number) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useTranslation();
+
+    const columns = computed<ColumnDef<PopupAdItem>[]>(() => [
+      {
+        id: 'label',
+        header: t('settings.popupAds.table.label'),
+        accessorFn: (row) => row.label || '',
+        cell: ({ row }) => (
+          <div class="max-w-[200px]">
+            <p onClick={() => emit('edit', row.original)} class="block text-sm truncate font-medium text-foreground cursor-pointer hover:underline">
+              {row.original.label}
+            </p>
+            <p class="block text-sm truncate mt-0.5 text-xs text-foreground/50">#{row.original.id}</p>
+          </div>
+        ),
+        meta: { headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-6 py-3' },
+      },
+      {
+        id: 'type',
+        header: t('settings.popupAds.table.type'),
+        accessorFn: (row) => row.type || '',
+        cell: ({ row }) => (
+          <span class={[
+            'inline-flex rounded-full px-2 py-1 text-xs font-medium uppercase',
+            row.original.type === 'url' ? 'bg-emerald-500/10 text-emerald-600' : 'bg-indigo-500/10 text-indigo-600',
+          ]}>
+            {t(`settings.popupAds.types.${row.original.type}`)}
+          </span>
+        ),
+        meta: { headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-6 py-3' },
+      },
+      {
+        id: 'target',
+        header: t('settings.popupAds.table.target'),
+        accessorFn: (row) => row.value || '',
+        cell: ({ row }) => (
+          <div class="max-w-[320px]">
+            <code class={[
+              'block truncate text-xs',
+              row.original.type === 'script' ? 'font-mono text-foreground/60' : 'text-foreground/60',
+            ]}>
+              {row.original.value}
+            </code>
+          </div>
+        ),
+        enableSorting: false,
+        meta: { headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-6 py-3' },
+      },
+      {
+        id: 'maxTriggersPerSession',
+        header: t('settings.popupAds.table.maxTriggersPerSession'),
+        accessorFn: (row) => row?.type === 'url' ? row.maxTriggersPerSession || 0 : '—',
+        cell: ({ getValue }) => <span class="text-foreground/70">{getValue()}</span>,
+        meta: { headerClass: 'px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-6 py-3 text-foreground/70' },
+      },
+      {
+        id: 'status',
+        header: t('common.status'),
+        cell: ({ row }) => (
+          <div class="text-center">
+            <AppSwitch
+              modelValue={Boolean(row.original.isActive)}
+              disabled={props.disabled}
+              onUpdate:modelValue={(value: boolean) => emit('toggle-active', { item: row.original, value })}
+            />
+          </div>
+        ),
+        meta: { headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-6 py-3 text-center' },
+      },
+      {
+        id: 'actions',
+        header: t('common.actions'),
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div class="flex items-center justify-center gap-2">
+            <AppButton variant="ghost" size="icon" disabled={props.disabled} onClick={() => emit('delete', row.original)} v-slots={{ icon: () => <TrashIcon filled class="h-4 w-4" /> }} />
+          </div>
+        ),
+        meta: { headerClass: 'px-6 py-3 text-center text-xs font-medium uppercase tracking-wider text-foreground/50 [&>div]:justify-center', cellClass: 'px-6 py-3 text-center' },
+      },
+    ]);
+
+    return () => (
+      <BaseTable
+        data={props.items}
+        columns={columns.value}
+        loading={props.isLoading}
+        getRowId={(row: PopupAdItem) => String(row.id)}
+        wrapperClass="mt-4 border-b border-border rounded-none border-x-0 border-t-0 bg-transparent"
+        tableClass="w-full"
+        headerRowClass="bg-muted/30"
+        bodyRowClass="border-b border-border hover:bg-muted/30"
+        pagination
+        {...props}
+        onPrevious-page={() => emit('previous-page')}
+        onNext-page={() => emit('next-page')}
+        onPage-size-change={(value: number) => emit('page-size-change', value)}
+        v-slots={{
+          empty: () => (
+            <div class="px-6 py-12 text-center">
+              <LinkIcon class="mx-auto mb-3 block h-10 w-10 text-foreground/30" />
+              <p class="mb-1 text-sm text-foreground/60">{t('settings.popupAds.emptyTitle')}</p>
+              <p class="text-xs text-foreground/40">{t('settings.popupAds.emptySubtitle')}</p>
+            </div>
+          ),
+        }}
+      />
+    );
+  },
+});
diff --git a/src/routes/settings/PopupAds/components/PopupAdsToolbar.vue b/src/routes/settings/PopupAds/components/PopupAdsToolbar.vue
new file mode 100644
index 0000000..8cdcc8a
--- /dev/null
+++ b/src/routes/settings/PopupAds/components/PopupAdsToolbar.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import PlusIcon from '@/components/icons/PlusIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'create'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <AppButton size="sm" :disabled="disabled" @click="emit('create')">
+    <template #icon>
+      <PlusIcon class="h-4 w-4" />
+    </template>
+    {{ t('settings.popupAds.createItem') }}
+  </AppButton>
+</template>
diff --git a/src/routes/settings/PopupAds/types.ts b/src/routes/settings/PopupAds/types.ts
new file mode 100644
index 0000000..1b04441
--- /dev/null
+++ b/src/routes/settings/PopupAds/types.ts
@@ -0,0 +1,17 @@
+export type { PopupAd } from '@/server/api/proto/app/v1/common';
+export type {
+  CreatePopupAdRequest,
+  DeletePopupAdRequest,
+  UpdatePopupAdRequest,
+} from '@/server/api/proto/app/v1/catalog';
+
+export type PopupAdType = 'url' | 'script';
+export type PopupAdItem = PopupAd;
+
+export interface PopupAdFormData {
+  type: PopupAdType;
+  label: string;
+  value: string;
+  isActive: boolean;
+  maxTriggersPerSession: number;
+}
diff --git a/src/routes/settings/SecurityNConnected/SecurityNConnected.vue b/src/routes/settings/SecurityNConnected/SecurityNConnected.vue
new file mode 100644
index 0000000..5344b2d
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/SecurityNConnected.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { useAppConfirm } from '@/composables/useAppConfirm';
+import { useAppToast } from '@/composables/useAppToast';
+import { supportedLocales } from '@/i18n/constants';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+import { useAuthStore } from '@/stores/auth';
+import { useTranslation } from 'i18next-vue';
+import { computed, ref } from 'vue';
+import SecurityAccountStatusRow from './components/SecurityAccountStatusRow.vue';
+import SecurityChangePasswordDialog from './components/SecurityChangePasswordDialog.vue';
+import SecurityChangePasswordRow from './components/SecurityChangePasswordRow.vue';
+import SecurityEmailRow from './components/SecurityEmailRow.vue';
+import SecurityLanguageRow from './components/SecurityLanguageRow.vue';
+import SecurityLogoutRow from './components/SecurityLogoutRow.vue';
+import SecurityTelegramRow from './components/SecurityTelegramRow.vue';
+import SecurityTwoFactorDialog from './components/SecurityTwoFactorDialog.vue';
+
+const auth = useAuthStore();
+const toast = useAppToast();
+const confirm = useAppConfirm();
+const { t, i18next } = useTranslation();
+
+const languageSaving = ref(false);
+const selectedLanguage = ref<string>(auth.user?.language || "en");
+const languageOptions = computed(() => supportedLocales.map((value) => ({
+    value,
+    label: t(`settings.securityConnected.language.options.${value}`)
+})));
+
+const twoFactorEnabled = ref(false);
+const twoFactorDialogVisible = ref(false);
+const twoFactorCode = ref('');
+const twoFactorSecret = ref('JBSWY3DPEHPK3PXP');
+
+const emailConnected = ref(true);
+const telegramConnected = ref(false);
+const telegramUsername = ref('');
+
+const changePasswordDialogVisible = ref(false);
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const changePasswordLoading = ref(false);
+const changePasswordError = ref('');
+
+const openChangePassword = () => {
+    changePasswordDialogVisible.value = true;
+    changePasswordError.value = '';
+    currentPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+};
+
+const changePassword = async () => {
+    changePasswordError.value = '';
+
+    if (newPassword.value !== confirmPassword.value) {
+        changePasswordError.value = t('settings.securityConnected.changePassword.dialog.errors.mismatch');
+        return;
+    }
+
+    if (newPassword.value.length < 6) {
+        changePasswordError.value = t('settings.securityConnected.changePassword.dialog.errors.minLength');
+        return;
+    }
+
+    changePasswordLoading.value = true;
+    try {
+        await auth.changePassword(currentPassword.value, newPassword.value);
+        changePasswordDialogVisible.value = false;
+        currentPassword.value = '';
+        newPassword.value = '';
+        confirmPassword.value = '';
+        toast.add({
+            severity: 'success',
+            summary: t('settings.securityConnected.changePassword.toast.successSummary'),
+            detail: t('settings.securityConnected.changePassword.toast.successDetail'),
+            life: 3000
+        });
+    } catch (e: any) {
+        changePasswordError.value = e.message || t('settings.securityConnected.changePassword.dialog.errors.default');
+    } finally {
+        changePasswordLoading.value = false;
+    }
+};
+
+const handleLogout = () => {
+    confirm.require({
+        message: t('settings.securityConnected.logout.confirm.message'),
+        header: t('settings.securityConnected.logout.confirm.header'),
+        acceptLabel: t('settings.securityConnected.logout.confirm.accept'),
+        rejectLabel: t('settings.securityConnected.logout.confirm.reject'),
+        accept: async () => {
+            await auth.logout();
+        }
+    });
+};
+
+const saveLanguage = async () => {
+    languageSaving.value = true;
+    try {
+        const result = await auth.setLanguage(selectedLanguage.value);
+        if (result.ok && !result.fallbackOnly) {
+            toast.add({
+                severity: 'success',
+                summary: t('settings.securityConnected.language.toast.successSummary'),
+                detail: t('settings.securityConnected.language.toast.successDetail'),
+                life: 3000,
+            });
+            return;
+        }
+
+        toast.add({
+            severity: 'warn',
+            summary: t('settings.securityConnected.language.toast.errorSummary'),
+            detail: t('settings.securityConnected.language.toast.errorDetail'),
+            life: 5000,
+        });
+    } finally {
+        languageSaving.value = false;
+    }
+};
+
+const confirmTwoFactor = async () => {
+    try {
+        await new Promise(resolve => setTimeout(resolve, 500));
+        twoFactorEnabled.value = true;
+        toast.add({
+            severity: 'success',
+            summary: t('settings.securityConnected.toast.twoFactorEnabledSummary'),
+            detail: t('settings.securityConnected.toast.twoFactorEnabledDetail'),
+            life: 3000
+        });
+    } catch (e) {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.securityConnected.toast.twoFactorInvalidCodeSummary'),
+            detail: t('settings.securityConnected.toast.twoFactorInvalidCodeDetail'),
+            life: 5000
+        });
+    }
+};
+
+const connectTelegram = async () => {
+    // https://t.me/<username_bot>?start=abc123
+    window.open(`https://t.me/hlstiktok_bot?start=${auth.user?.username}`, "_blank");
+    // try {
+    //     await new Promise(resolve => setTimeout(resolve, 1000));
+    //     telegramConnected.value = true;
+    //     telegramUsername.value = '@telegram_user';
+    //     toast.add({
+    //         severity: 'success',
+    //         summary: t('settings.securityConnected.toast.telegramConnectedSummary'),
+    //         detail: t('settings.securityConnected.toast.telegramConnectedDetail', { username: telegramUsername.value }),
+    //         life: 3000
+    //     });
+    // } catch (e) {
+    //     toast.add({
+    //         severity: 'error',
+    //         summary: t('settings.securityConnected.toast.telegramConnectFailedSummary'),
+    //         detail: t('settings.securityConnected.toast.telegramConnectFailedDetail'),
+    //         life: 5000
+    //     });
+    // }
+};
+
+const disconnectTelegram = async () => {
+    try {
+        await new Promise(resolve => setTimeout(resolve, 500));
+        telegramConnected.value = false;
+        telegramUsername.value = '';
+        toast.add({
+            severity: 'info',
+            summary: t('settings.securityConnected.toast.telegramDisconnectedSummary'),
+            detail: t('settings.securityConnected.toast.telegramDisconnectedDetail'),
+            life: 3000
+        });
+    } catch (e) {
+        toast.add({
+            severity: 'error',
+            summary: t('settings.securityConnected.toast.telegramDisconnectFailedSummary'),
+            detail: t('settings.securityConnected.toast.telegramDisconnectFailedDetail'),
+            life: 5000
+        });
+    }
+};
+</script>
+
+<template>
+    <SettingsSectionCard
+        :title="t('settings.securityConnected.header.title')"
+        :description="t('settings.securityConnected.header.subtitle')"
+    >
+        <SecurityAccountStatusRow />
+
+        <SecurityLanguageRow
+            :selected-language="selectedLanguage"
+            :language-options="languageOptions"
+            :language-saving="languageSaving"
+            @update:selected-language="selectedLanguage = $event"
+            @save="saveLanguage"
+        />
+
+        <SecurityChangePasswordRow @open="openChangePassword" />
+
+        <SecurityEmailRow :email-connected="emailConnected" />
+
+        <SecurityTelegramRow
+            :telegram-connected="telegramConnected"
+            :telegram-username="telegramUsername"
+            @connect="connectTelegram"
+            @disconnect="disconnectTelegram"
+        />
+
+        <SecurityLogoutRow @logout="handleLogout" />
+    </SettingsSectionCard>
+
+    <SecurityTwoFactorDialog
+        :visible="twoFactorDialogVisible"
+        :two-factor-code="twoFactorCode"
+        :two-factor-secret="twoFactorSecret"
+        @update:visible="twoFactorDialogVisible = $event"
+        @update:two-factor-code="twoFactorCode = $event"
+        @confirm="confirmTwoFactor"
+    />
+
+    <SecurityChangePasswordDialog
+        :visible="changePasswordDialogVisible"
+        :current-password="currentPassword"
+        :new-password="newPassword"
+        :confirm-password="confirmPassword"
+        :loading="changePasswordLoading"
+        :error="changePasswordError"
+        @update:visible="changePasswordDialogVisible = $event"
+        @update:current-password="currentPassword = $event"
+        @update:new-password="newPassword = $event"
+        @update:confirm-password="confirmPassword = $event"
+        @submit="changePassword"
+    />
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityAccountStatusRow.vue b/src/routes/settings/SecurityNConnected/components/SecurityAccountStatusRow.vue
new file mode 100644
index 0000000..ffce051
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityAccountStatusRow.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <SettingsRow
+        :title="t('settings.securityConnected.accountStatus.label')"
+        :description="t('settings.securityConnected.accountStatus.detail')"
+        iconBoxClass="bg-primary/10 text-primary"
+    >
+        <template #icon>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 532 532"><path d="M10 266c0 37 21 69 51 85-10 33-2 70 24 96s63 34 96 24c16 30 48 51 85 51s69-21 85-51c33 10 70 2 96-24s34-63 24-96c30-16 51-48 51-85s-21-69-51-85c10-33 2-70-24-96s-63-34-96-24c-16-30-48-51-85-51s-69 21-85 51c-33-10-70-2-96 24s-34 63-24 96c-30 16-51 48-51 85zm136 24 34-33c8 8 26 26 53 54l106-145 14-20 39 28-14 20-123 169-17 23-20-21c-43-45-68-70-72-75z" fill="var(--fill1)"/><path d="m392 174-14 20-123 169-17 23-20-21c-43-45-68-70-72-75l34-33c8 8 26 26 53 54l106-145 14-20 39 28z" fill="var(--fill4)"/></svg>
+        </template>
+
+        <template #actions>
+            <span class="text-xs font-medium text-success bg-success/10 px-2 py-1 rounded">{{ t('settings.securityConnected.accountStatus.badge') }}</span>
+        </template>
+    </SettingsRow>
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordDialog.vue b/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordDialog.vue
new file mode 100644
index 0000000..f1dc0e2
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordDialog.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import LockIcon from '@/components/icons/LockIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    visible: boolean;
+    currentPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+    loading: boolean;
+    error: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+    (e: 'update:currentPassword', value: string): void;
+    (e: 'update:newPassword', value: string): void;
+    (e: 'update:confirmPassword', value: string): void;
+    (e: 'submit'): void;
+}>();
+
+const { t } = useTranslation();
+
+const normalizeValue = (value: string | number | null) => typeof value === 'string' ? value : value == null ? '' : String(value);
+</script>
+
+<template>
+    <AppDialog
+        :visible="visible"
+        :title="t('settings.securityConnected.changePassword.dialog.title')"
+        maxWidthClass="max-w-md"
+        @update:visible="emit('update:visible', $event)"
+    >
+        <div class="space-y-4">
+            <p class="text-sm text-foreground/70">
+                {{ t('settings.securityConnected.changePassword.dialog.subtitle') }}
+            </p>
+
+            <div v-if="error" class="bg-danger/10 border border-danger text-danger text-sm rounded-md p-3">
+                {{ error }}
+            </div>
+
+            <div class="grid gap-2">
+                <label for="currentPassword" class="text-sm font-medium text-foreground">{{ t('settings.securityConnected.changePassword.dialog.current') }}</label>
+                <AppInput
+                    id="currentPassword"
+                    :model-value="currentPassword"
+                    type="password"
+                    :placeholder="t('settings.securityConnected.changePassword.dialog.currentPlaceholder')"
+                    @update:model-value="emit('update:currentPassword', normalizeValue($event))"
+                >
+                    <template #prefix>
+                        <LockIcon class="w-5 h-5" />
+                    </template>
+                </AppInput>
+            </div>
+
+            <div class="grid gap-2">
+                <label for="newPassword" class="text-sm font-medium text-foreground">{{ t('settings.securityConnected.changePassword.dialog.new') }}</label>
+                <AppInput
+                    id="newPassword"
+                    :model-value="newPassword"
+                    type="password"
+                    :placeholder="t('settings.securityConnected.changePassword.dialog.newPlaceholder')"
+                    @update:model-value="emit('update:newPassword', normalizeValue($event))"
+                >
+                    <template #prefix>
+                        <LockIcon class="w-5 h-5" />
+                    </template>
+                </AppInput>
+            </div>
+
+            <div class="grid gap-2">
+                <label for="confirmPassword" class="text-sm font-medium text-foreground">{{ t('settings.securityConnected.changePassword.dialog.confirm') }}</label>
+                <AppInput
+                    id="confirmPassword"
+                    :model-value="confirmPassword"
+                    type="password"
+                    :placeholder="t('settings.securityConnected.changePassword.dialog.confirmPlaceholder')"
+                    @update:model-value="emit('update:confirmPassword', normalizeValue($event))"
+                >
+                    <template #prefix>
+                        <LockIcon class="w-5 h-5" />
+                    </template>
+                </AppInput>
+            </div>
+        </div>
+        <template #footer>
+            <div class="flex justify-end gap-3">
+                <AppButton
+                    variant="secondary"
+                    size="sm"
+                    :disabled="loading"
+                    @click="emit('update:visible', false)"
+                >
+                    {{ t('settings.securityConnected.changePassword.dialog.cancel') }}
+                </AppButton>
+                <AppButton
+                    size="sm"
+                    :loading="loading"
+                    @click="emit('submit')"
+                >
+                    <template #icon>
+                        <CheckIcon class="w-4 h-4" />
+                    </template>
+                    {{ t('settings.securityConnected.changePassword.dialog.submit') }}
+                </AppButton>
+            </div>
+        </template>
+    </AppDialog>
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordRow.vue b/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordRow.vue
new file mode 100644
index 0000000..9800593
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordRow.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import AppButton from '@/components/ui/AppButton.vue';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+import { useTranslation } from 'i18next-vue';
+
+const emit = defineEmits<{
+    (e: 'open'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <SettingsRow
+        :title="t('settings.securityConnected.changePassword.label')"
+        :description="t('settings.securityConnected.changePassword.detail')"
+        iconBoxClass="bg-primary/10 text-primary"
+    >
+        <template #icon>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 404 564"><path d="M74 138v64h64v-64c0-35 29-64 64-64s64 29 64 64v64h64v-64c0-71-57-128-128-128S74 67 74 138z" fill="var(--fill1)"/><path d="M74 202c-35 0-64 29-64 64v224c0 35 29 64 64 64h256c35 0 64-29 64-64V266c0-35-29-64-64-64H74zm152 136v80c0 13-11 24-24 24s-24-11-24-24v-80c0-13 11-24 24-24s24 11 24 24z" fill="var(--fill4)"/></svg>
+        </template>
+
+        <template #actions>
+            <AppButton variant="secondary" size="sm" @click="emit('open')">
+                {{ t('settings.securityConnected.changePassword.button') }}
+            </AppButton>
+        </template>
+    </SettingsRow>
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityEmailRow.vue b/src/routes/settings/SecurityNConnected/components/SecurityEmailRow.vue
new file mode 100644
index 0000000..c755af8
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityEmailRow.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import MailIcon from '@/components/icons/MailIcon.vue';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    emailConnected: boolean;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <SettingsRow
+        :title="t('settings.securityConnected.email.label')"
+        :description="emailConnected ? t('settings.securityConnected.email.connected') : t('settings.securityConnected.email.disconnected')"
+        iconBoxClass="bg-primary/10 text-primary"
+    >
+        <template #icon>
+            <MailIcon filled />
+        </template>
+
+        <template #actions>
+            <span class="text-xs font-medium px-2 py-1 rounded" :class="emailConnected ? 'text-success bg-success/10' : 'text-muted bg-muted/20'">
+                {{ emailConnected ? t('settings.securityConnected.email.badgeConnected') : t('settings.securityConnected.email.badgeDisconnected') }}
+            </span>
+        </template>
+    </SettingsRow>
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityLanguageRow.vue b/src/routes/settings/SecurityNConnected/components/SecurityLanguageRow.vue
new file mode 100644
index 0000000..421a3c3
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityLanguageRow.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import LanguageIcon from '@/components/icons/LanguageIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    selectedLanguage: string;
+    languageOptions: Array<{ value: string; label: string }>;
+    languageSaving: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:selectedLanguage', value: string): void;
+    (e: 'save'): void;
+}>();
+
+const { t } = useTranslation();
+
+const updateSelectedLanguage = (event: Event) => {
+    emit('update:selectedLanguage', (event.target as HTMLSelectElement).value);
+};
+</script>
+
+<template>
+    <SettingsRow
+        :title="t('settings.securityConnected.language.label')"
+        :description="t('settings.securityConnected.language.detail')"
+        actionsClass="flex items-center gap-2"
+        iconBoxClass="bg-primary/10 text-primary"
+    >
+        <template #icon>
+            <LanguageIcon class="h-6 w-6" filled />
+        </template>
+
+        <template #actions>
+            <select
+                :value="selectedLanguage"
+                :disabled="languageSaving"
+                class="rounded-md border border-border bg-header px-3 py-2 text-sm text-foreground disabled:opacity-60"
+                @change="updateSelectedLanguage"
+            >
+                <option
+                    v-for="option in languageOptions"
+                    :key="option.value"
+                    :value="option.value"
+                >
+                    {{ option.label }}
+                </option>
+            </select>
+            <AppButton
+                size="sm"
+                variant="secondary"
+                :loading="languageSaving"
+                :disabled="languageSaving"
+                @click="emit('save')"
+            >
+                {{ t('settings.securityConnected.language.save') }}
+            </AppButton>
+        </template>
+    </SettingsRow>
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityLogoutRow.vue b/src/routes/settings/SecurityNConnected/components/SecurityLogoutRow.vue
new file mode 100644
index 0000000..373e458
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityLogoutRow.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import XCircleIcon from '@/components/icons/XCircleIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+import { useTranslation } from 'i18next-vue';
+
+const emit = defineEmits<{
+    (e: 'logout'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <SettingsRow
+        :title="t('settings.securityConnected.logout.label')"
+        :description="t('settings.securityConnected.logout.detail')"
+        hoverClass="hover:bg-danger/5"
+        iconBoxClass="bg-danger/10 text-danger"
+    >
+        <template #icon>
+            <svg class="w-6 h-6 text-danger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 532"><path d="M10 266c0 141 115 256 256 256s256-115 256-256S407 10 266 10 10 125 10 266zm167-89c9-9 25-9 34 0l55 55 55-55c9-9 25-9 34 0s9 25 0 34l-55 55 55 55c9 9 9 25 0 34-10 9-25 9-34 0l-55-55-55 55c-9 9-25 9-34 0-9-10-9-25 0-34l55-55-55-55c-9-9-9-25 0-34z" fill="color-mix(in srgb, var(--colors-danger-DEFAULT) 40%, transparent)"/><path d="M211 177c-9-9-25-9-34 0s-9 25 0 34l55 55-55 55c-9 9-9 25 0 34 10 9 25 9 34 0l55-55 55 55c9 9 25 9 34 0 9-10 9-25 0-34l-55-55 55-55c9-9 9-25 0-34s-25-9-34 0l-55 55-55-55z" fill="var(--colors-danger-DEFAULT)"/></svg>
+        </template>
+
+        <template #actions>
+            <AppButton variant="danger" size="sm" @click="emit('logout')">
+                <template #icon>
+                    <XCircleIcon class="w-4 h-4" />
+                </template>
+                {{ t('settings.securityConnected.logout.button') }}
+            </AppButton>
+        </template>
+    </SettingsRow>
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityTelegramRow.vue b/src/routes/settings/SecurityNConnected/components/SecurityTelegramRow.vue
new file mode 100644
index 0000000..accfa52
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityTelegramRow.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import TelegramIcon from '@/components/icons/TelegramIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    telegramConnected: boolean;
+    telegramUsername: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'connect'): void;
+    (e: 'disconnect'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <SettingsRow
+        :title="t('settings.securityConnected.telegram.label')"
+        :description="telegramConnected ? (telegramUsername || t('settings.securityConnected.telegram.connectedFallback')) : t('settings.securityConnected.telegram.detailDisconnected')"
+        iconBoxClass="bg-[#0088cc]/10"
+    >
+        <template #icon>
+            <TelegramIcon class="w-6 h-6 text-[#0088cc]" />
+        </template>
+
+        <template #actions>
+            <AppButton
+                v-if="telegramConnected"
+                variant="danger"
+                size="sm"
+                @click="emit('disconnect')"
+            >
+                {{ t('settings.securityConnected.telegram.disconnect') }}
+            </AppButton>
+            <AppButton
+                v-else
+                size="sm"
+                variant="secondary"
+                @click="emit('connect')"
+            >
+                {{ t('settings.securityConnected.telegram.connect') }}
+            </AppButton>
+        </template>
+    </SettingsRow>
+</template>
diff --git a/src/routes/settings/SecurityNConnected/components/SecurityTwoFactorDialog.vue b/src/routes/settings/SecurityNConnected/components/SecurityTwoFactorDialog.vue
new file mode 100644
index 0000000..9466645
--- /dev/null
+++ b/src/routes/settings/SecurityNConnected/components/SecurityTwoFactorDialog.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import CheckIcon from '@/components/icons/CheckIcon.vue';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    visible: boolean;
+    twoFactorCode: string;
+    twoFactorSecret: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+    (e: 'update:twoFactorCode', value: string): void;
+    (e: 'confirm'): void;
+}>();
+
+const { t } = useTranslation();
+
+const updateCode = (value: string | number | null) => {
+    emit('update:twoFactorCode', typeof value === 'string' ? value : value == null ? '' : String(value));
+};
+</script>
+
+<template>
+    <AppDialog
+        :visible="visible"
+        :title="t('settings.securityConnected.twoFactorDialog.title')"
+        maxWidthClass="max-w-md"
+        @update:visible="emit('update:visible', $event)"
+    >
+        <div class="space-y-4">
+            <p class="text-sm text-foreground/70">
+                {{ t('settings.securityConnected.twoFactorDialog.subtitle') }}
+            </p>
+
+            <div class="flex justify-center py-4">
+                <div class="w-48 h-48 bg-muted rounded-lg flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="3" width="7" height="7" />
+                        <rect x="14" y="3" width="7" height="7" />
+                        <rect x="14" y="14" width="7" height="7" />
+                        <rect x="3" y="14" width="7" height="7" />
+                    </svg>
+                </div>
+            </div>
+
+            <div class="bg-muted/30 rounded-md p-3">
+                <p class="text-xs text-foreground/60 mb-1">{{ t('settings.securityConnected.twoFactorDialog.secret') }}</p>
+                <code class="text-sm font-mono text-primary">{{ twoFactorSecret }}</code>
+            </div>
+
+            <div class="grid gap-2">
+                <label for="twoFactorCode" class="text-sm font-medium text-foreground">{{ t('settings.securityConnected.twoFactorDialog.codeLabel') }}</label>
+                <AppInput
+                    id="twoFactorCode"
+                    :model-value="twoFactorCode"
+                    :placeholder="t('settings.securityConnected.twoFactorDialog.codePlaceholder')"
+                    :maxlength="6"
+                    @update:model-value="updateCode"
+                />
+            </div>
+        </div>
+        <template #footer>
+            <div class="flex justify-end gap-3">
+                <AppButton variant="secondary" size="sm" @click="emit('update:visible', false)">
+                    {{ t('settings.securityConnected.twoFactorDialog.cancel') }}
+                </AppButton>
+                <AppButton size="sm" @click="emit('confirm')">
+                    <template #icon>
+                        <CheckIcon class="w-4 h-4" />
+                    </template>
+                    {{ t('settings.securityConnected.twoFactorDialog.verify') }}
+                </AppButton>
+            </div>
+        </template>
+    </AppDialog>
+</template>
diff --git a/src/routes/settings/Settings.vue b/src/routes/settings/Settings.vue
new file mode 100644
index 0000000..63e4d10
--- /dev/null
+++ b/src/routes/settings/Settings.vue
@@ -0,0 +1,256 @@
+<template>
+    <section>
+        <PageHeader :title="content[route.name as keyof typeof content]?.title || t('settings.content.fallbackTitle')"
+            :description="content[route.name as keyof typeof content]?.subtitle || t('settings.content.fallbackSubtitle')"
+            :breadcrumbs="breadcrumbs" />
+        <div class="max-w-7xl mx-auto pb-12">
+
+            <div class="flex flex-col md:flex-row gap-8 mt-6">
+                <!-- Sidebar Navigation (GitHub-style) -->
+                <aside class="md:w-56 shrink-0">
+                    <div class="flex items-center gap-4 mb-8">
+                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+                            <UserIcon class="w-8 h-8 text-primary" :filled="true" />
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold text-foreground">{{ auth.user?.username || t('app.name') }}
+                            </h3>
+                            <p class="text-sm text-foreground/60">{{ auth.user?.email || '' }}</p>
+                        </div>
+                    </div>
+                    <nav class="space-y-6">
+                        <div v-for="section in menuSections" :key="section.title">
+                            <h3 v-if="section.title"
+                                class="text-xs font-semibold text-foreground/50 uppercase tracking-wider mb-2 pl-3">
+                                {{ section.title }}
+                            </h3>
+                            <ul class="space-y-0.5">
+                                <li v-for="item in section.items" :key="item.value">
+                                    <router-link :to="item.to" :class="[
+                                        'w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all duration-150',
+                                        currentTab === item.value
+                                            ? 'bg-primary/10 text-primary font-semibold'
+                                            : item.danger
+                                                ? 'text-danger hover:bg-danger/10'
+                                                : 'text-foreground/70 hover:bg-header hover:text-foreground'
+                                    ]">
+                                        <component :is="item.icon" class="w-5 h-5 shrink-0"
+                                            :filled="currentTab === item.value" />
+                                        {{ item.label }}
+                                    </router-link>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </aside>
+
+                <!-- Main Content Area -->
+                <main class="flex-1 min-w-0">
+                    <router-view />
+
+                    <!-- Settings-only toast/confirm hosts (no PrimeVue dependency) -->
+                    <ClientOnly>
+                        <AppToastHost />
+                        <AppConfirmHost />
+                    </ClientOnly>
+                </main>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import ClientOnly from '@/components/ClientOnly';
+import PageHeader from '@/components/dashboard/PageHeader.vue';
+import AdvertisementIcon from '@/components/icons/AdvertisementIcon.vue';
+import AlertTriangle from '@/components/icons/AlertTriangle.vue';
+import Bell from '@/components/icons/Bell.vue';
+import Credit from '@/components/icons/Credit.vue';
+import GlobeIcon from '@/components/icons/Globe.vue';
+import ShieldUser from '@/components/icons/shield-user.vue';
+import UserIcon from '@/components/icons/UserIcon.vue';
+import VideoPlayIcon from '@/components/icons/VideoPlayIcon.vue';
+import Windows from '@/components/icons/windows.vue';
+import AppConfirmHost from '@/components/ui/AppConfirmHost.vue';
+import AppToastHost from '@/components/ui/AppToastHost.vue';
+import { isAdmin } from '@/lib/utils';
+import { useAuthStore } from '@/stores/auth';
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const auth = useAuthStore();
+const { t } = useTranslation();
+
+type MenuItem = {
+    to: string
+    value: string
+    label: string
+    icon?: any
+    description?: string
+    danger?: boolean
+}
+// Menu items grouped by category (GitHub-style)
+const menuSections = computed<{ title: string; items: MenuItem[] }[]>(() => [
+    {
+        title: t('settings.menu.securityGroup'),
+        items: [
+            {
+                to: '/settings/security',
+                value: 'security', label: t('settings.menu.security'), icon: ShieldUser
+            },
+            { to: '/settings/billing', value: 'billing', label: t('settings.menu.billing'), icon: Credit },
+        ],
+    },
+    {
+        title: t('settings.menu.preferencesGroup'),
+        items: [
+            { to: '/settings/notifications', value: 'notifications', label: t('settings.menu.notifications'), icon: Bell },
+        ],
+    },
+    {
+        title: t('settings.menu.playerGroup'),
+        items: [
+            { to: '/settings/player-configs', value: 'player-configs', label: t('settings.menu.playerConfigs'), icon: VideoPlayIcon },
+        ],
+    },
+    {
+        title: t('settings.menu.integrationsGroup'),
+        items: [
+            { to: '/settings/domains', value: 'domains', label: t('settings.menu.domains'), icon: GlobeIcon },
+            { to: '/settings/ads', value: 'ads', label: t('settings.menu.ads'), icon: AdvertisementIcon },
+            { to: '/settings/popup-ads', value: 'popup-ads', label: t('settings.menu.popupAds'), icon: Windows },
+        ],
+    },
+    ...(isAdmin(auth.user?.role) ? [{
+        title: 'Admin Workspace',
+        items: [
+            { to: '/settings/admin/users', value: 'admin-users', label: 'Users', description: 'Accounts, plans and moderation' },
+            { to: '/settings/admin/videos', value: 'admin-videos', label: 'Videos', description: 'Cross-user media inventory' },
+            { to: '/settings/admin/payments', value: 'admin-payments', label: 'Payments', description: 'Revenue, invoices and state changes' },
+            { to: '/settings/admin/plans', value: 'admin-plans', label: 'Plans', description: 'Catalog and subscription offers' },
+        ],
+    },
+    {
+        title: 'Admin Operations',
+        items: [
+            { to: '/settings/admin/ad-templates', value: 'admin-ad-templates', label: 'Ad Templates', description: 'VAST templates and defaults' },
+            { to: '/settings/admin/popup-ads', value: 'admin-popup-ads', label: 'Popup Ads', description: 'Popup campaigns, timing and cooldowns' },
+            { to: '/settings/admin/player-configs', value: 'admin-player-configs', label: 'Player Configs', description: 'Cross-user player presets and defaults' },
+            { to: '/settings/admin/jobs', value: 'admin-jobs', label: 'Jobs', description: 'Queue, retries and live logs' },
+            { to: '/settings/admin/agents', value: 'admin-agents', label: 'Agents', description: 'Workers, health and maintenance' },
+            { to: '/settings/admin/logs', value: 'admin-logs', label: 'Logs', description: 'Direct runtime log lookup' },
+        ],
+    },] : []),
+    {
+        title: t('settings.menu.dangerGroup'),
+        items: [
+            { to: '/settings/danger', value: 'danger', label: t('settings.menu.danger'), icon: AlertTriangle, danger: true },
+        ],
+    }
+] as const);
+
+type TabValue = 'profile' | 'security' | 'notifications' | 'playerConfigs' | 'billing' | 'domains' | 'ads' | 'danger';
+
+// Get current tab from route path
+const currentTab = computed<TabValue>(() => {
+    const path = route.path as string;
+    const tabName = path.replace('/settings', '') || '/profile';
+    // support admin sub-routes
+    if (tabName.startsWith('/admin/')) {
+        return tabName.replace('/admin/', 'admin-') as TabValue;
+    }
+    if (tabName === '' || tabName === '/') return 'profile';
+    return (tabName.replace('/', '') as TabValue) || 'profile';
+});
+
+// Breadcrumbs with dynamic tab
+const allMenuItems = computed(() => menuSections.value.map(section => section.items).flat());
+const currentItem = computed(() => allMenuItems.value.find(item => item.value === currentTab.value));
+
+const breadcrumbs = computed(() => [
+    { label: t('pageHeader.dashboard'), to: '/overview' },
+    { label: t('pageHeader.settings'), to: '/settings' },
+    ...(currentItem.value ? [{ label: currentItem.value.label + (currentItem.value.value.includes("admin") ? " (Admin)" : "") }] : []),
+]);
+
+const content = computed(() => ({
+    'settings-security': {
+        title: t('settings.content.security.title'),
+        subtitle: t('settings.content.security.subtitle')
+    },
+    'settings-notifications': {
+        title: t('settings.content.notifications.title'),
+        subtitle: t('settings.content.notifications.subtitle')
+    },
+    'settings-billing': {
+        title: t('settings.content.billing.title'),
+        subtitle: t('settings.content.billing.subtitle')
+    },
+    'settings-domains': {
+        title: t('settings.content.domains.title'),
+        subtitle: t('settings.content.domains.subtitle')
+    },
+    'settings-ads': {
+        title: t('settings.content.ads.title'),
+        subtitle: t('settings.content.ads.subtitle')
+    },
+    'settings-popup-ads': {
+        title: t('settings.content.popupAds.title'),
+        subtitle: t('settings.content.popupAds.subtitle')
+     },
+    'settings-player-configs': {
+        title: t('settings.content.playerConfigs.title'),
+        subtitle: t('settings.content.playerConfigs.subtitle')
+    },
+    'settings-danger': {
+        title: t('settings.content.danger.title'),
+        subtitle: t('settings.content.danger.subtitle')
+    },
+    'admin-overview': {
+        title: 'Overview',
+        subtitle: 'KPIs, usage and runtime pulse across the admin workspace.',
+    },
+    'admin-users': {
+        title: 'Users',
+        subtitle: 'Accounts, plans and moderation tools for the full user base.',
+    },
+    'admin-videos': {
+        title: 'Videos',
+        subtitle: 'Cross-user media inventory, review and operational controls.',
+    },
+    'admin-payments': {
+        title: 'Payments',
+        subtitle: 'Revenue records, invoices and payment state operations.',
+    },
+    'admin-plans': {
+        title: 'Plans',
+        subtitle: 'Subscription catalog management and offer maintenance.',
+    },
+    'admin-ad-templates': {
+        title: 'Ad Templates',
+        subtitle: 'VAST templates, ownership metadata and default assignments.',
+    },
+    'admin-popup-ads': {
+        title: 'Popup Ads',
+        subtitle: 'Popup campaigns, timing windows and cooldown controls across users.',
+    },
+    'admin-player-configs': {
+        title: 'Player Configs',
+        subtitle: 'Cross-user player presets, flags and default assignments.',
+    },
+    'admin-jobs': {
+        title: 'Jobs',
+        subtitle: 'Queue state, retries and runtime execution tracking.',
+    },
+    'admin-agents': {
+        title: 'Agents',
+        subtitle: 'Connected workers, health checks and maintenance actions.',
+    },
+    'admin-logs': {
+        title: 'Logs',
+        subtitle: 'Persisted output lookup and live runtime tailing.',
+    },
+}));
+</script>
diff --git a/src/routes/settings/admin/AdTemplates.vue b/src/routes/settings/admin/AdTemplates.vue
new file mode 100644
index 0000000..33bb06d
--- /dev/null
+++ b/src/routes/settings/admin/AdTemplates.vue
@@ -0,0 +1,539 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminInput from "./components/AdminInput.vue";
+import AdminSelect from "./components/AdminSelect.vue";
+import AdminTextarea from "./components/AdminTextarea.vue";
+import AdminTable from "./components/AdminTable.vue";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import { type ColumnDef } from "@tanstack/vue-table";
+import { computed, h, onMounted, reactive, ref } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminPlaceholderTable from "./components/AdminPlaceholderTable.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+type ListTemplatesResponse = Awaited<ReturnType<typeof rpcClient.listAdminAdTemplates>>;
+type AdminAdTemplateRow = NonNullable<ListTemplatesResponse["templates"]>[number];
+
+const formatOptions = ["pre-roll", "mid-roll", "post-roll"] as const;
+
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminAdTemplateRow[]>([]);
+const total = ref(0);
+const limit = ref(12);
+const page = ref(1);
+const selectedRow = ref<AdminAdTemplateRow | null>(null);
+const search = ref("");
+const appliedSearch = ref("");
+const ownerFilter = ref("");
+const appliedOwnerFilter = ref("");
+const createOpen = ref(false);
+const detailOpen = ref(false);
+const editOpen = ref(false);
+const deleteOpen = ref(false);
+
+const createForm = reactive({
+  userId: "",
+  name: "",
+  description: "",
+  vastTagUrl: "",
+  adFormat: "pre-roll",
+  duration: null as number | null,
+  isActive: true,
+  isDefault: false,
+});
+
+const editForm = reactive({
+  id: "",
+  userId: "",
+  name: "",
+  description: "",
+  vastTagUrl: "",
+  adFormat: "pre-roll",
+  duration: null as number | null,
+  isActive: true,
+  isDefault: false,
+});
+
+const canCreate = computed(() => createForm.userId.trim() && createForm.name.trim() && createForm.vastTagUrl.trim());
+const canUpdate = computed(() => editForm.id.trim() && editForm.userId.trim() && editForm.name.trim() && editForm.vastTagUrl.trim());
+const totalPages = computed(() => Math.max(1, Math.ceil((total.value || 0) / limit.value)));
+const summary = computed(() => [
+  { label: "Visible templates", value: rows.value.length },
+  { label: "Active", value: rows.value.filter((row) => row.isActive).length },
+  { label: "Default", value: rows.value.filter((row) => row.isDefault).length },
+  { label: "Total records", value: total.value },
+]);
+const selectedMeta = computed(() => {
+  if (!selectedRow.value) return [];
+  return [
+    { label: "Owner", value: selectedRow.value.ownerEmail || selectedRow.value.userId || "—" },
+    { label: "Format", value: selectedRow.value.adFormat || "—" },
+    { label: "Status", value: selectedRow.value.isActive ? "ACTIVE" : "INACTIVE" },
+    { label: "Default", value: selectedRow.value.isDefault ? "YES" : "NO" },
+    { label: "Duration", value: selectedRow.value.duration ? `${selectedRow.value.duration}s` : "—" },
+    { label: "Created", value: formatDate(selectedRow.value.createdAt) },
+  ];
+});
+
+const loadTemplates = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminAdTemplates({
+      page: page.value,
+      limit: limit.value,
+      userId: appliedOwnerFilter.value.trim() || undefined,
+      search: appliedSearch.value.trim() || undefined,
+    });
+    rows.value = response.templates ?? [];
+    total.value = response.total ?? rows.value.length;
+    limit.value = response.limit ?? limit.value;
+    page.value = response.page ?? page.value;
+    if (selectedRow.value?.id && (detailOpen.value || editOpen.value || deleteOpen.value)) {
+      const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+      if (fresh) selectedRow.value = fresh;
+    }
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin ad templates";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetCreateForm = () => {
+  createForm.userId = "";
+  createForm.name = "";
+  createForm.description = "";
+  createForm.vastTagUrl = "";
+  createForm.adFormat = "pre-roll";
+  createForm.duration = null;
+  createForm.isActive = true;
+  createForm.isDefault = false;
+};
+
+const closeDialogs = () => {
+  createOpen.value = false;
+  detailOpen.value = false;
+  editOpen.value = false;
+  deleteOpen.value = false;
+  actionError.value = null;
+};
+
+const applyFilters = async () => {
+  page.value = 1;
+  appliedSearch.value = search.value;
+  appliedOwnerFilter.value = ownerFilter.value;
+  await loadTemplates();
+};
+
+const openDetailDialog = (row: AdminAdTemplateRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  detailOpen.value = true;
+};
+
+const openEditDialog = (row: AdminAdTemplateRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  editForm.id = row.id || "";
+  editForm.userId = row.userId || "";
+  editForm.name = row.name || "";
+  editForm.description = row.description || "";
+  editForm.vastTagUrl = row.vastTagUrl || "";
+  editForm.adFormat = row.adFormat || "pre-roll";
+  editForm.duration = row.duration ?? null;
+  editForm.isActive = !!row.isActive;
+  editForm.isDefault = !!row.isDefault;
+  editOpen.value = true;
+};
+
+const openDeleteDialog = (row: AdminAdTemplateRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  deleteOpen.value = true;
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminAdTemplate({
+      userId: createForm.userId.trim(),
+      name: createForm.name.trim(),
+      description: createForm.description.trim() || undefined,
+      vastTagUrl: createForm.vastTagUrl.trim(),
+      adFormat: createForm.adFormat,
+      duration: createForm.duration == null ? undefined : createForm.duration,
+      isActive: createForm.isActive,
+      isDefault: createForm.isDefault,
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadTemplates();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to create ad template";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitEdit = async () => {
+  if (!canUpdate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminAdTemplate({
+      id: editForm.id,
+      userId: editForm.userId.trim(),
+      name: editForm.name.trim(),
+      description: editForm.description.trim() || undefined,
+      vastTagUrl: editForm.vastTagUrl.trim(),
+      adFormat: editForm.adFormat,
+      duration: editForm.duration == null ? undefined : editForm.duration,
+      isActive: editForm.isActive,
+      isDefault: editForm.isDefault,
+    });
+    editOpen.value = false;
+    await loadTemplates();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update ad template";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitDelete = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.deleteAdminAdTemplate({ id: selectedRow.value.id });
+    deleteOpen.value = false;
+    selectedRow.value = null;
+    if (page.value > 1 && rows.value.length === 1) page.value -= 1;
+    await loadTemplates();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to delete ad template";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const previousPage = async () => {
+  if (page.value <= 1) return;
+  page.value -= 1;
+  await loadTemplates();
+};
+
+const nextPage = async () => {
+  if (page.value >= totalPages.value) return;
+  page.value += 1;
+  await loadTemplates();
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+
+const columns = computed<ColumnDef<AdminAdTemplateRow>[]>(() => [
+  {
+    id: "template",
+    header: "Template",
+    accessorFn: row => row.name || "",
+    cell: ({ row }) => h("button", { class: "text-left", onClick: () => { openDetailDialog(row.original); } }, [
+      h("div", { class: "font-medium text-foreground" }, row.original.name),
+      h("div", { class: "mt-1 text-xs text-foreground/60" }, row.original.ownerEmail || row.original.userId || "No owner"),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "owner",
+    header: "Owner",
+    accessorFn: row => row.ownerEmail || row.userId || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.ownerEmail || row.original.userId || "—"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "format",
+    header: "Format",
+    accessorFn: row => row.adFormat || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.adFormat || "pre-roll"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessorFn: row => row.isActive ? "ACTIVE" : "INACTIVE",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.isActive ? "ACTIVE" : "INACTIVE"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "default",
+    header: "Default",
+    accessorFn: row => row.isDefault ? "YES" : "NO",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.isDefault ? "YES" : "NO"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => h("div", { class: "flex justify-end gap-2" }, [
+      h(AppButton, { size: "sm", variant: "secondary", onClick: () => openEditDialog(row.original) }, { default: () => "Edit" }),
+      h(AppButton, { size: "sm", variant: "danger", onClick: () => openDeleteDialog(row.original) }, { default: () => "Delete" }),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+]);
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Advertising',
+  badge: loading.value ? 'Syncing template inventory' : `${total.value} total templates`,
+  actions: [
+    {
+      label: 'Refresh',
+      variant: 'secondary',
+      loading: loading.value,
+      onClick: loadTemplates,
+    },
+    {
+      label: 'Create template',
+      onClick: () => {
+        actionError.value = null;
+        createOpen.value = true;
+      },
+    },
+  ],
+}));
+
+onMounted(loadTemplates);
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Filters" description="Search templates by name and narrow by owner reference if needed." bodyClass="p-5">
+        <div class="grid gap-3 xl:grid-cols-[minmax(0,1fr)_220px_auto] xl:items-end">
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Search</label>
+            <AdminInput v-model="search" placeholder="Search template name" @enter="applyFilters" />
+          </div>
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Owner reference</label>
+            <AdminInput v-model="ownerFilter" placeholder="Optional owner reference" @enter="applyFilters" />
+          </div>
+          <div class="flex items-center gap-2 xl:justify-end">
+            <AppButton size="sm" variant="ghost" @click="search = ''; ownerFilter = ''; appliedSearch = ''; appliedOwnerFilter = ''; loadTemplates()">Reset</AppButton>
+            <AppButton size="sm" variant="secondary" @click="applyFilters">Apply</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ error }}</div>
+
+      <AdminSectionCard v-else title="Templates" description="Reusable ad templates and ownership metadata." bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="6" :rows="4" />
+
+        <AdminTable
+          v-else
+          :data="rows"
+          :columns="columns"
+          :get-row-id="(row) => row.id || row.name || ''"
+          wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent"
+          tableClass="w-full"
+          headerRowClass="bg-muted/30"
+          bodyRowClass="border-b border-border hover:bg-muted/30"
+        >
+          <template #empty>
+            <div class="px-6 py-12 text-center">
+              <p class="mb-1 text-sm text-foreground/60">No templates matched the current filters.</p>
+              <p class="text-xs text-foreground/40">Try a broader template name or clear the owner filter.</p>
+            </div>
+          </template>
+        </AdminTable>
+
+        <div class="flex flex-col gap-3 border-t border-border bg-muted/20 px-6 py-4 md:flex-row md:items-center md:justify-between">
+          <div class="text-xs text-foreground/55">Page {{ page }} of {{ totalPages }} · {{ total }} records</div>
+          <div class="flex items-center gap-2">
+            <AppButton size="sm" variant="secondary" :disabled="page <= 1 || loading" @click="previousPage">Previous</AppButton>
+            <AppButton size="sm" variant="secondary" :disabled="page >= totalPages || loading" @click="nextPage">Next</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="detailOpen" title="Template details" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ selectedRow.name }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.ownerEmail || selectedRow.userId || 'No owner' }}</div>
+      </div>
+      <div class="grid gap-3">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+      <div class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+        <div class="text-[11px] font-medium text-foreground/55">VAST URL</div>
+        <div class="mt-2 break-all text-sm text-foreground/70">{{ selectedRow.vastTagUrl }}</div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openEditDialog(selectedRow)">Edit</AppButton>
+        <AppButton variant="danger" size="sm" @click="detailOpen = false; selectedRow && openDeleteDialog(selectedRow)">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="createOpen" title="Create ad template" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Owner user ID</label>
+          <AdminInput v-model="createForm.userId" placeholder="user-id" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Name</label>
+          <AdminInput v-model="createForm.name" placeholder="Preroll template" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="createForm.description" :rows="3" placeholder="Optional" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">VAST URL</label>
+          <AdminInput v-model="createForm.vastTagUrl" placeholder="https://..." />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Ad format</label>
+          <AdminSelect v-model="createForm.adFormat">
+            <option v-for="format in formatOptions" :key="format" :value="format">{{ format }}</option>
+          </AdminSelect>
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Duration</label>
+          <AdminInput v-model="createForm.duration" type="number" min="0" placeholder="Optional" />
+        </div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70">
+          <input v-model="createForm.isActive" type="checkbox" class="h-4 w-4" />
+          Active
+        </label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70">
+          <input v-model="createForm.isDefault" type="checkbox" class="h-4 w-4" />
+          Default
+        </label>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="editOpen" title="Edit ad template" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Owner user ID</label>
+          <AdminInput v-model="editForm.userId" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Name</label>
+          <AdminInput v-model="editForm.name" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="editForm.description" :rows="3" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">VAST URL</label>
+          <AdminInput v-model="editForm.vastTagUrl" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Ad format</label>
+          <AdminSelect v-model="editForm.adFormat">
+            <option v-for="format in formatOptions" :key="format" :value="format">{{ format }}</option>
+          </AdminSelect>
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Duration</label>
+          <AdminInput v-model="editForm.duration" type="number" min="0" placeholder="Optional" />
+        </div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70">
+          <input v-model="editForm.isActive" type="checkbox" class="h-4 w-4" />
+          Active
+        </label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70">
+          <input v-model="editForm.isDefault" type="checkbox" class="h-4 w-4" />
+          Default
+        </label>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdate" @click="submitEdit">Save</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="deleteOpen" title="Delete ad template" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Delete ad template <span class="font-medium">{{ selectedRow?.name || 'this template' }}</span>.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton variant="danger" size="sm" :loading="submitting" @click="submitDelete">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/Agents.vue b/src/routes/settings/admin/Agents.vue
new file mode 100644
index 0000000..85d67bb
--- /dev/null
+++ b/src/routes/settings/admin/Agents.vue
@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminTable from "./components/AdminTable.vue";
+import { useAdminRuntimeMqtt } from "@/composables/useAdminRuntimeMqtt";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import type { ColumnDef } from "@tanstack/vue-table";
+import { computed, h, onMounted, ref } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminPlaceholderTable from "./components/AdminPlaceholderTable.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+type ListAgentsResponse = Awaited<ReturnType<typeof rpcClient.listAdminAgents>>;
+type AdminAgentRow = NonNullable<ListAgentsResponse["agents"]>[number];
+
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminAgentRow[]>([]);
+const selectedRow = ref<AdminAgentRow | null>(null);
+const detailOpen = ref(false);
+const restartOpen = ref(false);
+const updateOpen = ref(false);
+let reloadAgentsTimer: ReturnType<typeof setTimeout> | null = null;
+
+const summary = computed(() => [
+  { label: "Agents", value: rows.value.length },
+  { label: "Online", value: rows.value.filter((row) => matchesStatus(row.status, ["online", "active"])).length },
+  { label: "Busy", value: rows.value.reduce((sum, row) => sum + getActiveJobCount(row), 0) },
+  { label: "Total capacity", value: rows.value.reduce((sum, row) => sum + Number(row.capacity ?? 0), 0) },
+]);
+const selectedMeta = computed(() => {
+  if (!selectedRow.value) return [];
+  return [
+    { label: "Status", value: selectedRow.value.status || "—" },
+    { label: "Platform", value: selectedRow.value.platform || "—" },
+    { label: "Version", value: selectedRow.value.version || "—" },
+    { label: "Capacity", value: String(selectedRow.value.capacity ?? 0) },
+    { label: "Active jobs", value: String(getActiveJobCount(selectedRow.value)) },
+    { label: "Heartbeat", value: formatDate(selectedRow.value.lastHeartbeat) },
+  ];
+});
+
+const matchesStatus = (value: string | undefined, candidates: string[]) => candidates.includes(String(value || "").toLowerCase());
+const getActiveJobCount = (row: AdminAgentRow) => Number((row as AdminAgentRow & { activeJobCount?: number; active_job_count?: number }).activeJobCount ?? (row as AdminAgentRow & { activeJobCount?: number; active_job_count?: number }).active_job_count ?? 0);
+
+const loadAgents = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminAgents();
+    rows.value = response.agents ?? [];
+    if (selectedRow.value?.id) {
+      const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+      if (fresh) selectedRow.value = fresh;
+    }
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin agents";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const closeDialogs = () => {
+  detailOpen.value = false;
+  restartOpen.value = false;
+  updateOpen.value = false;
+  actionError.value = null;
+};
+
+const scheduleAgentsReload = () => {
+  if (loading.value) return;
+  if (reloadAgentsTimer) clearTimeout(reloadAgentsTimer);
+  reloadAgentsTimer = setTimeout(() => {
+    reloadAgentsTimer = null;
+    loadAgents();
+  }, 300);
+};
+
+const openDetailDialog = (row: AdminAgentRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  detailOpen.value = true;
+};
+
+const openRestartDialog = (row: AdminAgentRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  restartOpen.value = true;
+};
+
+const openUpdateDialog = (row: AdminAgentRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  updateOpen.value = true;
+};
+
+const submitRestart = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.restartAdminAgent({ id: selectedRow.value.id });
+    restartOpen.value = false;
+    await loadAgents();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to restart agent";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitUpdate = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminAgent({ id: selectedRow.value.id });
+    updateOpen.value = false;
+    await loadAgents();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update agent";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+
+const formatCpu = (value?: number) => `${Number(value ?? 0).toFixed(1)}%`;
+const formatRam = (value?: number) => `${Number(value ?? 0).toFixed(1)} MB`;
+
+const statusBadgeClass = (status?: string) => {
+  const normalized = String(status || "").toLowerCase();
+  if (["online", "active"].includes(normalized)) return "border-emerald-200 bg-emerald-50 text-emerald-700";
+  if (["busy", "updating"].includes(normalized)) return "border-amber-200 bg-amber-50 text-amber-700";
+  if (["offline", "error", "failed"].includes(normalized)) return "border-rose-200 bg-rose-50 text-rose-700";
+  return "border-border bg-muted/40 text-foreground/70";
+};
+
+
+const columns = computed<ColumnDef<AdminAgentRow>[]>(() => [
+  {
+    id: "agent",
+    header: "Agent",
+    accessorFn: row => row.name || row.id || "",
+    cell: ({ row }) => h("button", { class: "text-left", onClick: () => { openDetailDialog(row.original); } }, [
+      h("div", { class: "font-medium text-foreground" }, row.original.name || "Unnamed agent"),
+      h("div", { class: "mt-1 text-xs text-foreground/60" }, row.original.id),
+      h("div", { class: "mt-1 text-xs text-foreground/60" }, `${row.original.platform || "—"} · ${row.original.backend || "—"} · ${row.original.version || "—"}`),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessorFn: row => row.status || "",
+    cell: ({ row }) => h("span", {
+      class: ["inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ", statusBadgeClass(row.original.status)],
+    }, row.original.status || "UNKNOWN"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "capacity",
+    header: "Capacity",
+    accessorFn: row => Number(row.capacity ?? 0),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, String(row.original.capacity ?? 0)),
+    meta: { headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50", cellClass: "px-4 py-3 text-right" },
+  },
+  {
+    id: "activeJobCount",
+    header: "Active jobs",
+    accessorFn: row => getActiveJobCount(row),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, String(getActiveJobCount(row.original))),
+    meta: { headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50", cellClass: "px-4 py-3 text-right" },
+  },
+  {
+    id: "cpu",
+    header: "CPU",
+    accessorFn: row => Number(row.cpu ?? 0),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, formatCpu(row.original.cpu)),
+    meta: { headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50", cellClass: "px-4 py-3 text-right" },
+  },
+  {
+    id: "ram",
+    header: "RAM",
+    accessorFn: row => Number(row.ram ?? 0),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, formatRam(row.original.ram)),
+    meta: { headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50", cellClass: "px-4 py-3 text-right" },
+  },
+  {
+    id: "heartbeat",
+    header: "Heartbeat",
+    accessorFn: row => row.lastHeartbeat || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/60" }, formatDate(row.original.lastHeartbeat)),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => h("div", { class: "flex justify-end gap-2" }, [
+      h(AppButton, { size: "sm", variant: "secondary", onClick: () => openUpdateDialog(row.original) }, { default: () => "Update" }),
+      h(AppButton, { size: "sm", variant: "danger", onClick: () => openRestartDialog(row.original) }, { default: () => "Restart" }),
+    ]),
+    meta: { headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50", cellClass: "px-4 py-3 text-right" },
+  },
+]);
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Workers',
+  badge: loading.value ? 'Syncing agent fleet' : `${rows.value.length} agents tracked`,
+  actions: [
+    {
+      label: 'Refresh',
+      variant: 'secondary',
+      loading: loading.value,
+      onClick: loadAgents,
+    },
+  ],
+}));
+
+useAdminRuntimeMqtt(({ topic, payload }) => {
+  if (topic !== "picpic/events") return;
+
+  if (payload?.type === "agent_update") {
+    const update = payload.payload;
+    if (!update?.id) return;
+    const row = rows.value.find((item) => item.id === update.id);
+    if (row) {
+      Object.assign(row, {
+        ...row,
+        ...update,
+        lastHeartbeat: update.last_heartbeat || row.lastHeartbeat,
+        createdAt: update.created_at || row.createdAt,
+        updatedAt: update.updated_at || row.updatedAt,
+      });
+    } else {
+      loadAgents();
+    }
+  }
+
+  if (payload?.type === "resource_update") {
+    const update = payload.payload;
+    if (!update?.agent_id) return;
+    const row = rows.value.find((item) => item.id === update.agent_id);
+    if (row) {
+      row.cpu = update.cpu ?? row.cpu;
+      row.ram = update.ram ?? row.ram;
+      row.lastHeartbeat = new Date().toISOString();
+      row.status = row.status || "online";
+    }
+  }
+
+  if (payload?.type === "job_update") {
+    scheduleAgentsReload();
+  }
+});
+
+onMounted(loadAgents);
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ error }}</div>
+
+      <AdminSectionCard v-else title="Agents" :description="`${rows.length} agents connected`" bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="8" :rows="4" />
+
+        <AdminTable
+          v-else
+          :data="rows"
+          :columns="columns"
+          :get-row-id="(row) => row.id || row.name || ''"
+          wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent"
+          tableClass="w-full"
+          headerRowClass="bg-muted/30"
+          bodyRowClass="border-b border-border hover:bg-muted/30"
+        >
+          <template #empty>
+            <div class="px-6 py-12 text-center">
+              <p class="mb-1 text-sm text-foreground/60">No agents connected.</p>
+              <p class="text-xs text-foreground/40">Workers will appear here when they register with the admin runtime.</p>
+            </div>
+          </template>
+        </AdminTable>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="detailOpen" title="Agent details" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ selectedRow.name || 'Unnamed agent' }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.platform || 'Unknown platform' }} · {{ selectedRow.backend || 'Unknown backend' }}</div>
+      </div>
+
+      <div class="grid gap-3">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">CPU</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ formatCpu(selectedRow.cpu) }}</div>
+        </div>
+        <div class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">RAM</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ formatRam(selectedRow.ram) }}</div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openUpdateDialog(selectedRow)">Update</AppButton>
+        <AppButton variant="danger" size="sm" @click="detailOpen = false; selectedRow && openRestartDialog(selectedRow)">Restart</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="restartOpen" title="Restart agent" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Send restart command to <span class="font-medium">{{ selectedRow?.name || 'this agent' }}</span>.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Back</AppButton>
+        <AppButton variant="danger" size="sm" :loading="submitting" @click="submitRestart">Restart</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="updateOpen" title="Update agent" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Send update command to <span class="font-medium">{{ selectedRow?.name || 'this agent' }}</span>.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Back</AppButton>
+        <AppButton size="sm" :loading="submitting" @click="submitUpdate">Update</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/Jobs.vue b/src/routes/settings/admin/Jobs.vue
new file mode 100644
index 0000000..cdc9559
--- /dev/null
+++ b/src/routes/settings/admin/Jobs.vue
@@ -0,0 +1,613 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminInput from "./components/AdminInput.vue";
+import AdminTextarea from "./components/AdminTextarea.vue";
+import AdminTable from "./components/AdminTable.vue";
+import { useAdminRuntimeMqtt } from "@/composables/useAdminRuntimeMqtt";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import { type ColumnDef } from "@tanstack/vue-table";
+import { computed, h, onMounted, reactive, ref } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminPlaceholderTable from "./components/AdminPlaceholderTable.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+type ListJobsResponse = Awaited<ReturnType<typeof rpcClient.listAdminJobs>>;
+type AdminJobRow = NonNullable<ListJobsResponse["jobs"]>[number];
+
+const loading = ref(true);
+const loadingMore = ref(false);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminJobRow[]>([]);
+const nextCursor = ref<string | undefined>(undefined);
+const hasMore = ref(false);
+const selectedRow = ref<AdminJobRow | null>(null);
+const selectedLogs = ref("");
+const activeAgentFilter = ref("");
+const appliedAgentFilter = ref("");
+const search = ref("");
+const createOpen = ref(false);
+const detailOpen = ref(false);
+const logsOpen = ref(false);
+const cancelOpen = ref(false);
+const retryOpen = ref(false);
+
+const createForm = reactive({
+  command: "",
+  image: "alpine",
+  userId: "",
+  name: "",
+  timeLimit: 0,
+  priority: 0,
+  envText: "",
+});
+
+const parseEnvText = (value: string) =>
+  value
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .reduce<Record<string, string>>((acc, line) => {
+      const separatorIndex = line.indexOf("=");
+      if (separatorIndex === -1) return acc;
+      const key = line.slice(0, separatorIndex).trim();
+      const val = line.slice(separatorIndex + 1).trim();
+      if (key) acc[key] = val;
+      return acc;
+    }, {});
+
+const hasEnv = computed(() => Object.keys(parseEnvText(createForm.envText)).length > 0);
+const canCreate = computed(() => createForm.command.trim().length > 0);
+const filteredRows = computed(() => {
+  const keyword = search.value.trim().toLowerCase();
+  if (!keyword) return rows.value;
+  return rows.value.filter((row) => {
+    return [row.name, row.status]
+      .map((value) => String(value || "").toLowerCase())
+      .some((value) => value.includes(keyword));
+  });
+});
+const summary = computed(() => [
+  { label: "Visible jobs", value: filteredRows.value.length },
+  { label: "Running", value: rows.value.filter((row) => matchesStatus(row.status, ["running", "processing"])).length },
+  { label: "Queued", value: rows.value.filter((row) => matchesStatus(row.status, ["pending", "queued"])).length },
+  { label: "Failures", value: rows.value.filter((row) => matchesStatus(row.status, ["failure", "failed", "cancelled"])).length },
+]);
+const selectedMeta = computed(() => {
+  if (!selectedRow.value) return [];
+  return [
+    { label: "Status", value: selectedRow.value.status || "—" },
+    { label: "Agent", value: selectedRow.value.agentId || "Unassigned" },
+    { label: "Priority", value: String(selectedRow.value.priority ?? 0) },
+    { label: "Progress", value: formatProgress(selectedRow.value.progress) },
+    { label: "Owner", value: selectedRow.value.userId || "—" },
+    { label: "Updated", value: formatDate(selectedRow.value.updatedAt) },
+  ];
+});
+
+const matchesStatus = (value: string | undefined, candidates: string[]) => {
+  const normalized = String(value || "").toLowerCase();
+  return candidates.includes(normalized);
+};
+
+const isCancelable = (row?: AdminJobRow | null) => matchesStatus(row?.status, ["pending", "queued", "running", "processing"]);
+const isRetryable = (row?: AdminJobRow | null) => matchesStatus(row?.status, ["failure", "failed", "cancelled"]);
+
+const resetCreateForm = () => {
+  createForm.command = "";
+  createForm.image = "alpine";
+  createForm.userId = "";
+  createForm.name = "";
+  createForm.timeLimit = 0;
+  createForm.priority = 0;
+  createForm.envText = "";
+};
+
+const closeDialogs = () => {
+  createOpen.value = false;
+  detailOpen.value = false;
+  logsOpen.value = false;
+  cancelOpen.value = false;
+  retryOpen.value = false;
+  actionError.value = null;
+};
+
+const syncSelectedRow = () => {
+  if (!selectedRow.value?.id) return;
+  const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+  if (fresh && (detailOpen.value || logsOpen.value || cancelOpen.value || retryOpen.value)) selectedRow.value = fresh;
+};
+
+const loadJobs = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminJobs({
+      cursor: undefined,
+      pageSize: 50,
+      agentId: appliedAgentFilter.value.trim() || undefined,
+    });
+    rows.value = response.jobs ?? [];
+    nextCursor.value = response.nextCursor || undefined;
+    hasMore.value = Boolean(response.hasMore);
+    syncSelectedRow();
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin jobs";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadMoreJobs = async () => {
+  if (loading.value || loadingMore.value || !hasMore.value || !nextCursor.value) return;
+  loadingMore.value = true;
+  actionError.value = null;
+  try {
+    const response = await rpcClient.listAdminJobs({
+      cursor: nextCursor.value,
+      pageSize: 50,
+      agentId: appliedAgentFilter.value.trim() || undefined,
+    });
+    rows.value = [...rows.value, ...(response.jobs ?? [])];
+    nextCursor.value = response.nextCursor || undefined;
+    hasMore.value = Boolean(response.hasMore);
+    syncSelectedRow();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to load more jobs";
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+const applyFilters = async () => {
+  appliedAgentFilter.value = activeAgentFilter.value;
+  nextCursor.value = undefined;
+  hasMore.value = false;
+  await loadJobs();
+};
+
+const loadSelectedLogs = async (jobId: string) => {
+  const response = await rpcClient.getAdminJobLogs({ id: jobId });
+  selectedLogs.value = response.logs || "No logs available.";
+};
+
+const openDetailDialog = async (row: AdminJobRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  selectedLogs.value = "Loading logs...";
+  detailOpen.value = true;
+  try {
+    await loadSelectedLogs(row.id);
+  } catch {
+    selectedLogs.value = "No logs available.";
+  }
+};
+
+const openLogsDialog = async (row: AdminJobRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  selectedLogs.value = "Loading logs...";
+  logsOpen.value = true;
+  try {
+    await loadSelectedLogs(row.id);
+  } catch (err: any) {
+    selectedLogs.value = "";
+    actionError.value = err?.message || "Failed to load job logs";
+  }
+};
+
+const openCancelDialog = (row: AdminJobRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  cancelOpen.value = true;
+};
+
+const openRetryDialog = (row: AdminJobRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  retryOpen.value = true;
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminJob({
+      command: createForm.command.trim(),
+      image: createForm.image.trim() || undefined,
+      userId: createForm.userId.trim() || undefined,
+      name: createForm.name.trim() || undefined,
+      timeLimit: createForm.timeLimit > 0 ? createForm.timeLimit : undefined,
+      priority: createForm.priority,
+      env: hasEnv.value ? parseEnvText(createForm.envText) : undefined,
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadJobs();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to create job";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitCancel = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.cancelAdminJob({ id: selectedRow.value.id });
+    cancelOpen.value = false;
+    await loadJobs();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to cancel job";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitRetry = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.retryAdminJob({ id: selectedRow.value.id });
+    retryOpen.value = false;
+    await loadJobs();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to retry job";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+
+const formatProgress = (value?: number) => `${Number(value ?? 0).toFixed(2)}%`;
+
+const statusBadgeClass = (status?: string) => {
+  const normalized = String(status || "").toLowerCase();
+  if (["success", "completed", "done"].includes(normalized)) return "border-emerald-200 bg-emerald-50 text-emerald-700";
+  if (["running", "processing"].includes(normalized)) return "border-sky-200 bg-sky-50 text-sky-700";
+  if (["pending", "queued"].includes(normalized)) return "border-amber-200 bg-amber-50 text-amber-700";
+  if (["failure", "failed", "cancelled"].includes(normalized)) return "border-rose-200 bg-rose-50 text-rose-700";
+  return "border-border bg-muted/40 text-foreground/70";
+};
+
+const columns = computed<ColumnDef<AdminJobRow>[]>(() => [
+  {
+    id: "job",
+    header: "Job",
+    accessorFn: row => row.name || row.id || "",
+    cell: ({ row }) => h("button", { class: "text-left", onClick: () => { openDetailDialog(row.original); } }, [
+      h("div", { class: "font-medium text-foreground" }, row.original.name || "Untitled job"),
+      h("div", { class: "mt-1 text-xs text-foreground/60" }, row.original.status || "Unknown status"),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessorFn: row => row.status || "",
+    cell: ({ row }) => h("span", {
+      class: ["inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ", statusBadgeClass(row.original.status)],
+    }, row.original.status || "UNKNOWN"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "agent",
+    header: "Agent",
+    accessorFn: row => row.agentId || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.agentId || "Unassigned"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "priority",
+    header: "Priority",
+    accessorFn: row => Number(row.priority ?? 0),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, String(row.original.priority ?? 0)),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+  {
+    id: "progress",
+    header: "Progress",
+    accessorFn: row => Number(row.progress ?? 0),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, formatProgress(row.original.progress)),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+  {
+    id: "updated",
+    header: "Updated",
+    accessorFn: row => row.updatedAt || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/60" }, formatDate(row.original.updatedAt)),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => h("div", { class: "flex justify-end gap-2" }, [
+      h(AppButton, { size: "sm", variant: "secondary", onClick: () => openLogsDialog(row.original) }, { default: () => "Logs" }),
+      ...(isRetryable(row.original)
+        ? [h(AppButton, { size: "sm", onClick: () => openRetryDialog(row.original) }, { default: () => "Retry" })]
+        : []),
+      ...(isCancelable(row.original)
+        ? [h(AppButton, { size: "sm", variant: "danger", onClick: () => openCancelDialog(row.original) }, { default: () => "Cancel" })]
+        : []),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+]);
+
+useAdminRuntimeMqtt(({ topic, payload }) => {
+  if (topic.startsWith("picpic/job/") && payload?.type === "job_update") {
+    const update = payload.payload;
+    const jobId = update?.job_id;
+    const status = update?.status;
+    if (!jobId || !status) return;
+    const row = rows.value.find((item) => item.id === jobId);
+    if (row) {
+      row.status = status;
+      row.updatedAt = new Date().toISOString();
+    } else {
+      loadJobs();
+    }
+  }
+
+  if (topic.startsWith("picpic/logs/") && payload?.job_id) {
+    const row = rows.value.find((item) => item.id === payload.job_id);
+    if (row && typeof payload.line === "string") {
+      row.progress = payload.progress ?? row.progress;
+      row.updatedAt = new Date().toISOString();
+    }
+    if (selectedRow.value?.id === payload.job_id && typeof payload.line === "string") {
+      const nextLine = payload.line.endsWith("\n") ? payload.line : `${payload.line}\n`;
+      selectedLogs.value = `${selectedLogs.value === "Loading logs..." || selectedLogs.value === "No logs available." ? "" : selectedLogs.value}${nextLine}`;
+      selectedRow.value.progress = payload.progress ?? selectedRow.value.progress;
+      selectedRow.value.updatedAt = new Date().toISOString();
+    }
+  }
+
+  if (topic === "picpic/events" && payload?.type === "resource_update") {
+    const update = payload.payload;
+    if (!update?.agent_id) return;
+    rows.value.forEach((row) => {
+      if (row.agentId === update.agent_id) {
+        row.updatedAt = new Date().toISOString();
+      }
+    });
+  }
+});
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Runtime',
+  badge: loading.value ? 'Polling queue state' : `${rows.value.length} jobs loaded`,
+  actions: [
+    {
+      label: 'Refresh',
+      variant: 'secondary',
+      loading: loading.value,
+      onClick: loadJobs,
+    },
+    {
+      label: 'Create job',
+      onClick: () => {
+        actionError.value = null;
+        createOpen.value = true;
+      },
+    },
+  ],
+}));
+
+onMounted(loadJobs);
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Filters" description="Find jobs by name or status, then narrow the list by assigned agent if needed." bodyClass="p-5">
+        <div class="grid gap-3 xl:grid-cols-[220px_minmax(0,1fr)_auto] xl:items-end">
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Assigned agent</label>
+            <AdminInput v-model="activeAgentFilter" placeholder="Optional agent reference" @enter="applyFilters" />
+          </div>
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Search</label>
+            <AdminInput v-model="search" placeholder="Search by job name or status" />
+          </div>
+          <div class="flex items-center gap-2 xl:justify-end">
+            <AppButton size="sm" variant="ghost" @click="activeAgentFilter = ''; appliedAgentFilter = ''; search = ''; nextCursor = undefined; hasMore = false; loadJobs()">Reset</AppButton>
+            <AppButton size="sm" variant="secondary" @click="applyFilters">Apply</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ error }}</div>
+
+      <AdminSectionCard v-else title="Jobs" description="Current queue state and operator actions." bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="7" :rows="4" />
+
+        <div v-else>
+          <AdminTable
+            :data="filteredRows"
+            :columns="columns"
+            :get-row-id="(row) => row.id || row.name || ''"
+            wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent"
+            tableClass="w-full"
+            headerRowClass="bg-muted/30"
+            bodyRowClass="border-b border-border hover:bg-muted/30"
+          >
+            <template #empty>
+              <div class="px-6 py-12 text-center">
+                <p class="mb-1 text-sm text-foreground/60">No jobs matched the current filters.</p>
+                <p class="text-xs text-foreground/40">Try a broader job name or clear the agent filter.</p>
+              </div>
+            </template>
+          </AdminTable>
+
+          <div class="flex items-center justify-between gap-3 border-t border-border px-4 py-3">
+            <p class="text-xs text-foreground/50">{{ hasMore ? 'More jobs available.' : 'Showing the latest jobs.' }}</p>
+            <AppButton v-if="hasMore" size="sm" variant="secondary" :loading="loadingMore" @click="loadMoreJobs">Load more</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="detailOpen" title="Job details" maxWidthClass="max-w-3xl" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ selectedRow.name || 'Untitled job' }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.status || 'Unknown status' }}</div>
+      </div>
+
+      <div class="grid gap-3 md:grid-cols-2">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-slate-200 bg-slate-950 px-4 py-3">
+        <div class="flex items-center justify-between gap-2 text-[11px]  text-slate-400">
+          <span>Live logs</span>
+          <button type="button" class="text-slate-300 transition hover:text-white" @click="selectedRow && openLogsDialog(selectedRow)">Open full logs</button>
+        </div>
+        <pre class="mt-3 max-h-72 overflow-auto whitespace-pre-wrap break-words text-xs leading-5 text-emerald-300">{{ selectedLogs || 'No logs available.' }}</pre>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton v-if="selectedRow && isRetryable(selectedRow)" size="sm" @click="detailOpen = false; openRetryDialog(selectedRow)">Retry</AppButton>
+        <AppButton v-if="selectedRow && isCancelable(selectedRow)" variant="danger" size="sm" @click="detailOpen = false; openCancelDialog(selectedRow)">Cancel</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="createOpen" title="Create job" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Command</label>
+          <AdminTextarea v-model="createForm.command" rows="4" placeholder="ffmpeg -i ..." />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Image</label>
+          <AdminInput v-model="createForm.image" placeholder="alpine" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Owner user ID</label>
+          <AdminInput v-model="createForm.userId" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Display name</label>
+          <AdminInput v-model="createForm.name" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Priority</label>
+          <AdminInput v-model="createForm.priority" type="number" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Time limit</label>
+          <AdminInput v-model="createForm.timeLimit" type="number" min="0" placeholder="Seconds" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Environment</label>
+          <AdminTextarea v-model="createForm.envText" rows="5" placeholder="KEY=value per line" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="logsOpen" title="Job logs" maxWidthClass="max-w-4xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="rounded-lg border border-slate-200 bg-slate-950 p-4 font-mono text-xs text-emerald-300 whitespace-pre-wrap max-h-140 overflow-auto">
+        {{ selectedLogs || 'No logs available.' }}
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="closeDialogs">Close</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="cancelOpen" title="Cancel job" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Cancel <span class="font-medium">{{ selectedRow?.name || 'this job' }}</span>.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Back</AppButton>
+        <AppButton variant="danger" size="sm" :loading="submitting" @click="submitCancel">Cancel job</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="retryOpen" title="Retry job" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Retry <span class="font-medium">{{ selectedRow?.name || 'this job' }}</span>.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Back</AppButton>
+        <AppButton size="sm" :loading="submitting" @click="submitRetry">Retry</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/Layout.vue b/src/routes/settings/admin/Layout.vue
new file mode 100644
index 0000000..c72ad12
--- /dev/null
+++ b/src/routes/settings/admin/Layout.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue';
+import { useRoute } from 'vue-router';
+import PageHeader from "@/components/dashboard/PageHeader.vue"
+import { adminPageHeaderKey, createAdminPageHeaderState } from './components/useAdminPageHeader';
+
+const route = useRoute();
+const pageHeader = createAdminPageHeaderState();
+
+provide(adminPageHeaderKey, pageHeader);
+
+const menuSections = [
+  {
+    title: 'Workspace',
+    items: [
+      { to: '/admin/overview', label: 'Overview', description: 'KPIs, usage and runtime pulse' },
+      { to: '/admin/users', label: 'Users', description: 'Accounts, plans and moderation' },
+      { to: '/admin/videos', label: 'Videos', description: 'Cross-user media inventory' },
+      { to: '/admin/payments', label: 'Payments', description: 'Revenue, invoices and state changes' },
+      { to: '/admin/plans', label: 'Plans', description: 'Catalog and subscription offers' },
+    ],
+  },
+  {
+    title: 'Operations',
+    items: [
+      { to: '/admin/ad-templates', label: 'Ad Templates', description: 'VAST templates and defaults' },
+      { to: '/admin/player-configs', label: 'Player Configs', description: 'Cross-user player presets and defaults' },
+      { to: '/admin/jobs', label: 'Jobs', description: 'Queue, retries and live logs' },
+      { to: '/admin/agents', label: 'Agents', description: 'Workers, health and maintenance' },
+      { to: '/admin/logs', label: 'Logs', description: 'Direct runtime log lookup' },
+    ],
+  },
+] as const;
+
+const matchesItem = (to: string) => route.path === to || route.path.startsWith(`${to}/`);
+
+const activeSection = computed(() => {
+  const allSections = menuSections.map((section) => section.items).flat();
+  return allSections.find((section) => matchesItem(section.to)) ?? allSections[0];
+});
+
+const activeMenuGroup = computed(() => {
+  return menuSections.find((section) => section.items.some((item) => matchesItem(item.to))) ?? menuSections[0];
+});
+
+const breadcrumbs = computed(() => [
+  { label: 'Dashboard', to: '/overview' },
+  { label: 'Admin', to: '/admin/overview' },
+  ...(activeSection.value ? [{ label: activeSection.value.label }] : []),
+]);
+
+const content = computed(() => ({
+  'admin-overview': {
+    title: 'Overview',
+    subtitle: 'KPIs, usage and runtime pulse across the admin workspace.',
+  },
+  'admin-users': {
+    title: 'Users',
+    subtitle: 'Accounts, plans and moderation tools for the full user base.',
+  },
+  'admin-videos': {
+    title: 'Videos',
+    subtitle: 'Cross-user media inventory, review and operational controls.',
+  },
+  'admin-payments': {
+    title: 'Payments',
+    subtitle: 'Revenue records, invoices and payment state operations.',
+  },
+  'admin-plans': {
+    title: 'Plans',
+    subtitle: 'Subscription catalog management and offer maintenance.',
+  },
+  'admin-ad-templates': {
+    title: 'Ad Templates',
+    subtitle: 'VAST templates, ownership metadata and default assignments.',
+  },
+  'admin-player-configs': {
+    title: 'Player Configs',
+    subtitle: 'Cross-user player presets, flags and default assignments.',
+  },
+  'admin-jobs': {
+    title: 'Jobs',
+    subtitle: 'Queue state, retries and runtime execution tracking.',
+  },
+  'admin-agents': {
+    title: 'Agents',
+    subtitle: 'Connected workers, health checks and maintenance actions.',
+  },
+  'admin-logs': {
+    title: 'Logs',
+    subtitle: 'Persisted output lookup and live runtime tailing.',
+  },
+}));
+</script>
+
+<template>
+  <section class="space-y-5">
+    <div class="space-y-3">
+      <PageHeader
+        :title="content[route.name as keyof typeof content]?.title || 'Workspace administration'"
+        :description="content[route.name as keyof typeof content]?.subtitle || 'settings.content.fallbackSubtitle'"
+        :breadcrumbs="breadcrumbs"
+    />
+    </div>
+
+    <div class="mx-auto max-w-[1440px] pb-10">
+      <div class="grid gap-6 xl:grid-cols-[232px_minmax(0,1fr)] xl:items-start">
+        <aside class="md:w-56 shrink-0">
+                <nav class="space-y-6">
+                    <div v-for="section in menuSections" :key="section.title">
+                        <h3 v-if="section.title" class="text-xs font-semibold text-foreground/50 uppercase tracking-wider mb-2 pl-3">
+                            {{ section.title }}
+                        </h3>
+                        <ul class="space-y-0.5">
+                            <li v-for="item in section.items" :key="item.to">
+                                <router-link
+                                    :to="item.to"
+                                    :class="[
+                                        'w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all duration-150',
+                                        matchesItem(item.to)
+                                            ? 'bg-primary/10 text-primary font-semibold'
+                                                : 'text-foreground/70 hover:bg-header hover:text-foreground'
+                                    ]"
+                                >
+                                    <component :is="item.icon" class="w-5 h-5 shrink-0" :filled="currentTab === item.value" />
+                                    {{ item.label }}
+                                </router-link>
+                            </li>
+                        </ul>
+                    </div>
+                </nav>
+            </aside>
+
+        <main class="min-w-0">
+          <router-view />
+        </main>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/routes/settings/admin/Logs.vue b/src/routes/settings/admin/Logs.vue
new file mode 100644
index 0000000..162e77c
--- /dev/null
+++ b/src/routes/settings/admin/Logs.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AdminInput from "./components/AdminInput.vue";
+import { useAdminRuntimeMqtt } from "@/composables/useAdminRuntimeMqtt";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import { computed, ref } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+const jobId = ref("");
+const activeJobId = ref("");
+const logs = ref("Enter a job ID and load logs.");
+const liveLineCount = ref(0);
+
+const countLogLines = (value: string) => value.split("\n").filter(Boolean).length;
+
+const summary = computed(() => [
+  { label: "Tracking job", value: activeJobId.value || "—" },
+  { label: "Live lines", value: liveLineCount.value },
+]);
+
+const activeChannel = computed(() => activeJobId.value ? `picpic/logs/${activeJobId.value}` : "No active stream");
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Diagnostics',
+  badge: activeJobId.value ? `Streaming ${activeJobId.value}` : 'Awaiting job selection',
+  actions: [
+    {
+      label: 'Fetch logs',
+      variant: 'secondary',
+      loading: loading.value,
+      disabled: !jobId.trim(),
+      onClick: loadLogs,
+    },
+  ],
+}));
+
+const loadLogs = async () => {
+  if (!jobId.value.trim()) return;
+  loading.value = true;
+  error.value = null;
+  try {
+    activeJobId.value = jobId.value.trim();
+    const response = await rpcClient.getAdminJobLogs({ id: activeJobId.value });
+    logs.value = response.logs || "No logs available.";
+    liveLineCount.value = logs.value === "No logs available." ? 0 : countLogLines(logs.value);
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load logs";
+    logs.value = "";
+    activeJobId.value = "";
+    liveLineCount.value = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const clearLogs = () => {
+  jobId.value = "";
+  activeJobId.value = "";
+  error.value = null;
+  logs.value = "Enter a job ID and load logs.";
+  liveLineCount.value = 0;
+};
+
+useAdminRuntimeMqtt(({ topic, payload }) => {
+  if (!activeJobId.value) return;
+  if (topic === `picpic/logs/${activeJobId.value}` && payload?.job_id === activeJobId.value && typeof payload.line === "string") {
+    const nextLine = payload.line.endsWith("\n") ? payload.line : `${payload.line}\n`;
+    logs.value = `${logs.value === "Enter a job ID and load logs." || logs.value === "No logs available." ? "" : logs.value}${nextLine}`;
+    liveLineCount.value += countLogLines(nextLine);
+  }
+});
+
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Log session" description="Load persisted logs once, then keep appending live lines for the same job." bodyClass="p-5">
+        <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Job ID</label>
+            <AdminInput v-model="jobId" placeholder="job-..." @enter="loadLogs" />
+          </div>
+          <div class="flex items-center gap-2">
+            <AppButton size="sm" variant="ghost" @click="clearLogs">Reset</AppButton>
+            <AppButton size="sm" variant="secondary" :loading="loading" @click="loadLogs">Fetch</AppButton>
+          </div>
+        </div>
+
+        <div class="mt-4 grid gap-3 md:grid-cols-2">
+          <div class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+            <div class="text-[11px] font-medium text-foreground/55">Current channel</div>
+            <div class="mt-1 break-all text-sm font-medium text-foreground">{{ activeChannel }}</div>
+          </div>
+          <div class="rounded-lg border border-border bg-muted/20 px-4 py-3 text-sm leading-6 text-foreground/70">
+            Persisted logs are loaded once from gRPC, then appended live from MQTT frames for the same job.
+          </div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+        {{ error }}
+      </div>
+
+      <AdminSectionCard title="Runtime output" :description="activeJobId || 'idle'" bodyClass="p-5">
+        <div class="overflow-hidden rounded-[22px] border border-slate-200 bg-slate-950">
+          <div class="flex items-center justify-between gap-3 border-b border-slate-800 px-4 py-3">
+            <div class="text-[11px] font-medium text-slate-400">Live stream buffer</div>
+            <div class="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2.5 py-1 text-[11px] font-medium text-emerald-300">
+              {{ activeJobId ? 'Connected' : 'Idle' }}
+            </div>
+          </div>
+          <pre class="min-h-96 overflow-auto whitespace-pre-wrap break-words px-4 py-4 font-mono text-sm leading-6 text-emerald-300">{{ loading ? 'Loading logs...' : logs }}</pre>
+        </div>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+</template>
diff --git a/src/routes/settings/admin/Payments.vue b/src/routes/settings/admin/Payments.vue
new file mode 100644
index 0000000..b852b2b
--- /dev/null
+++ b/src/routes/settings/admin/Payments.vue
@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminInput from "./components/AdminInput.vue";
+import AdminSelect from "./components/AdminSelect.vue";
+import AdminTable from "./components/AdminTable.vue";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import PlanSelection from "@/routes/settings/Billing/components/PlanSelection.tsx";
+import type { Plan as ModelPlan } from "@/server/api/proto/app/v1/common";
+import { type ColumnDef } from "@tanstack/vue-table";
+import { computed, h, onMounted, reactive, ref, watch } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminPlaceholderTable from "./components/AdminPlaceholderTable.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+type ListPaymentsResponse = Awaited<ReturnType<typeof rpcClient.listAdminPayments>>;
+type AdminPaymentRow = NonNullable<ListPaymentsResponse["payments"]>[number];
+
+const paymentMethodOptions = ["TOPUP", "WALLET"] as const;
+const statusOptions = ["PENDING", "SUCCESS", "FAILED", "CANCELLED"] as const;
+const statusFilterOptions = ["", ...statusOptions] as const;
+
+const loading = ref(true);
+const plansLoading = ref(false);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminPaymentRow[]>([]);
+const plans = ref<ModelPlan[]>([]);
+const total = ref(0);
+const limit = ref(12);
+const page = ref(1);
+const selectedRow = ref<AdminPaymentRow | null>(null);
+const userFilter = ref("");
+const appliedUserFilter = ref("");
+const statusFilter = ref<(typeof statusFilterOptions)[number]>("");
+const createOpen = ref(false);
+const detailOpen = ref(false);
+const statusOpen = ref(false);
+
+const createForm = reactive({
+  userId: "",
+  planId: "",
+  termMonths: 1,
+  paymentMethod: "TOPUP",
+  topupAmount: null as number | null,
+});
+
+const statusForm = reactive({
+  id: "",
+  status: "PENDING",
+});
+
+const canCreate = computed(() => createForm.userId.trim() && createForm.planId.trim() && createForm.termMonths >= 1 && createForm.paymentMethod.trim());
+const canUpdateStatus = computed(() => statusForm.id.trim() && statusForm.status.trim());
+const totalPages = computed(() => Math.max(1, Math.ceil((total.value || 0) / limit.value)));
+const selectedPlanId = computed(() => createForm.planId || undefined);
+const summary = computed(() => [
+  { label: "Visible payments", value: rows.value.length },
+  { label: "Successful", value: rows.value.filter((row) => row.status === "SUCCESS").length },
+  { label: "Pending", value: rows.value.filter((row) => row.status === "PENDING").length },
+  { label: "Total records", value: total.value },
+]);
+const selectedMeta = computed(() => {
+  if (!selectedRow.value) return [];
+  return [
+    { label: "User", value: selectedRow.value.userEmail || selectedRow.value.userId || "—" },
+    { label: "Plan", value: selectedRow.value.planName || selectedRow.value.planId || "—" },
+    { label: "Method", value: selectedRow.value.paymentMethod || "—" },
+    { label: "Amount", value: formatMoney(selectedRow.value.amount, selectedRow.value.currency) },
+    { label: "Created", value: formatDate(selectedRow.value.createdAt) },
+    { label: "Invoice", value: selectedRow.value.invoiceId || "—" },
+  ];
+});
+
+const loadPlans = async () => {
+  plansLoading.value = true;
+  try {
+    const response = await rpcClient.listPlans();
+    plans.value = response.plans ?? [];
+  } finally {
+    plansLoading.value = false;
+  }
+};
+
+const loadPayments = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminPayments({
+      page: page.value,
+      limit: limit.value,
+      userId: appliedUserFilter.value.trim() || undefined,
+      status: statusFilter.value || undefined,
+    });
+    rows.value = response.payments ?? [];
+    total.value = response.total ?? rows.value.length;
+    limit.value = response.limit ?? limit.value;
+    page.value = response.page ?? page.value;
+    if (selectedRow.value?.id && (detailOpen.value || statusOpen.value)) {
+      const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+      if (fresh) selectedRow.value = fresh;
+    }
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin payments";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetCreateForm = () => {
+  createForm.userId = "";
+  createForm.planId = "";
+  createForm.termMonths = 1;
+  createForm.paymentMethod = "TOPUP";
+  createForm.topupAmount = null;
+};
+
+const closeDialogs = () => {
+  createOpen.value = false;
+  detailOpen.value = false;
+  statusOpen.value = false;
+  actionError.value = null;
+};
+
+const applyFilters = async () => {
+  page.value = 1;
+  appliedUserFilter.value = userFilter.value;
+  await loadPayments();
+};
+
+const openDetailDialog = (row: AdminPaymentRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  detailOpen.value = true;
+};
+
+const openStatusDialog = (row: AdminPaymentRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  statusForm.id = row.id || "";
+  statusForm.status = row.status || "PENDING";
+  statusOpen.value = true;
+};
+
+const selectPlan = (plan: ModelPlan) => {
+  createForm.planId = plan.id || "";
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminPayment({
+      userId: createForm.userId.trim(),
+      planId: createForm.planId.trim(),
+      termMonths: createForm.termMonths,
+      paymentMethod: createForm.paymentMethod,
+      topupAmount: createForm.topupAmount == null ? undefined : createForm.topupAmount,
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadPayments();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to create payment";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitStatusUpdate = async () => {
+  if (!canUpdateStatus.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminPayment({
+      id: statusForm.id,
+      status: statusForm.status,
+    });
+    statusOpen.value = false;
+    await loadPayments();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update payment";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const previousPage = async () => {
+  if (page.value <= 1) return;
+  page.value -= 1;
+  await loadPayments();
+};
+
+const nextPage = async () => {
+  if (page.value >= totalPages.value) return;
+  page.value += 1;
+  await loadPayments();
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+
+const formatMoney = (amount?: number, currency?: string) => `${amount ?? 0} ${currency || "USD"}`;
+
+const formatBytes = (bytes?: number) => {
+  const value = Number(bytes || 0);
+  if (!value) return "0 B";
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), sizes.length - 1);
+  const normalized = value / 1024 ** index;
+  return `${normalized.toFixed(index === 0 ? 0 : 1)} ${sizes[index]}`;
+};
+
+const formatDuration = (seconds?: number) => {
+  const value = Number(seconds || 0);
+  if (!value) return "0 min";
+  if (value < 0) return "∞";
+  return `${Math.floor(value / 60)} min`;
+};
+
+const getPlanStorageText = (plan: ModelPlan) => `Storage ${formatBytes(plan.storageLimit || 0)}`;
+const getPlanDurationText = (plan: ModelPlan) => `Duration ${formatDuration(plan.durationLimit)}`;
+const getPlanUploadsText = (plan: ModelPlan) => `Uploads ${plan.uploadLimit || 0}`;
+
+const statusBadgeClass = (status?: string) => {
+  switch (status) {
+    case "SUCCESS":
+      return "border-emerald-200 bg-emerald-50 text-emerald-700";
+    case "PENDING":
+      return "border-amber-200 bg-amber-50 text-amber-700";
+    case "FAILED":
+    case "CANCELLED":
+      return "border-rose-200 bg-rose-50 text-rose-700";
+    default:
+      return "border-border bg-muted/40 text-foreground/70";
+  }
+};
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Finance',
+  badge: loading.value ? 'Syncing payment records' : `${total.value} payment records`,
+  actions: [
+    {
+      label: 'Refresh',
+      variant: 'secondary',
+      loading: loading.value,
+      onClick: loadPayments,
+    },
+    {
+      label: 'Create payment',
+      onClick: () => {
+        actionError.value = null;
+        createOpen.value = true;
+      },
+    },
+  ],
+}));
+
+const columns = computed<ColumnDef<AdminPaymentRow>[]>(() => [
+  {
+    id: "payment",
+    header: "Payment",
+    accessorFn: row => row.invoiceId || row.id || "",
+    cell: ({ row }) => h("button", { class: "text-left", onClick: () => { openDetailDialog(row.original); } }, [
+      h("div", { class: "font-medium text-foreground" }, formatMoney(row.original.amount, row.original.currency)),
+      h("div", { class: "mt-1 text-xs text-foreground/60" }, row.original.planName || row.original.planId || "No plan"),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "user",
+    header: "User",
+    accessorFn: row => row.userEmail || row.userId || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.userEmail || row.original.userId || "—"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "plan",
+    header: "Plan",
+    accessorFn: row => row.planName || row.planId || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.planName || row.original.planId || "—"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "method",
+    header: "Method",
+    accessorFn: row => row.paymentMethod || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.paymentMethod || "—"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessorFn: row => row.status || "",
+    cell: ({ row }) => h("span", {
+      class: ["inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ", statusBadgeClass(row.original.status)],
+    }, row.original.status || "UNKNOWN"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "created",
+    header: "Created",
+    accessorFn: row => row.createdAt || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/60" }, formatDate(row.original.createdAt)),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => h("div", { class: "flex justify-end gap-2" }, [
+      h(AppButton, { size: "sm", variant: "secondary", onClick: () => openStatusDialog(row.original) }, { default: () => "Update status" }),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+]);
+
+watch(statusFilter, async () => {
+  page.value = 1;
+  await loadPayments();
+});
+
+onMounted(() => {
+  void loadPlans();
+  void loadPayments();
+});
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Filters" description="Filter payments by user reference and status." bodyClass="p-5">
+        <div class="grid gap-3 xl:grid-cols-[220px_220px_auto] xl:items-end">
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">User reference</label>
+            <AdminInput v-model="userFilter" placeholder="Optional user reference" @enter="applyFilters" />
+          </div>
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Status</label>
+            <AdminSelect v-model="statusFilter">
+              <option v-for="status in statusFilterOptions" :key="status || 'all'" :value="status">{{ status || 'ALL' }}</option>
+            </AdminSelect>
+          </div>
+          <div class="flex items-center gap-2 xl:justify-end">
+            <AppButton size="sm" variant="ghost" @click="userFilter = ''; appliedUserFilter = ''; statusFilter = ''; loadPayments()">Reset</AppButton>
+            <AppButton size="sm" variant="secondary" @click="applyFilters">Apply</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+        {{ error }}
+      </div>
+
+      <AdminSectionCard v-else title="Payments" description="Payment records and status operations." bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="7" :rows="4" />
+
+        <AdminTable
+          v-else
+          :data="rows"
+          :columns="columns"
+          :get-row-id="(row) => row.id || row.invoiceId || ''"
+          wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent"
+          tableClass="w-full"
+          headerRowClass="bg-muted/30"
+          bodyRowClass="border-b border-border hover:bg-muted/30"
+        >
+          <template #empty>
+            <div class="px-6 py-12 text-center">
+              <p class="mb-1 text-sm text-foreground/60">No payments matched the current filters.</p>
+              <p class="text-xs text-foreground/40">Try a broader user reference or clear the status filter.</p>
+            </div>
+          </template>
+        </AdminTable>
+
+        <div class="flex flex-col gap-3 border-t border-border bg-muted/20 px-6 py-4 md:flex-row md:items-center md:justify-between">
+          <div class="text-xs text-foreground/55">Page {{ page }} of {{ totalPages }} · {{ total }} records</div>
+          <div class="flex items-center gap-2">
+            <AppButton size="sm" variant="secondary" :disabled="page <= 1 || loading" @click="previousPage">Previous</AppButton>
+            <AppButton size="sm" variant="secondary" :disabled="page >= totalPages || loading" @click="nextPage">Next</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="detailOpen" title="Payment details" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ formatMoney(selectedRow.amount, selectedRow.currency) }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.planName || selectedRow.planId || 'No plan linked' }}</div>
+      </div>
+
+      <div class="grid gap-3">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openStatusDialog(selectedRow)">Update status</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="createOpen" title="Create admin payment" maxWidthClass="max-w-4xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">User ID</label>
+          <AdminInput v-model="createForm.userId" placeholder="user-id" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Term months</label>
+          <AdminInput v-model="createForm.termMonths" type="number" min="1" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Payment method</label>
+          <AdminSelect v-model="createForm.paymentMethod">
+            <option v-for="method in paymentMethodOptions" :key="method" :value="method">{{ method }}</option>
+          </AdminSelect>
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Topup amount</label>
+          <AdminInput v-model="createForm.topupAmount" type="number" min="0" placeholder="Optional" />
+        </div>
+      </div>
+
+      <div class="overflow-hidden rounded-lg border border-border">
+        <PlanSelection
+          :current-plan-id="selectedPlanId"
+          :selected-plan-id="selectedPlanId"
+          @upgrade="selectPlan"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="statusOpen" title="Update payment status" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="space-y-2">
+        <label class="text-sm font-medium text-foreground/70">Status</label>
+        <AdminSelect v-model="statusForm.status">
+          <option v-for="status in statusOptions" :key="status" :value="status">{{ status }}</option>
+        </AdminSelect>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdateStatus" @click="submitStatusUpdate">Save</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/Plans.vue b/src/routes/settings/admin/Plans.vue
new file mode 100644
index 0000000..e669cd6
--- /dev/null
+++ b/src/routes/settings/admin/Plans.vue
@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminInput from "./components/AdminInput.vue";
+import AdminSelect from "./components/AdminSelect.vue";
+import AdminTextarea from "./components/AdminTextarea.vue";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import { computed, onMounted, reactive, ref } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+import { formatBytes } from "@/lib/utils";
+
+type ListPlansResponse = Awaited<ReturnType<typeof rpcClient.listAdminPlans>>;
+type AdminPlanRow = NonNullable<ListPlansResponse["plans"]>[number];
+
+const cycleOptions = ["monthly", "quarterly", "yearly"] as const;
+
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminPlanRow[]>([]);
+const selectedRow = ref<AdminPlanRow | null>(null);
+const createOpen = ref(false);
+const detailOpen = ref(false);
+const editOpen = ref(false);
+const deleteOpen = ref(false);
+
+const createForm = reactive({
+  name: "",
+  description: "",
+  featuresText: "",
+  price: 0,
+  cycle: "monthly",
+  storageLimit: 1,
+  uploadLimit: 1,
+  isActive: true,
+});
+
+const editForm = reactive({
+  id: "",
+  name: "",
+  description: "",
+  featuresText: "",
+  price: 0,
+  cycle: "monthly",
+  storageLimit: 1,
+  uploadLimit: 1,
+  isActive: true,
+});
+
+const parseFeatures = (value: string) =>
+  value
+    .split("\n")
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+const canCreate = computed(() => createForm.name.trim() && createForm.cycle.trim() && createForm.storageLimit > 0 && createForm.uploadLimit > 0);
+const canUpdate = computed(() => editForm.id.trim() && editForm.name.trim() && editForm.cycle.trim() && editForm.storageLimit > 0 && editForm.uploadLimit > 0);
+const summary = computed(() => [
+  { label: "Plans", value: rows.value.length },
+  { label: "Active", value: rows.value.filter((row) => row.isActive).length },
+  { label: "Highest price", value: rows.value.reduce((max, row) => Math.max(max, Number(row.price ?? 0)), 0) },
+  { label: "Avg storage", value: formatBytes(Math.round(rows.value.reduce((sum, row) => sum + Number(row.storageLimit ?? 0), 0) / Math.max(rows.value.length, 1))) },
+]);
+const selectedMeta = computed(() => {
+  if (!selectedRow.value) return [];
+  return [
+    { label: "Cycle", value: selectedRow.value.cycle || "—" },
+    { label: "Price", value: String(selectedRow.value.price ?? 0) },
+    { label: "Storage", value: String(selectedRow.value.storageLimit ?? 0) },
+    { label: "Uploads", value: String(selectedRow.value.uploadLimit ?? 0) },
+    { label: "Status", value: selectedRow.value.isActive ? "ACTIVE" : "INACTIVE" },
+  ];
+});
+
+const loadPlans = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminPlans();
+    rows.value = response.plans ?? [];
+    if (selectedRow.value?.id && (detailOpen.value || editOpen.value || deleteOpen.value)) {
+      const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+      if (fresh) selectedRow.value = fresh;
+    }
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin plans";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetCreateForm = () => {
+  createForm.name = "";
+  createForm.description = "";
+  createForm.featuresText = "";
+  createForm.price = 0;
+  createForm.cycle = "monthly";
+  createForm.storageLimit = 1;
+  createForm.uploadLimit = 1;
+  createForm.isActive = true;
+};
+
+const closeDialogs = () => {
+  createOpen.value = false;
+  detailOpen.value = false;
+  editOpen.value = false;
+  deleteOpen.value = false;
+  actionError.value = null;
+};
+
+const openDetailDialog = (row: AdminPlanRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  detailOpen.value = true;
+};
+
+const openEditDialog = (row: AdminPlanRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  editForm.id = row.id || "";
+  editForm.name = row.name || "";
+  editForm.description = row.description || "";
+  editForm.featuresText = (row.features ?? []).join("\n");
+  editForm.price = row.price ?? 0;
+  editForm.cycle = row.cycle || "monthly";
+  editForm.storageLimit = row.storageLimit ?? 1;
+  editForm.uploadLimit = row.uploadLimit ?? 1;
+  editForm.isActive = !!row.isActive;
+  editOpen.value = true;
+};
+
+const openDeleteDialog = (row: AdminPlanRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  deleteOpen.value = true;
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminPlan({
+      name: createForm.name.trim(),
+      description: createForm.description.trim() || undefined,
+      features: parseFeatures(createForm.featuresText),
+      price: createForm.price,
+      cycle: createForm.cycle,
+      storageLimit: createForm.storageLimit,
+      uploadLimit: createForm.uploadLimit,
+      isActive: createForm.isActive,
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadPlans();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to create plan";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitEdit = async () => {
+  if (!canUpdate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminPlan({
+      id: editForm.id,
+      name: editForm.name.trim(),
+      description: editForm.description.trim() || undefined,
+      features: parseFeatures(editForm.featuresText),
+      price: editForm.price,
+      cycle: editForm.cycle,
+      storageLimit: editForm.storageLimit,
+      uploadLimit: editForm.uploadLimit,
+      isActive: editForm.isActive,
+    });
+    editOpen.value = false;
+    await loadPlans();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update plan";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitDelete = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.deleteAdminPlan({ id: selectedRow.value.id });
+    deleteOpen.value = false;
+    selectedRow.value = null;
+    await loadPlans();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to delete plan";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+useAdminPageHeader(() => ({
+  eyebrow: "Catalog",
+  badge: `${rows.value.length} plans loaded`,
+  actions: [
+    {
+      label: "Refresh",
+      variant: "secondary",
+      loading: loading.value,
+      onClick: loadPlans,
+    },
+    {
+      label: "Create plan",
+      onClick: () => {
+        actionError.value = null;
+        createOpen.value = true;
+      },
+    },
+  ],
+}));
+
+onMounted(loadPlans);
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ error }}</div>
+      <div v-else-if="loading" class="rounded-lg border border-border bg-muted/20 px-4 py-10 text-center text-foreground/60">Loading plans...</div>
+      <div v-else-if="rows.length === 0" class="rounded-lg border border-border bg-muted/20 px-4 py-10 text-center text-foreground/60">No plans found.</div>
+    <div class="grid gap-4 lg:grid-cols-2 2xl:grid-cols-3" v-else>
+      <div v-for="row in rows" :key="row.id" class="flex flex-col max-w-sm w-full bg-white rounded-2xl border border-gray-200 overflow-hidden transition-all hover:shadow-xl">
+        <div class="p-6 border-b border-gray-100">
+          <div class="flex justify-between items-start">
+            <div>
+              <h3 class="text-xl font-bold text-gray-900">{{ row.name }}</h3>
+              <p class="text-sm text-gray-500">{{ row.description || 'No description' }}</p>
+            </div>
+            <span v-if="row.isActive" class="px-3 py-1 text-xs font-semibold text-green-700 bg-green-100 rounded-full">Active</span>
+            <span v-else class="px-3 py-1 text-xs font-semibold text-red-700 bg-red-100 rounded-full">Inactive</span>
+          </div>
+          <div class="mt-4">
+            <span class="text-3xl font-extrabold text-gray-900">${{ row.price }}</span>
+            <span class="text-gray-500 text-sm">/{{ row.cycle }}</span>
+          </div>
+        </div>
+
+        <div class="p-6 bg-gray-50/50 space-y-4">
+          <div class="flex items-center gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="Check-circle" />
+            </svg>
+            <span class="text-sm text-gray-700">Storage: {{ formatBytes(row.storageLimit) }}</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="Check-circle" />
+            </svg>
+            <span class="text-sm text-gray-700">Uploads: {{ row.uploadLimit }}</span>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-white p-4">
+            <div class="text-xs font-medium text-gray-500">Features</div>
+            <ul class="mt-2 space-y-1 text-sm text-gray-700">
+              <li v-for="feature in row.features || []" :key="feature">• {{ feature }}</li>
+              <li v-if="!(row.features || []).length" class="text-gray-500">No features listed.</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="p-4 bg-white flex gap-2 mt-a">
+          <AppButton size="sm" variant="secondary" @click="openEditDialog(row)">
+            Edit Plan
+          </AppButton>
+          <AppButton size="sm" variant="secondary" @click="openDetailDialog(row)">Details</AppButton>
+          <AppButton size="sm" variant="secondary" @click="openMenuDialog(row)">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="Circle-dots-horizontal" />
+              <circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
+            </svg>
+          </AppButton>
+        </div>
+      </div>
+  </div>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="detailOpen" title="Plan details" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ selectedRow.name }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.description || 'No description' }}</div>
+      </div>
+      <div class="grid gap-3">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+      <div class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+        <div class="text-[11px] font-medium text-foreground/55">Features</div>
+        <ul class="mt-2 space-y-1 text-sm text-foreground/70">
+          <li v-for="feature in selectedRow.features || []" :key="feature">• {{ feature }}</li>
+          <li v-if="!(selectedRow.features || []).length" class="text-foreground/50">No features listed.</li>
+        </ul>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openEditDialog(selectedRow)">Edit</AppButton>
+        <AppButton variant="danger" size="sm" @click="detailOpen = false; selectedRow && openDeleteDialog(selectedRow)">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="createOpen" title="Create admin plan" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Name</label>
+          <AdminInput v-model="createForm.name" placeholder="Starter" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="createForm.description" :rows="3" placeholder="Optional" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Features</label>
+          <AdminTextarea v-model="createForm.featuresText" :rows="4" placeholder="One feature per line" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Price</label>
+          <AdminInput v-model="createForm.price" type="number" min="0" step="0.01" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Cycle</label>
+          <AdminSelect v-model="createForm.cycle">
+            <option v-for="cycle in cycleOptions" :key="cycle" :value="cycle">{{ cycle }}</option>
+          </AdminSelect>
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Storage limit</label>
+          <AdminInput v-model="createForm.storageLimit" type="number" min="1" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Upload limit</label>
+          <AdminInput v-model="createForm.uploadLimit" type="number" min="1" />
+        </div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70 md:col-span-2">
+          <input v-model="createForm.isActive" type="checkbox" class="h-4 w-4" />
+          Active
+        </label>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="editOpen" title="Edit plan" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Name</label>
+          <AdminInput v-model="editForm.name" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="editForm.description" :rows="3" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Features</label>
+          <AdminTextarea v-model="editForm.featuresText" :rows="4" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Price</label>
+          <AdminInput v-model="editForm.price" type="number" min="0" step="0.01" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Cycle</label>
+          <AdminSelect v-model="editForm.cycle">
+            <option v-for="cycle in cycleOptions" :key="cycle" :value="cycle">{{ cycle }}</option>
+          </AdminSelect>
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Storage limit</label>
+          <AdminInput v-model="editForm.storageLimit" type="number" min="1" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Upload limit</label>
+          <AdminInput v-model="editForm.uploadLimit" type="number" min="1" />
+        </div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70 md:col-span-2">
+          <input v-model="editForm.isActive" type="checkbox" class="h-4 w-4" />
+          Active
+        </label>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdate" @click="submitEdit">Save</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="deleteOpen" title="Delete plan" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Delete or deactivate plan <span class="font-medium">{{ selectedRow?.name || 'this plan' }}</span>.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton variant="danger" size="sm" :loading="submitting" @click="submitDelete">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/PlayerConfigs.vue b/src/routes/settings/admin/PlayerConfigs.vue
new file mode 100644
index 0000000..01755ff
--- /dev/null
+++ b/src/routes/settings/admin/PlayerConfigs.vue
@@ -0,0 +1,566 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminInput from "./components/AdminInput.vue";
+import AdminTextarea from "./components/AdminTextarea.vue";
+import AdminTable from "./components/AdminTable.vue";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import { type ColumnDef } from "@tanstack/vue-table";
+import { computed, h, onMounted, reactive, ref } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminPlaceholderTable from "./components/AdminPlaceholderTable.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+type ListConfigsResponse = Awaited<ReturnType<typeof rpcClient.listAdminPlayerConfigs>>;
+type AdminPlayerConfigRow = NonNullable<ListConfigsResponse["configs"]>[number];
+
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminPlayerConfigRow[]>([]);
+const total = ref(0);
+const limit = ref(12);
+const page = ref(1);
+const selectedRow = ref<AdminPlayerConfigRow | null>(null);
+const search = ref("");
+const appliedSearch = ref("");
+const ownerFilter = ref("");
+const appliedOwnerFilter = ref("");
+const createOpen = ref(false);
+const detailOpen = ref(false);
+const editOpen = ref(false);
+const deleteOpen = ref(false);
+
+const createForm = reactive({
+  userId: "",
+  name: "",
+  description: "",
+  autoplay: false,
+  loop: false,
+  muted: false,
+  showControls: true,
+  pip: true,
+  airplay: true,
+  chromecast: true,
+  encrytionM3u8: true,
+  logoUrl: "",
+  isActive: true,
+  isDefault: false,
+});
+
+const editForm = reactive({
+  id: "",
+  userId: "",
+  name: "",
+  description: "",
+  autoplay: false,
+  loop: false,
+  muted: false,
+  showControls: true,
+  pip: true,
+  airplay: true,
+  chromecast: true,
+  encrytionM3u8: true,
+  logoUrl: "",
+  isActive: true,
+  isDefault: false,
+});
+
+const canCreate = computed(() => createForm.userId.trim() && createForm.name.trim());
+const canUpdate = computed(() => editForm.id.trim() && editForm.userId.trim() && editForm.name.trim());
+const totalPages = computed(() => Math.max(1, Math.ceil((total.value || 0) / limit.value)));
+const summary = computed(() => [
+  { label: "Visible configs", value: rows.value.length },
+  { label: "Active", value: rows.value.filter((row) => row.isActive).length },
+  { label: "Default", value: rows.value.filter((row) => row.isDefault).length },
+  { label: "Total records", value: total.value },
+]);
+
+const selectedMeta = computed(() => {
+  if (!selectedRow.value) return [];
+  return [
+    { label: "Owner", value: selectedRow.value.ownerEmail || selectedRow.value.userId || "—" },
+    { label: "Status", value: selectedRow.value.isActive ? "ACTIVE" : "INACTIVE" },
+    { label: "Default", value: selectedRow.value.isDefault ? "YES" : "NO" },
+    { label: "Encrypted HLS", value: selectedRow.value.encrytionM3u8 ? "ENABLED" : "DISABLED" },
+    { label: "Logo URL", value: selectedRow.value.logoUrl || "—" },
+    { label: "Created", value: formatDate(selectedRow.value.createdAt) },
+    { label: "Updated", value: formatDate(selectedRow.value.updatedAt) },
+  ];
+});
+
+const configFlags = (row: AdminPlayerConfigRow) => {
+  const flags: string[] = [];
+  if (row.autoplay) flags.push("Autoplay");
+  if (row.loop) flags.push("Loop");
+  if (row.muted) flags.push("Muted");
+  if (row.showControls) flags.push("Controls");
+  if (row.pip) flags.push("PiP");
+  if (row.airplay) flags.push("AirPlay");
+  if (row.chromecast) flags.push("Chromecast");
+  if (row.encrytionM3u8) flags.push("Encrypted HLS");
+  if (row.logoUrl) flags.push("Logo");
+  return flags;
+};
+
+const loadConfigs = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminPlayerConfigs({
+      page: page.value,
+      limit: limit.value,
+      userId: appliedOwnerFilter.value.trim() || undefined,
+      search: appliedSearch.value.trim() || undefined,
+    });
+    rows.value = response.configs ?? [];
+    total.value = response.total ?? rows.value.length;
+    limit.value = response.limit ?? limit.value;
+    page.value = response.page ?? page.value;
+    if (selectedRow.value?.id && (detailOpen.value || editOpen.value || deleteOpen.value)) {
+      const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+      if (fresh) selectedRow.value = fresh;
+    }
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin player configs";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetCreateForm = () => {
+  createForm.userId = "";
+  createForm.name = "";
+  createForm.description = "";
+  createForm.autoplay = false;
+  createForm.loop = false;
+  createForm.muted = false;
+  createForm.showControls = true;
+  createForm.pip = true;
+  createForm.airplay = true;
+  createForm.chromecast = true;
+  createForm.encrytionM3u8 = true;
+  createForm.logoUrl = "";
+  createForm.isActive = true;
+  createForm.isDefault = false;
+};
+
+const closeDialogs = () => {
+  createOpen.value = false;
+  detailOpen.value = false;
+  editOpen.value = false;
+  deleteOpen.value = false;
+  actionError.value = null;
+};
+
+const applyFilters = async () => {
+  page.value = 1;
+  appliedSearch.value = search.value;
+  appliedOwnerFilter.value = ownerFilter.value;
+  await loadConfigs();
+};
+
+const openDetailDialog = (row: AdminPlayerConfigRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  detailOpen.value = true;
+};
+
+const openEditDialog = (row: AdminPlayerConfigRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  editForm.id = row.id || "";
+  editForm.userId = row.userId || "";
+  editForm.name = row.name || "";
+  editForm.description = row.description || "";
+  editForm.autoplay = !!row.autoplay;
+  editForm.loop = !!row.loop;
+  editForm.muted = !!row.muted;
+  editForm.showControls = !!row.showControls;
+  editForm.pip = !!row.pip;
+  editForm.airplay = !!row.airplay;
+  editForm.chromecast = !!row.chromecast;
+  editForm.encrytionM3u8 = row.encrytionM3u8 !== false;
+  editForm.logoUrl = row.logoUrl || "";
+  editForm.isActive = !!row.isActive;
+  editForm.isDefault = !!row.isDefault;
+  editOpen.value = true;
+};
+
+const openDeleteDialog = (row: AdminPlayerConfigRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  deleteOpen.value = true;
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminPlayerConfig({
+      userId: createForm.userId.trim(),
+      name: createForm.name.trim(),
+      description: createForm.description.trim() || undefined,
+      autoplay: createForm.autoplay,
+      loop: createForm.loop,
+      muted: createForm.muted,
+      showControls: createForm.showControls,
+      pip: createForm.pip,
+      airplay: createForm.airplay,
+      chromecast: createForm.chromecast,
+      encrytionM3u8: createForm.encrytionM3u8,
+      logoUrl: createForm.logoUrl.trim() || undefined,
+      isActive: createForm.isActive,
+      isDefault: createForm.isDefault,
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadConfigs();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to create player config";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitEdit = async () => {
+  if (!canUpdate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminPlayerConfig({
+      id: editForm.id,
+      userId: editForm.userId.trim(),
+      name: editForm.name.trim(),
+      description: editForm.description.trim() || undefined,
+      autoplay: editForm.autoplay,
+      loop: editForm.loop,
+      muted: editForm.muted,
+      showControls: editForm.showControls,
+      pip: editForm.pip,
+      airplay: editForm.airplay,
+      chromecast: editForm.chromecast,
+      encrytionM3u8: editForm.encrytionM3u8,
+      logoUrl: editForm.logoUrl.trim() || undefined,
+      isActive: editForm.isActive,
+      isDefault: editForm.isDefault,
+    });
+    editOpen.value = false;
+    await loadConfigs();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update player config";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitDelete = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.deleteAdminPlayerConfig({ id: selectedRow.value.id });
+    deleteOpen.value = false;
+    selectedRow.value = null;
+    if (page.value > 1 && rows.value.length === 1) page.value -= 1;
+    await loadConfigs();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to delete player config";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const previousPage = async () => {
+  if (page.value <= 1) return;
+  page.value -= 1;
+  await loadConfigs();
+};
+
+const nextPage = async () => {
+  if (page.value >= totalPages.value) return;
+  page.value += 1;
+  await loadConfigs();
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Playback',
+  badge: loading.value ? 'Syncing config presets' : `${total.value} configs loaded`,
+  actions: [
+    {
+      label: 'Refresh',
+      variant: 'secondary',
+      loading: loading.value,
+      onClick: loadConfigs,
+    },
+    {
+      label: 'Create config',
+      onClick: () => {
+        actionError.value = null;
+        createOpen.value = true;
+      },
+    },
+  ],
+}));
+
+const columns = computed<ColumnDef<AdminPlayerConfigRow>[]>(() => [
+  {
+    id: "config",
+    header: "Config",
+    accessorFn: row => row.name || "",
+    cell: ({ row }) => h("button", { class: "text-left", onClick: () => { openDetailDialog(row.original); } }, [
+      h("div", { class: "font-medium text-foreground" }, row.original.name),
+      h("div", { class: "mt-1 text-xs text-foreground/60" }, row.original.ownerEmail || row.original.userId || "No owner"),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "flags",
+    header: "Flags",
+    accessorFn: row => configFlags(row).join(", "),
+    cell: ({ row }) => h("div", { class: "flex flex-wrap gap-1" },
+      configFlags(row.original).length
+        ? configFlags(row.original).map((flag) => h("span", { class: "rounded bg-primary/10 px-2 py-0.5 text-xs text-primary" }, flag))
+        : [h("span", { class: "text-foreground/50" }, "—")]
+    ),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessorFn: row => row.isActive ? "ACTIVE" : "INACTIVE",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.isActive ? "ACTIVE" : "INACTIVE"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "default",
+    header: "Default",
+    accessorFn: row => row.isDefault ? "YES" : "NO",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.isDefault ? "YES" : "NO"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => h("div", { class: "flex justify-end gap-2" }, [
+      h(AppButton, { size: "sm", variant: "secondary", onClick: () => openEditDialog(row.original) }, { default: () => "Edit" }),
+      h(AppButton, { size: "sm", variant: "danger", onClick: () => openDeleteDialog(row.original) }, { default: () => "Delete" }),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+]);
+
+onMounted(loadConfigs);
+</script>
+
+<template>
+  <AdminSectionShell>
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Filters" description="Search configs by name and narrow by owner reference if needed." bodyClass="p-5">
+        <div class="grid gap-3 xl:grid-cols-[minmax(0,1fr)_220px_auto] xl:items-end">
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Search</label>
+            <AdminInput v-model="search" placeholder="Search config name" @enter="applyFilters" />
+          </div>
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Owner reference</label>
+            <AdminInput v-model="ownerFilter" placeholder="Optional owner reference" @enter="applyFilters" />
+          </div>
+          <div class="flex items-center gap-2 xl:justify-end">
+            <AppButton size="sm" variant="ghost" @click="search = ''; ownerFilter = ''; appliedSearch = ''; appliedOwnerFilter = ''; loadConfigs()">Reset</AppButton>
+            <AppButton size="sm" variant="secondary" @click="applyFilters">Apply</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ error }}</div>
+
+      <AdminSectionCard v-else title="Player configs" description="Cross-user player presets and default assignments." bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="5" :rows="4" />
+
+        <AdminTable
+          v-else
+          :data="rows"
+          :columns="columns"
+          :get-row-id="(row) => row.id || row.name || ''"
+          wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent"
+          tableClass="w-full"
+          headerRowClass="bg-muted/30"
+          bodyRowClass="border-b border-border hover:bg-muted/30"
+        >
+          <template #empty>
+            <div class="px-6 py-12 text-center">
+              <p class="mb-1 text-sm text-foreground/60">No player configs matched the current filters.</p>
+              <p class="text-xs text-foreground/40">Try a broader config name or clear the owner filter.</p>
+            </div>
+          </template>
+        </AdminTable>
+
+        <div class="flex flex-col gap-3 border-t border-border bg-muted/20 px-6 py-4 md:flex-row md:items-center md:justify-between">
+          <div class="text-xs text-foreground/55">Page {{ page }} of {{ totalPages }} · {{ total }} records</div>
+          <div class="flex items-center gap-2">
+            <AppButton size="sm" variant="secondary" :disabled="page <= 1 || loading" @click="previousPage">Previous</AppButton>
+            <AppButton size="sm" variant="secondary" :disabled="page >= totalPages || loading" @click="nextPage">Next</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="detailOpen" title="Player config details" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ selectedRow.name }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.ownerEmail || selectedRow.userId || 'No owner' }}</div>
+      </div>
+      <div class="grid gap-3">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+      <div class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+        <div class="text-[11px] font-medium text-foreground/55">Flags</div>
+        <div class="mt-2 flex flex-wrap gap-2">
+          <span v-for="flag in configFlags(selectedRow)" :key="flag" class="rounded bg-primary/10 px-2 py-0.5 text-xs text-primary">{{ flag }}</span>
+          <span v-if="configFlags(selectedRow).length === 0" class="text-sm text-foreground/60">No enabled flags</span>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openEditDialog(selectedRow)">Edit</AppButton>
+        <AppButton variant="danger" size="sm" @click="detailOpen = false; selectedRow && openDeleteDialog(selectedRow)">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="createOpen" title="Create player config" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Owner user ID</label>
+          <AdminInput v-model="createForm.userId" placeholder="user-id" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Name</label>
+          <AdminInput v-model="createForm.name" placeholder="Default player preset" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="createForm.description" rows="3" placeholder="Optional" />
+        </div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.autoplay" type="checkbox" class="h-4 w-4" /> Autoplay</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.loop" type="checkbox" class="h-4 w-4" /> Loop</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.muted" type="checkbox" class="h-4 w-4" /> Muted</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.showControls" type="checkbox" class="h-4 w-4" /> Show controls</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.pip" type="checkbox" class="h-4 w-4" /> PiP</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.airplay" type="checkbox" class="h-4 w-4" /> AirPlay</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.chromecast" type="checkbox" class="h-4 w-4" /> Chromecast</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.encrytionM3u8" type="checkbox" class="h-4 w-4" /> Encrypted HLS</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.isActive" type="checkbox" class="h-4 w-4" /> Active</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.isDefault" type="checkbox" class="h-4 w-4" /> Default</label>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Logo URL</label>
+          <AdminInput v-model="createForm.logoUrl" placeholder="https://example.com/logo.png" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="editOpen" title="Edit player config" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Owner user ID</label>
+          <AdminInput v-model="editForm.userId" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Name</label>
+          <AdminInput v-model="editForm.name" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="editForm.description" rows="3" />
+        </div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.autoplay" type="checkbox" class="h-4 w-4" /> Autoplay</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.loop" type="checkbox" class="h-4 w-4" /> Loop</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.muted" type="checkbox" class="h-4 w-4" /> Muted</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.showControls" type="checkbox" class="h-4 w-4" /> Show controls</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.pip" type="checkbox" class="h-4 w-4" /> PiP</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.airplay" type="checkbox" class="h-4 w-4" /> AirPlay</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.chromecast" type="checkbox" class="h-4 w-4" /> Chromecast</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.encrytionM3u8" type="checkbox" class="h-4 w-4" /> Encrypted HLS</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.isActive" type="checkbox" class="h-4 w-4" /> Active</label>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.isDefault" type="checkbox" class="h-4 w-4" /> Default</label>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Logo URL</label>
+          <AdminInput v-model="editForm.logoUrl" placeholder="https://example.com/logo.png" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdate" @click="submitEdit">Save</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="deleteOpen" title="Delete player config" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">Delete <span class="font-semibold text-foreground">{{ selectedRow?.name }}</span>? This action cannot be undone.</p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton variant="danger" size="sm" :loading="submitting" @click="submitDelete">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/PopupAds.vue b/src/routes/settings/admin/PopupAds.vue
new file mode 100644
index 0000000..545d1ef
--- /dev/null
+++ b/src/routes/settings/admin/PopupAds.vue
@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppDialog from '@/components/ui/AppDialog.vue';
+import AdminInput from './components/AdminInput.vue';
+import AdminSelect from './components/AdminSelect.vue';
+import AdminTable from './components/AdminTable.vue';
+import AdminSectionCard from './components/AdminSectionCard.vue';
+import type { ColumnDef } from '@tanstack/vue-table';
+import { computed, h, onMounted, reactive, ref } from 'vue';
+import AdminMetricCard from './components/AdminMetricCard.vue';
+import AdminPlaceholderTable from './components/AdminPlaceholderTable.vue';
+import AdminSectionShell from './components/AdminSectionShell.vue';
+import { useAdminPageHeader } from './components/useAdminPageHeader';
+
+type ListPopupAdsResponse = Awaited<ReturnType<typeof rpcClient.listAdminPopupAds>>;
+type AdminPopupAdRow = NonNullable<ListPopupAdsResponse['items']>[number];
+
+const popupTypes = ['url', 'script'] as const;
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminPopupAdRow[]>([]);
+const total = ref(0);
+const limit = ref(12);
+const page = ref(1);
+const search = ref('');
+const appliedSearch = ref('');
+const ownerFilter = ref('');
+const appliedOwnerFilter = ref('');
+const selectedRow = ref<AdminPopupAdRow | null>(null);
+const createOpen = ref(false);
+const editOpen = ref(false);
+const deleteOpen = ref(false);
+
+const createForm = reactive({ userId: '', type: 'url', label: '', value: '', isActive: true, maxTriggersPerSession: 3 });
+const editForm = reactive({ id: '', userId: '', type: 'url', label: '', value: '', isActive: true, maxTriggersPerSession: 3 });
+
+const canCreate = computed(() => createForm.userId.trim() && createForm.label.trim() && createForm.value.trim());
+const canUpdate = computed(() => editForm.id.trim() && editForm.userId.trim() && editForm.label.trim() && editForm.value.trim());
+const totalPages = computed(() => Math.max(1, Math.ceil((total.value || 0) / limit.value)));
+const summary = computed(() => [
+  { label: 'Visible records', value: rows.value.length },
+  { label: 'Active', value: rows.value.filter((row) => row.isActive).length },
+  { label: 'URL type', value: rows.value.filter((row) => row.type === 'url').length },
+  { label: 'Script type', value: rows.value.filter((row) => row.type === 'script').length },
+]);
+
+const loadPopupAds = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminPopupAds({ page: page.value, limit: limit.value, userId: appliedOwnerFilter.value.trim() || undefined, search: appliedSearch.value.trim() || undefined });
+    rows.value = response.items ?? [];
+    total.value = response.total ?? rows.value.length;
+    limit.value = response.limit ?? limit.value;
+    page.value = response.page ?? page.value;
+  } catch (err: any) {
+    error.value = err?.message || 'Failed to load admin popup ads';
+  } finally {
+    loading.value = false;
+  }
+};
+
+const applyFilters = async () => {
+  page.value = 1;
+  appliedSearch.value = search.value;
+  appliedOwnerFilter.value = ownerFilter.value;
+  await loadPopupAds();
+};
+
+const resetCreateForm = () => {
+  createForm.userId = '';
+  createForm.type = 'url';
+  createForm.label = '';
+  createForm.value = '';
+  createForm.isActive = true;
+  createForm.maxTriggersPerSession = 3;
+};
+
+const openEditDialog = (row: AdminPopupAdRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  editForm.id = row.id || '';
+  editForm.userId = row.userId || '';
+  editForm.type = (row.type as 'url' | 'script') || 'url';
+  editForm.label = row.label || '';
+  editForm.value = row.value || '';
+  editForm.isActive = !!row.isActive;
+  editForm.maxTriggersPerSession = Number(row.maxTriggersPerSession || 3);
+  editOpen.value = true;
+};
+
+const openDeleteDialog = (row: AdminPopupAdRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  deleteOpen.value = true;
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminPopupAd({
+      userId: createForm.userId.trim(),
+      type: createForm.type,
+      label: createForm.label.trim(),
+      value: createForm.value.trim(),
+      isActive: createForm.isActive,
+      maxTriggersPerSession: createForm.type === 'url' ? createForm.maxTriggersPerSession : undefined,
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadPopupAds();
+  } catch (err: any) {
+    actionError.value = err?.message || 'Failed to create popup ad';
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitEdit = async () => {
+  if (!canUpdate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminPopupAd({
+      id: editForm.id,
+      userId: editForm.userId.trim(),
+      type: editForm.type,
+      label: editForm.label.trim(),
+      value: editForm.value.trim(),
+      isActive: editForm.isActive,
+      maxTriggersPerSession: editForm.type === 'url' ? editForm.maxTriggersPerSession : undefined,
+    });
+    editOpen.value = false;
+    await loadPopupAds();
+  } catch (err: any) {
+    actionError.value = err?.message || 'Failed to update popup ad';
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitDelete = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.deleteAdminPopupAd({ id: selectedRow.value.id });
+    deleteOpen.value = false;
+    selectedRow.value = null;
+    if (page.value > 1 && rows.value.length === 1) page.value -= 1;
+    await loadPopupAds();
+  } catch (err: any) {
+    actionError.value = err?.message || 'Failed to delete popup ad';
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const previousPage = async () => {
+  if (page.value <= 1) return;
+  page.value -= 1;
+  await loadPopupAds();
+};
+
+const nextPage = async () => {
+  if (page.value >= totalPages.value) return;
+  page.value += 1;
+  await loadPopupAds();
+};
+
+const columns = computed<ColumnDef<AdminPopupAdRow>[]>(() => [
+  {
+    id: 'label',
+    header: 'Popup',
+    accessorFn: row => row.label || '',
+    cell: ({ row }) => h('div', { class: 'text-left' }, [
+      h('div', { class: 'font-medium text-foreground' }, row.original.label),
+      h('div', { class: 'mt-1 text-xs text-foreground/60' }, row.original.ownerEmail || row.original.userId || 'No owner'),
+    ]),
+    meta: { headerClass: 'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-4 py-3' },
+  },
+  {
+    id: 'type',
+    header: 'Type',
+    accessorFn: row => row.type || '',
+    meta: { headerClass: 'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-4 py-3 text-foreground/70' },
+  },
+  {
+    id: 'value',
+    header: 'Value',
+    accessorFn: row => row.value || '',
+    cell: ({ row }) => h('code', { class: 'block max-w-[360px] truncate text-xs text-foreground/60' }, row.original.value || '—'),
+    meta: { headerClass: 'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-4 py-3' },
+  },
+  {
+    id: 'maxTriggersPerSession',
+    header: 'Max triggers/session',
+    accessorFn: row => row.maxTriggersPerSession || 0,
+    meta: { headerClass: 'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-4 py-3 text-foreground/70' },
+  },
+  {
+    id: 'status',
+    header: 'Status',
+    accessorFn: row => row.isActive ? 'ACTIVE' : 'INACTIVE',
+    cell: ({ row }) => h('span', { class: 'text-foreground/70' }, row.original.isActive ? 'ACTIVE' : 'INACTIVE'),
+    meta: { headerClass: 'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-4 py-3' },
+  },
+  {
+    id: 'actions',
+    header: 'Actions',
+    enableSorting: false,
+    cell: ({ row }) => h('div', { class: 'flex justify-end gap-2' }, [
+      h(AppButton, { size: 'sm', variant: 'secondary', onClick: () => openEditDialog(row.original) }, { default: () => 'Edit' }),
+      h(AppButton, { size: 'sm', variant: 'danger', onClick: () => openDeleteDialog(row.original) }, { default: () => 'Delete' }),
+    ]),
+    meta: { headerClass: 'px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50', cellClass: 'px-4 py-3 text-right' },
+  },
+]);
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Advertising',
+  badge: loading.value ? 'Syncing popup inventory' : `${total.value} total popups`,
+  actions: [
+    { label: 'Refresh', variant: 'secondary', loading: loading.value, onClick: loadPopupAds },
+    { label: 'Create popup', onClick: () => { actionError.value = null; createOpen.value = true; } },
+  ],
+}));
+
+onMounted(loadPopupAds);
+</script>
+
+<template>
+  <AdminSectionShell>
+    <template #stats>
+      <AdminMetricCard v-for="item in summary" :key="item.label" :label="item.label" :value="item.value" />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Filters" description="Search popup ads by label and narrow by owner reference if needed." bodyClass="p-5">
+        <div class="grid gap-3 xl:grid-cols-[minmax(0,1fr)_220px_auto] xl:items-end">
+          <div class="space-y-2"><label class="text-xs font-medium text-foreground/60">Search</label><AdminInput v-model="search" placeholder="Search popup label" @enter="applyFilters" /></div>
+          <div class="space-y-2"><label class="text-xs font-medium text-foreground/60">Owner reference</label><AdminInput v-model="ownerFilter" placeholder="Optional owner reference" @enter="applyFilters" /></div>
+          <div class="flex items-center gap-2 xl:justify-end"><AppButton size="sm" variant="ghost" @click="search = ''; ownerFilter = ''; appliedSearch = ''; appliedOwnerFilter = ''; loadPopupAds()">Reset</AppButton><AppButton size="sm" variant="secondary" @click="applyFilters">Apply</AppButton></div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ error }}</div>
+
+      <AdminSectionCard v-else title="Popup Ads" description="Popup ad inventory across users." bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="6" :rows="4" />
+        <AdminTable v-else :data="rows" :columns="columns" :get-row-id="(row) => row.id || row.label || ''" wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent" tableClass="w-full" headerRowClass="bg-muted/30" bodyRowClass="border-b border-border hover:bg-muted/30">
+          <template #empty>
+            <div class="px-6 py-12 text-center"><p class="mb-1 text-sm text-foreground/60">No popup ads matched the current filters.</p><p class="text-xs text-foreground/40">Try a broader label or clear the owner filter.</p></div>
+          </template>
+        </AdminTable>
+        <div class="flex flex-col gap-3 border-t border-border bg-muted/20 px-6 py-4 md:flex-row md:items-center md:justify-between">
+          <div class="text-xs text-foreground/55">Page {{ page }} of {{ totalPages }} · {{ total }} records</div>
+          <div class="flex items-center gap-2"><AppButton size="sm" variant="secondary" :disabled="page <= 1 || loading" @click="previousPage">Previous</AppButton><AppButton size="sm" variant="secondary" :disabled="page >= totalPages || loading" @click="nextPage">Next</AppButton></div>
+        </div>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="createOpen" title="Create popup ad" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2"><label class="text-sm font-medium text-foreground/70">Owner user ID</label><AdminInput v-model="createForm.userId" placeholder="user-id" /></div>
+        <div class="space-y-2"><label class="text-sm font-medium text-foreground/70">Type</label><AdminSelect v-model="createForm.type"><option v-for="type in popupTypes" :key="type" :value="type">{{ type }}</option></AdminSelect></div>
+        <div v-if="createForm.type === 'url'" class="space-y-2"><label class="text-sm font-medium text-foreground/70">Max triggers / session</label><AdminInput v-model="createForm.maxTriggersPerSession" type="number" min="1" /></div>
+        <div class="space-y-2 md:col-span-2"><label class="text-sm font-medium text-foreground/70">Label</label><AdminInput v-model="createForm.label" placeholder="Homepage campaign" /></div>
+        <div class="space-y-2 md:col-span-2"><label class="text-sm font-medium text-foreground/70">Value</label><AdminInput v-if="createForm.type === 'url'" v-model="createForm.value" placeholder="https://..." /><textarea v-else v-model="createForm.value" rows="4" class="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm" placeholder="<script async src='//example.com/ad.js'></script>" /></div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="createForm.isActive" type="checkbox" class="h-4 w-4" />Active</label>
+      </div>
+    </div>
+    <template #footer><div class="flex justify-end gap-2"><AppButton variant="secondary" size="sm" :disabled="submitting" @click="createOpen = false">Cancel</AppButton><AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton></div></template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="editOpen" title="Edit popup ad" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2 md:col-span-2"><label class="text-sm font-medium text-foreground/70">Owner user ID</label><AdminInput v-model="editForm.userId" /></div>
+        <div class="space-y-2"><label class="text-sm font-medium text-foreground/70">Type</label><AdminSelect v-model="editForm.type"><option v-for="type in popupTypes" :key="type" :value="type">{{ type }}</option></AdminSelect></div>
+        <div v-if="editForm.type === 'url'" class="space-y-2"><label class="text-sm font-medium text-foreground/70">Max triggers / session</label><AdminInput v-model="editForm.maxTriggersPerSession" type="number" min="1" /></div>
+        <div class="space-y-2 md:col-span-2"><label class="text-sm font-medium text-foreground/70">Label</label><AdminInput v-model="editForm.label" /></div>
+        <div class="space-y-2 md:col-span-2"><label class="text-sm font-medium text-foreground/70">Value</label><AdminInput v-if="editForm.type === 'url'" v-model="editForm.value" /><textarea v-else v-model="editForm.value" rows="4" class="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm" /></div>
+        <label class="flex items-center gap-2 text-sm text-foreground/70"><input v-model="editForm.isActive" type="checkbox" class="h-4 w-4" />Active</label>
+      </div>
+    </div>
+    <template #footer><div class="flex justify-end gap-2"><AppButton variant="secondary" size="sm" :disabled="submitting" @click="editOpen = false">Cancel</AppButton><AppButton size="sm" :loading="submitting" :disabled="!canUpdate" @click="submitEdit">Save</AppButton></div></template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="deleteOpen" title="Delete popup ad" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">Delete popup ad <span class="font-medium">{{ selectedRow?.label || 'this popup' }}</span>.</p>
+    </div>
+    <template #footer><div class="flex justify-end gap-2"><AppButton variant="secondary" size="sm" :disabled="submitting" @click="deleteOpen = false">Cancel</AppButton><AppButton variant="danger" size="sm" :loading="submitting" @click="submitDelete">Delete</AppButton></div></template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/Users.vue b/src/routes/settings/admin/Users.vue
new file mode 100644
index 0000000..bb6c8fe
--- /dev/null
+++ b/src/routes/settings/admin/Users.vue
@@ -0,0 +1,676 @@
+<script setup lang="ts">
+import { client, client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminInput from "./components/AdminInput.vue";
+import AdminSelect from "./components/AdminSelect.vue";
+import AdminTable from "./components/AdminTable.vue";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import { type ColumnDef } from "@tanstack/vue-table";
+import { computed, h, onMounted, reactive, ref, watch } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminPlaceholderTable from "./components/AdminPlaceholderTable.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import AdminUserFormFields from "./components/AdminUserFormFields.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+type ListUsersResponse = Awaited<ReturnType<typeof rpcClient.listAdminUsers>>;
+type AdminUserRow = NonNullable<ListUsersResponse["users"]>[number];
+type GetAdminUserResponse = Awaited<ReturnType<typeof rpcClient.getAdminUser>>;
+type AdminUserDetail = NonNullable<GetAdminUserResponse["user"]>;
+
+const roleOptions = ["USER", "ADMIN"] as const;
+const roleFilterOptions = ["", ...roleOptions] as const;
+
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminUserRow[]>([]);
+const total = ref(0);
+const limit = ref(12);
+const page = ref(1);
+const selectedRow = ref<AdminUserRow | null>(null);
+const selectedDetail = ref<AdminUserDetail | null>(null);
+const search = ref("");
+const appliedSearch = ref("");
+const roleFilter = ref<(typeof roleFilterOptions)[number]>("");
+
+const createOpen = ref(false);
+const detailOpen = ref(false);
+const editOpen = ref(false);
+const roleOpen = ref(false);
+const deleteOpen = ref(false);
+const referralOpen = ref(false);
+
+const createForm = reactive({
+  email: "",
+  username: "",
+  password: "",
+  role: "USER",
+  planId: "",
+});
+
+const editForm = reactive({
+  id: "",
+  email: "",
+  username: "",
+  password: "",
+  role: "USER",
+  planId: "",
+});
+
+const roleForm = reactive({
+  id: "",
+  role: "USER",
+});
+
+const referralForm = reactive({
+  id: "",
+  refUsername: "",
+  clearReferrer: false,
+  referralEligible: true,
+  rewardPercent: "",
+  clearRewardPercent: false,
+});
+
+const canCreate = computed(() => createForm.email.trim() && createForm.password.trim() && createForm.role.trim());
+const canUpdate = computed(() => editForm.id.trim() && editForm.email.trim() && editForm.role.trim());
+const canUpdateRole = computed(() => roleForm.id.trim() && roleForm.role.trim());
+const canUpdateReferral = computed(() => referralForm.id.trim());
+const totalPages = computed(() => Math.max(1, Math.ceil((total.value || 0) / limit.value)));
+const selectedMeta = computed(() => {
+  if (!selectedDetail.value?.user && !selectedRow.value) return [];
+  const user = selectedDetail.value?.user || selectedRow.value;
+  const referral = selectedDetail.value?.referral;
+  return [
+    { label: "Role", value: user?.role || "USER" },
+    { label: "Plan", value: user?.planName || user?.planId || "Free" },
+    { label: "Videos", value: String(user?.videoCount ?? 0) },
+    { label: "Wallet", value: String(user?.walletBalance ?? 0) },
+    { label: "Referrer", value: referral?.referrer?.username ? `@${referral.referrer.username}` : referral?.referrer?.email || "—" },
+    { label: "Reward", value: referral?.rewardGranted ? `${referral.rewardAmount ?? 0} USD` : "Pending / none" },
+    { label: "Created", value: formatDate(user?.createdAt) },
+  ];
+});
+
+const summary = computed(() => {
+  const adminCount = rows.value.filter((row) => String(row.role || "").toUpperCase() === "ADMIN").length;
+  return [
+    { label: "Visible users", value: rows.value.length },
+    { label: "Admin accounts", value: adminCount },
+    { label: "Selected page", value: page.value },
+    { label: "Total records", value: total.value },
+  ];
+});
+
+const normalizeOptional = (value: string) => {
+  const trimmed = value.trim();
+  return trimmed ? trimmed : undefined;
+};
+
+const planOptionsLoader = () =>
+  client.listPlans().then((plans) =>
+    (plans?.plans || []).map((plan) => ({ label: plan.name!, value: plan.id! })),
+  );
+
+const resetCreateForm = () => {
+  createForm.email = "";
+  createForm.username = "";
+  createForm.password = "";
+  createForm.role = "USER";
+  createForm.planId = "";
+};
+
+const closeDialogs = () => {
+  createOpen.value = false;
+  detailOpen.value = false;
+  editOpen.value = false;
+  roleOpen.value = false;
+  deleteOpen.value = false;
+  actionError.value = null;
+};
+
+const syncSelectedRow = () => {
+  if (!selectedRow.value?.id) return;
+  const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+  if (fresh && (detailOpen.value || editOpen.value || roleOpen.value || deleteOpen.value)) selectedRow.value = fresh;
+};
+
+const loadUsers = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminUsers({
+      page: page.value,
+      limit: limit.value,
+      search: appliedSearch.value.trim() || undefined,
+      role: roleFilter.value || undefined,
+    });
+    rows.value = response.users ?? [];
+    total.value = response.total ?? rows.value.length;
+    limit.value = response.limit ?? limit.value;
+    page.value = response.page ?? page.value;
+    syncSelectedRow();
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin users";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const applyFilters = async () => {
+  page.value = 1;
+  appliedSearch.value = search.value;
+  await loadUsers();
+};
+
+const loadUserDetail = async (userId: string) => {
+  const response = await rpcClient.getAdminUser({ id: userId });
+  selectedDetail.value = response.user ?? null;
+  return selectedDetail.value;
+};
+
+const openDetailDialog = async (row: AdminUserRow) => {
+  selectedRow.value = row;
+  selectedDetail.value = null;
+  actionError.value = null;
+  detailOpen.value = true;
+  try {
+    await loadUserDetail(row.id || '');
+  } catch (err: any) {
+    actionError.value = err?.message || 'Failed to load user details';
+  }
+};
+
+const openEditDialog = (row: AdminUserRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  editForm.id = row.id || "";
+  editForm.email = row.email || "";
+  editForm.username = row.username || "";
+  editForm.password = "";
+  editForm.role = row.role || "USER";
+  editForm.planId = row.planId || "";
+  editOpen.value = true;
+};
+
+const openRoleDialog = (row: AdminUserRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  roleForm.id = row.id || "";
+  roleForm.role = row.role || "USER";
+  roleOpen.value = true;
+};
+
+const openDeleteDialog = (row: AdminUserRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  deleteOpen.value = true;
+};
+
+const openReferralDialog = async (row: AdminUserRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  referralOpen.value = true;
+  referralForm.id = row.id || '';
+  referralForm.refUsername = '';
+  referralForm.clearReferrer = false;
+  referralForm.rewardPercent = '';
+  referralForm.clearRewardPercent = false;
+  try {
+    const detail = await loadUserDetail(row.id || '');
+    referralForm.referralEligible = detail?.referral?.referralEligible ?? true;
+    referralForm.rewardPercent = detail?.referral?.rewardOverridePercent != null ? String(detail.referral.rewardOverridePercent) : '';
+  } catch (err: any) {
+    actionError.value = err?.message || 'Failed to load referral settings';
+  }
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminUser({
+      email: createForm.email.trim(),
+      username: normalizeOptional(createForm.username),
+      password: createForm.password,
+      role: createForm.role,
+      planId: normalizeOptional(createForm.planId),
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadUsers();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to create user";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitEdit = async () => {
+  if (!canUpdate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminUser({
+      id: editForm.id,
+      email: editForm.email.trim(),
+      username: normalizeOptional(editForm.username),
+      password: normalizeOptional(editForm.password),
+      role: editForm.role,
+      planId: normalizeOptional(editForm.planId),
+    });
+    editOpen.value = false;
+    await loadUsers();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update user";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitRole = async () => {
+  if (!canUpdateRole.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminUserRole({
+      id: roleForm.id,
+      role: roleForm.role,
+    });
+    roleOpen.value = false;
+    await loadUsers();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update role";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitDelete = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.deleteAdminUser({ id: selectedRow.value.id });
+    deleteOpen.value = false;
+    selectedRow.value = null;
+    selectedDetail.value = null;
+    if (page.value > 1 && rows.value.length === 1) page.value -= 1;
+    await loadUsers();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to delete user";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitReferral = async () => {
+  if (!canUpdateReferral.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    const rewardPercent = referralForm.rewardPercent.trim();
+    const response = await rpcClient.updateAdminUserReferralSettings({
+      id: referralForm.id,
+      refUsername: referralForm.clearReferrer ? undefined : normalizeOptional(referralForm.refUsername),
+      clearReferrer: referralForm.clearReferrer || undefined,
+      referralEligible: referralForm.referralEligible,
+      referralRewardBps: referralForm.clearRewardPercent || rewardPercent === '' ? undefined : Math.round(Number(rewardPercent) * 100),
+      clearReferralRewardBps: referralForm.clearRewardPercent || undefined,
+    });
+    selectedDetail.value = response.user ?? null;
+    referralOpen.value = false;
+    await loadUsers();
+  } catch (err: any) {
+    actionError.value = err?.message || 'Failed to update referral settings';
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const previousPage = async () => {
+  if (page.value <= 1) return;
+  page.value -= 1;
+  await loadUsers();
+};
+
+const nextPage = async () => {
+  if (page.value >= totalPages.value) return;
+  page.value += 1;
+  await loadUsers();
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+
+const roleBadgeClass = (role?: string) => {
+  const normalized = String(role || "USER").toUpperCase();
+  if (normalized === "ADMIN") return "border-sky-200 bg-sky-50 text-sky-700";
+  return "border-border bg-muted/40 text-foreground/70";
+};
+
+const columns = computed<ColumnDef<AdminUserRow>[]>(() => [
+  {
+    id: "user",
+    header: "User",
+    accessorFn: (row) => row.email || row.id || "",
+    cell: ({ row }) => h(
+      "button",
+      {
+        class: "text-left",
+        onClick: () => {
+          openDetailDialog(row.original);
+        },
+      },
+      [
+        h("div", { class: "font-medium text-foreground" }, row.original.email || row.original.id || "—"),
+        h("div", { class: "mt-1 text-xs text-foreground/60" }, row.original.username ? `@${row.original.username}` : row.original.id || "—"),
+      ]
+    ),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "role",
+    header: "Role",
+    accessorFn: (row) => row.role || "USER",
+    cell: ({ row }) => h(
+      "span",
+      {
+        class: `inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ${roleBadgeClass(row.original.role)}`,
+      },
+      row.original.role || "USER"
+    ),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "plan",
+    header: "Plan",
+    accessorFn: (row) => row.planName || row.planId || "Free",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.planName || row.original.planId || "Free"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "videos",
+    header: "Videos",
+    accessorFn: (row) => row.videoCount ?? 0,
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, String(row.original.videoCount ?? 0)),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "created",
+    header: "Created",
+    accessorFn: (row) => row.createdAt || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/60" }, formatDate(row.original.createdAt)),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => h("div", { class: "flex justify-end gap-2" }, [
+      h(AppButton, { size: "sm", variant: "secondary", onClick: () => openEditDialog(row.original) }, { default: () => "Edit" }),
+      h(AppButton, { size: "sm", variant: "ghost", onClick: () => openRoleDialog(row.original) }, { default: () => "Role" }),
+      h(AppButton, { size: "sm", variant: "ghost", onClick: () => openReferralDialog(row.original) }, { default: () => "Referral" }),
+      h(AppButton, { size: "sm", variant: "danger", onClick: () => openDeleteDialog(row.original) }, { default: () => "Delete" }),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+]);
+
+watch(roleFilter, async () => {
+  page.value = 1;
+  await loadUsers();
+});
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Access',
+  badge: loading.value ? 'Syncing user directory' : `${total.value} records loaded`,
+  actions: [
+    {
+      label: 'Refresh',
+      variant: 'secondary',
+      loading: loading.value,
+      onClick: loadUsers,
+    },
+    {
+      label: 'Create user',
+      onClick: () => {
+        actionError.value = null;
+        createOpen.value = true;
+      },
+    },
+  ],
+}));
+
+onMounted(loadUsers);
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Filters" description="Find users by email, username or role." bodyClass="p-5">
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+          <div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_180px] lg:min-w-[560px]">
+            <div class="space-y-2">
+              <label class="text-xs font-medium text-foreground/60">Search</label>
+              <AdminInput v-model="search" placeholder="Search by email or username" @enter="applyFilters" />
+            </div>
+            <div class="space-y-2">
+              <label class="text-xs font-medium text-foreground/60">Role filter</label>
+              <AdminSelect v-model="roleFilter">
+                <option v-for="role in roleFilterOptions" :key="role || 'all'" :value="role">{{ role || 'ALL' }}</option>
+              </AdminSelect>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <AppButton size="sm" variant="ghost" @click="search = ''; appliedSearch = ''; roleFilter = ''; loadUsers()">Reset</AppButton>
+            <AppButton size="sm" variant="secondary" @click="applyFilters">Apply filters</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+        {{ error }}
+      </div>
+
+      <AdminSectionCard v-else title="Users" :description="`${total} records across ${totalPages} pages.`" bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="['User', 'Role', 'Plan', 'Videos', 'Created', 'Actions']" :rows="limit" />
+
+        <template v-else>
+          <AdminTable
+            :data="rows"
+            :columns="columns"
+            :get-row-id="(row) => row.id || row.email || ''"
+            wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent"
+            tableClass="w-full"
+            headerRowClass="bg-muted/30"
+            bodyRowClass="border-b border-border hover:bg-muted/30"
+          >
+            <template #empty>
+              <div class="px-6 py-12 text-center">
+                <p class="mb-1 text-sm text-foreground/60">No users matched the current filters.</p>
+                <p class="text-xs text-foreground/40">Try clearing the search term or switching the selected role.</p>
+              </div>
+            </template>
+          </AdminTable>
+
+          <div class="flex flex-col gap-3 border-t border-border bg-muted/20 px-4 py-3 md:flex-row md:items-center md:justify-between">
+            <div class="text-xs text-foreground/55">
+              Page {{ page }} of {{ totalPages }} · {{ total }} records
+            </div>
+            <div class="flex items-center gap-2">
+              <AppButton size="sm" variant="secondary" :disabled="page <= 1 || loading" @click="previousPage">Previous</AppButton>
+              <AppButton size="sm" variant="secondary" :disabled="page >= totalPages || loading" @click="nextPage">Next</AppButton>
+            </div>
+          </div>
+        </template>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="createOpen" title="Create admin user" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <AdminUserFormFields
+        mode="create"
+        v-model:email="createForm.email"
+        v-model:username="createForm.username"
+        v-model:role="createForm.role"
+        v-model:password="createForm.password"
+        v-model:plan-id="createForm.planId"
+        :role-options="roleOptions"
+        :load-plan-options="planOptionsLoader"
+      />
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="detailOpen" title="User details" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ selectedRow.email }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.username ? `@${selectedRow.username}` : 'No username' }}</div>
+      </div>
+
+      <div class="grid gap-3">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openReferralDialog(selectedRow)">Referral</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openEditDialog(selectedRow)">Edit</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="editOpen" title="Edit user" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <AdminUserFormFields
+        mode="edit"
+        v-model:email="editForm.email"
+        v-model:username="editForm.username"
+        v-model:role="editForm.role"
+        v-model:password="editForm.password"
+        v-model:plan-id="editForm.planId"
+        :role-options="roleOptions"
+        :load-plan-options="planOptionsLoader"
+      />
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdate" @click="submitEdit">Save</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="roleOpen" title="Update user role" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="space-y-2">
+        <label class="text-sm font-medium text-foreground/70">Role</label>
+        <AdminSelect v-model="roleForm.role">
+          <option v-for="role in roleOptions" :key="role" :value="role">{{ role }}</option>
+        </AdminSelect>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdateRole" @click="submitRole">Update role</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="referralOpen" title="Referral settings" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="space-y-2">
+        <label class="text-sm font-medium text-foreground/70">Referrer username</label>
+        <AdminInput v-model="referralForm.refUsername" placeholder="alice" :disabled="referralForm.clearReferrer" />
+      </div>
+      <label class="flex items-center gap-2 text-sm text-foreground/70">
+        <input v-model="referralForm.clearReferrer" type="checkbox" />
+        Clear current referrer
+      </label>
+      <label class="flex items-center gap-2 text-sm text-foreground/70">
+        <input v-model="referralForm.referralEligible" type="checkbox" />
+        Referral eligible
+      </label>
+      <div class="space-y-2">
+        <label class="text-sm font-medium text-foreground/70">Reward override percent</label>
+        <AdminInput v-model="referralForm.rewardPercent" placeholder="5" :disabled="referralForm.clearRewardPercent" />
+      </div>
+      <label class="flex items-center gap-2 text-sm text-foreground/70">
+        <input v-model="referralForm.clearRewardPercent" type="checkbox" />
+        Clear reward override
+      </label>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdateReferral" @click="submitReferral">Save referral</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="deleteOpen" title="Delete user" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Delete <span class="font-medium">{{ selectedRow?.email || selectedRow?.id }}</span> and related data.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton variant="danger" size="sm" :loading="submitting" @click="submitDelete">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/Videos.vue b/src/routes/settings/admin/Videos.vue
new file mode 100644
index 0000000..3e2ec36
--- /dev/null
+++ b/src/routes/settings/admin/Videos.vue
@@ -0,0 +1,621 @@
+<script setup lang="ts">
+import { client as rpcClient } from "@/api/rpcclient";
+import AppButton from "@/components/ui/AppButton.vue";
+import AppDialog from "@/components/ui/AppDialog.vue";
+import AdminInput from "./components/AdminInput.vue";
+import AdminSelect from "./components/AdminSelect.vue";
+import AdminTextarea from "./components/AdminTextarea.vue";
+import AdminTable from "./components/AdminTable.vue";
+import AdminSectionCard from "./components/AdminSectionCard.vue";
+import { type ColumnDef } from "@tanstack/vue-table";
+import { computed, h, onMounted, reactive, ref, watch } from "vue";
+import AdminMetricCard from "./components/AdminMetricCard.vue";
+import AdminPlaceholderTable from "./components/AdminPlaceholderTable.vue";
+import AdminSectionShell from "./components/AdminSectionShell.vue";
+import { useAdminPageHeader } from "./components/useAdminPageHeader";
+
+type ListVideosResponse = Awaited<ReturnType<typeof rpcClient.listAdminVideos>>;
+type AdminVideoRow = NonNullable<ListVideosResponse["videos"]>[number];
+
+const statusOptions = ["UPLOADED", "PROCESSING", "READY", "FAILED"] as const;
+const statusFilterOptions = ["", ...statusOptions] as const;
+
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref<string | null>(null);
+const actionError = ref<string | null>(null);
+const rows = ref<AdminVideoRow[]>([]);
+const total = ref(0);
+const limit = ref(12);
+const page = ref(1);
+const selectedRow = ref<AdminVideoRow | null>(null);
+const search = ref("");
+const appliedSearch = ref("");
+const ownerFilter = ref("");
+const appliedOwnerFilter = ref("");
+const statusFilter = ref<(typeof statusFilterOptions)[number]>("");
+const createOpen = ref(false);
+const detailOpen = ref(false);
+const editOpen = ref(false);
+const deleteOpen = ref(false);
+
+const createForm = reactive({
+  userId: "",
+  title: "",
+  description: "",
+  url: "",
+  size: null as number | null,
+  duration: null as number | null,
+  format: "",
+  status: "READY",
+  adTemplateId: "",
+});
+
+const editForm = reactive({
+  id: "",
+  userId: "",
+  title: "",
+  description: "",
+  url: "",
+  size: null as number | null,
+  duration: null as number | null,
+  format: "",
+  status: "READY",
+  adTemplateId: "",
+});
+
+const canCreate = computed(() => createForm.userId.trim() && createForm.title.trim() && createForm.url.trim() && createForm.status.trim());
+const canUpdate = computed(() => editForm.id.trim() && editForm.userId.trim() && editForm.title.trim() && editForm.url.trim() && editForm.status.trim());
+const totalPages = computed(() => Math.max(1, Math.ceil((total.value || 0) / limit.value)));
+const summary = computed(() => [
+  { label: "Visible videos", value: rows.value.length },
+  { label: "Ready assets", value: rows.value.filter((row) => row.status === "READY").length },
+  { label: "Processing", value: rows.value.filter((row) => row.status === "PROCESSING").length },
+  { label: "Total records", value: total.value },
+]);
+const selectedMeta = computed(() => {
+  if (!selectedRow.value) return [];
+  return [
+    { label: "Owner", value: selectedRow.value.ownerEmail || selectedRow.value.userId || "—" },
+    { label: "Status", value: selectedRow.value.status || "—" },
+    { label: "Format", value: selectedRow.value.format || "—" },
+    { label: "Size", value: formatBytes(selectedRow.value.size) },
+    { label: "Duration", value: formatDuration(selectedRow.value.duration) },
+    { label: "Updated", value: formatDate(selectedRow.value.updatedAt || selectedRow.value.createdAt) },
+  ];
+});
+
+const normalizeOptional = (value: string) => {
+  const trimmed = value.trim();
+  return trimmed ? trimmed : undefined;
+};
+
+const normalizeNumber = (value: number | null) => (value == null ? undefined : value);
+
+const resetCreateForm = () => {
+  createForm.userId = "";
+  createForm.title = "";
+  createForm.description = "";
+  createForm.url = "";
+  createForm.size = null;
+  createForm.duration = null;
+  createForm.format = "";
+  createForm.status = "READY";
+  createForm.adTemplateId = "";
+};
+
+const closeDialogs = () => {
+  createOpen.value = false;
+  detailOpen.value = false;
+  editOpen.value = false;
+  deleteOpen.value = false;
+  actionError.value = null;
+};
+
+const syncSelectedRow = () => {
+  if (!selectedRow.value?.id) return;
+  const fresh = rows.value.find((row) => row.id === selectedRow.value?.id);
+  if (fresh && (detailOpen.value || editOpen.value || deleteOpen.value)) selectedRow.value = fresh;
+};
+
+const loadVideos = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listAdminVideos({
+      page: page.value,
+      limit: limit.value,
+      search: appliedSearch.value.trim() || undefined,
+      userId: appliedOwnerFilter.value.trim() || undefined,
+      status: statusFilter.value || undefined,
+    });
+    rows.value = response.videos ?? [];
+    total.value = response.total ?? rows.value.length;
+    limit.value = response.limit ?? limit.value;
+    page.value = response.page ?? page.value;
+    syncSelectedRow();
+  } catch (err: any) {
+    error.value = err?.message || "Failed to load admin videos";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const applyFilters = async () => {
+  page.value = 1;
+  appliedSearch.value = search.value;
+  appliedOwnerFilter.value = ownerFilter.value;
+  await loadVideos();
+};
+
+const openDetailDialog = (row: AdminVideoRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  detailOpen.value = true;
+};
+
+const openEditDialog = (row: AdminVideoRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  editForm.id = row.id || "";
+  editForm.userId = row.userId || "";
+  editForm.title = row.title || "";
+  editForm.description = row.description || "";
+  editForm.url = row.url || "";
+  editForm.size = row.size ?? null;
+  editForm.duration = row.duration ?? null;
+  editForm.format = row.format || "";
+  editForm.status = row.status || "READY";
+  editForm.adTemplateId = row.adTemplateId || "";
+  editOpen.value = true;
+};
+
+const openDeleteDialog = (row: AdminVideoRow) => {
+  selectedRow.value = row;
+  actionError.value = null;
+  deleteOpen.value = true;
+};
+
+const submitCreate = async () => {
+  if (!canCreate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.createAdminVideo({
+      userId: createForm.userId.trim(),
+      title: createForm.title.trim(),
+      description: normalizeOptional(createForm.description),
+      url: createForm.url.trim(),
+      size: normalizeNumber(createForm.size),
+      duration: normalizeNumber(createForm.duration),
+      format: normalizeOptional(createForm.format),
+      status: createForm.status,
+      adTemplateId: normalizeOptional(createForm.adTemplateId),
+    });
+    resetCreateForm();
+    createOpen.value = false;
+    await loadVideos();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to create video";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitEdit = async () => {
+  if (!canUpdate.value) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.updateAdminVideo({
+      id: editForm.id,
+      userId: editForm.userId.trim(),
+      title: editForm.title.trim(),
+      description: normalizeOptional(editForm.description),
+      url: editForm.url.trim(),
+      size: normalizeNumber(editForm.size),
+      duration: normalizeNumber(editForm.duration),
+      format: normalizeOptional(editForm.format),
+      status: editForm.status,
+      adTemplateId: normalizeOptional(editForm.adTemplateId),
+    });
+    editOpen.value = false;
+    await loadVideos();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to update video";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const submitDelete = async () => {
+  if (!selectedRow.value?.id) return;
+  submitting.value = true;
+  actionError.value = null;
+  try {
+    await rpcClient.deleteAdminVideo({ id: selectedRow.value.id });
+    deleteOpen.value = false;
+    selectedRow.value = null;
+    if (page.value > 1 && rows.value.length === 1) page.value -= 1;
+    await loadVideos();
+  } catch (err: any) {
+    actionError.value = err?.message || "Failed to delete video";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const previousPage = async () => {
+  if (page.value <= 1) return;
+  page.value -= 1;
+  await loadVideos();
+};
+
+const nextPage = async () => {
+  if (page.value >= totalPages.value) return;
+  page.value += 1;
+  await loadVideos();
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+
+const formatBytes = (value?: number) => {
+  const bytes = Number(value || 0);
+  if (!bytes) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const normalized = bytes / 1024 ** index;
+  return `${normalized.toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
+};
+
+const formatDuration = (value?: number) => {
+  const seconds = Number(value || 0);
+  if (!seconds) return "—";
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${String(secs).padStart(2, "0")}`;
+};
+
+const statusBadgeClass = (status?: string) => {
+  switch (status) {
+    case "READY":
+      return "border-emerald-200 bg-emerald-50 text-emerald-700";
+    case "PROCESSING":
+      return "border-amber-200 bg-amber-50 text-amber-700";
+    case "FAILED":
+      return "border-rose-200 bg-rose-50 text-rose-700";
+    default:
+      return "border-border bg-muted/40 text-foreground/70";
+  }
+};
+
+const columns = computed<ColumnDef<AdminVideoRow>[]>(() => [
+  {
+    id: "video",
+    header: "Video",
+    accessorFn: row => row.title || "",
+    cell: ({ row }) => h("button", { class: "text-left", onClick: () => { openDetailDialog(row.original); } }, [
+      h("div", { class: "font-medium text-foreground" }, row.original.title),
+      h("div", { class: "mt-1 text-xs text-foreground/60" }, row.original.ownerEmail || row.original.userId || "No owner"),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "owner",
+    header: "Owner",
+    accessorFn: row => row.ownerEmail || row.userId || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.ownerEmail || row.original.userId || "—"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessorFn: row => row.status || "",
+    cell: ({ row }) => h("span", {
+      class: ["inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ", statusBadgeClass(row.original.status)],
+    }, row.original.status || "UNKNOWN"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "format",
+    header: "Format",
+    accessorFn: row => row.format || "",
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, row.original.format || "—"),
+    meta: {
+      headerClass: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3",
+    },
+  },
+  {
+    id: "size",
+    header: "Size",
+    accessorFn: row => Number(row.size ?? 0),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, formatBytes(row.original.size)),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+  {
+    id: "duration",
+    header: "Duration",
+    accessorFn: row => Number(row.duration ?? 0),
+    cell: ({ row }) => h("span", { class: "text-foreground/70" }, formatDuration(row.original.duration)),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => h("div", { class: "flex justify-end gap-2" }, [
+      h(AppButton, { size: "sm", variant: "secondary", onClick: () => openEditDialog(row.original) }, { default: () => "Edit" }),
+      h(AppButton, { size: "sm", variant: "danger", onClick: () => openDeleteDialog(row.original) }, { default: () => "Delete" }),
+    ]),
+    meta: {
+      headerClass: "px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-foreground/50",
+      cellClass: "px-4 py-3 text-right",
+    },
+  },
+]);
+
+useAdminPageHeader(() => ({
+  eyebrow: 'Media',
+  badge: loading.value ? 'Syncing media inventory' : `${total.value} total videos`,
+  actions: [
+    {
+      label: 'Refresh',
+      variant: 'secondary',
+      loading: loading.value,
+      onClick: loadVideos,
+    },
+    {
+      label: 'Create video',
+      onClick: () => {
+        actionError.value = null;
+        createOpen.value = true;
+      },
+    },
+  ],
+}));
+
+watch(statusFilter, async () => {
+  page.value = 1;
+  await loadVideos();
+});
+
+onMounted(loadVideos);
+</script>
+
+<template>
+  <AdminSectionShell>
+
+    <template #stats>
+      <AdminMetricCard
+        v-for="item in summary"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <AdminSectionCard title="Filters" description="Search videos by title and narrow by owner reference or status." bodyClass="p-5">
+        <div class="grid gap-3 xl:grid-cols-[minmax(0,1fr)_220px_180px_auto] xl:items-end">
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Search</label>
+            <AdminInput v-model="search" placeholder="Search by title" @enter="applyFilters" />
+          </div>
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Owner reference</label>
+            <AdminInput v-model="ownerFilter" placeholder="Optional owner reference" @enter="applyFilters" />
+          </div>
+          <div class="space-y-2">
+            <label class="text-xs font-medium text-foreground/60">Status</label>
+            <AdminSelect v-model="statusFilter">
+              <option v-for="status in statusFilterOptions" :key="status || 'all'" :value="status">{{ status || 'ALL' }}</option>
+            </AdminSelect>
+          </div>
+          <div class="flex items-center gap-2 xl:justify-end">
+            <AppButton size="sm" variant="ghost" @click="search = ''; ownerFilter = ''; appliedSearch = ''; appliedOwnerFilter = ''; statusFilter = ''; loadVideos()">Reset</AppButton>
+            <AppButton size="sm" variant="secondary" @click="applyFilters">Apply</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+
+      <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+        {{ error }}
+      </div>
+
+      <AdminSectionCard v-else title="Videos" description="Video inventory and moderation actions." bodyClass="">
+        <AdminPlaceholderTable v-if="loading" :columns="7" :rows="4" />
+
+        <AdminTable
+          v-else
+          :data="rows"
+          :columns="columns"
+          :get-row-id="(row) => row.id || row.title || ''"
+          wrapperClass="border-x-0 border-t-0 rounded-none bg-transparent"
+          tableClass="w-full"
+          headerRowClass="bg-muted/30"
+          bodyRowClass="border-b border-border hover:bg-muted/30"
+        >
+          <template #empty>
+            <div class="px-6 py-12 text-center">
+              <p class="mb-1 text-sm text-foreground/60">No videos matched the current filters.</p>
+              <p class="text-xs text-foreground/40">Try a broader title or clear the owner and status filters.</p>
+            </div>
+          </template>
+        </AdminTable>
+
+        <div class="flex flex-col gap-3 border-t border-border bg-muted/20 px-6 py-4 md:flex-row md:items-center md:justify-between">
+          <div class="text-xs text-foreground/55">Page {{ page }} of {{ totalPages }} · {{ total }} records</div>
+          <div class="flex items-center gap-2">
+            <AppButton size="sm" variant="secondary" :disabled="page <= 1 || loading" @click="previousPage">Previous</AppButton>
+            <AppButton size="sm" variant="secondary" :disabled="page >= totalPages || loading" @click="nextPage">Next</AppButton>
+          </div>
+        </div>
+      </AdminSectionCard>
+    </div>
+  </AdminSectionShell>
+
+  <AppDialog v-model:visible="detailOpen" title="Video details" maxWidthClass="max-w-lg" @close="actionError = null">
+    <div v-if="selectedRow" class="space-y-4">
+      <div>
+        <div class="text-lg font-semibold text-foreground">{{ selectedRow.title }}</div>
+        <div class="mt-1 text-sm text-foreground/60">{{ selectedRow.ownerEmail || selectedRow.userId || 'No owner' }}</div>
+      </div>
+      <div class="grid gap-3">
+        <div v-for="item in selectedMeta" :key="item.label" class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+          <div class="text-[11px] font-medium text-foreground/55">{{ item.label }}</div>
+          <div class="mt-1 text-sm font-medium text-foreground">{{ item.value }}</div>
+        </div>
+      </div>
+      <div class="rounded-lg border border-border bg-muted/20 px-4 py-3">
+        <div class="text-[11px] font-medium text-foreground/55">Source URL</div>
+        <div class="mt-2 break-all text-sm text-foreground/70">{{ selectedRow.url }}</div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" @click="detailOpen = false">Close</AppButton>
+        <AppButton size="sm" @click="detailOpen = false; selectedRow && openEditDialog(selectedRow)">Edit</AppButton>
+        <AppButton variant="danger" size="sm" @click="detailOpen = false; selectedRow && openDeleteDialog(selectedRow)">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="createOpen" title="Create admin video" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Owner user ID</label>
+          <AdminInput v-model="createForm.userId" placeholder="user-id" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Status</label>
+          <AdminSelect v-model="createForm.status">
+            <option v-for="status in statusOptions" :key="status" :value="status">{{ status }}</option>
+          </AdminSelect>
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Title</label>
+          <AdminInput v-model="createForm.title" placeholder="Video title" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Video URL</label>
+          <AdminInput v-model="createForm.url" placeholder="https://..." />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="createForm.description" rows="3" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Format</label>
+          <AdminInput v-model="createForm.format" placeholder="mp4" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Ad template ID</label>
+          <AdminInput v-model="createForm.adTemplateId" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Size</label>
+          <AdminInput v-model="createForm.size" type="number" placeholder="0" min="0" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Duration</label>
+          <AdminInput v-model="createForm.duration" type="number" placeholder="0" min="0" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canCreate" @click="submitCreate">Create</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="editOpen" title="Edit video" maxWidthClass="max-w-2xl" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Owner user ID</label>
+          <AdminInput v-model="editForm.userId" placeholder="user-id" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Status</label>
+          <AdminSelect v-model="editForm.status">
+            <option v-for="status in statusOptions" :key="status" :value="status">{{ status }}</option>
+          </AdminSelect>
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Title</label>
+          <AdminInput v-model="editForm.title" placeholder="Video title" />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Video URL</label>
+          <AdminInput v-model="editForm.url" placeholder="https://..." />
+        </div>
+        <div class="space-y-2 md:col-span-2">
+          <label class="text-sm font-medium text-foreground/70">Description</label>
+          <AdminTextarea v-model="editForm.description" rows="3" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Format</label>
+          <AdminInput v-model="editForm.format" placeholder="mp4" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Ad template ID</label>
+          <AdminInput v-model="editForm.adTemplateId" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Size</label>
+          <AdminInput v-model="editForm.size" type="number" placeholder="0" min="0" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-foreground/70">Duration</label>
+          <AdminInput v-model="editForm.duration" type="number" placeholder="0" min="0" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton size="sm" :loading="submitting" :disabled="!canUpdate" @click="submitEdit">Save</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-model:visible="deleteOpen" title="Delete video" maxWidthClass="max-w-md" @close="actionError = null">
+    <div class="space-y-4">
+      <div v-if="actionError" class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{{ actionError }}</div>
+      <p class="text-sm text-foreground/70">
+        Delete video <span class="font-medium">{{ selectedRow?.title || 'this video' }}</span>.
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <AppButton variant="secondary" size="sm" :disabled="submitting" @click="closeDialogs">Cancel</AppButton>
+        <AppButton variant="danger" size="sm" :loading="submitting" @click="submitDelete">Delete</AppButton>
+      </div>
+    </template>
+  </AppDialog>
+</template>
diff --git a/src/routes/settings/admin/components/AdminInput.vue b/src/routes/settings/admin/components/AdminInput.vue
new file mode 100644
index 0000000..e1c9b06
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminInput.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AppInput from '@/components/ui/AppInput.vue';
+
+defineProps<{
+  modelValue?: string | number | null;
+  type?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  disabled?: boolean;
+  id?: string;
+  name?: string;
+  autocomplete?: string;
+  min?: number | string;
+  max?: number | string;
+  step?: number | string;
+  maxlength?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | null): void;
+  (e: 'enter'): void;
+}>();
+</script>
+
+<template>
+  <AppInput
+    :model-value="modelValue"
+    :type="type"
+    :placeholder="placeholder"
+    :readonly="readonly"
+    :disabled="disabled"
+    :id="id"
+    :name="name"
+    :autocomplete="autocomplete"
+    :min="min"
+    :max="max"
+    :step="step"
+    :maxlength="maxlength"
+    inputClass="bg-white py-1.5 text-sm text-foreground placeholder:text-foreground/45 focus:border-primary/40 focus:ring-primary/15"
+    @update:model-value="emit('update:modelValue', $event)"
+    @enter="emit('enter')"
+  >
+    <template v-if="$slots.prefix" #prefix>
+      <slot name="prefix" />
+    </template>
+  </AppInput>
+</template>
diff --git a/src/routes/settings/admin/components/AdminMetricCard.vue b/src/routes/settings/admin/components/AdminMetricCard.vue
new file mode 100644
index 0000000..6fc5886
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminMetricCard.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  label: string;
+  value: string | number;
+  hint?: string;
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+}>(), {
+  hint: '',
+  tone: 'accent',
+});
+
+const dotClass = computed(() => {
+  const tones = {
+    accent: 'bg-primary text-primary',
+    success: 'bg-emerald-500 text-emerald-500',
+    warning: 'bg-amber-500 text-amber-500',
+    danger: 'bg-rose-500 text-rose-500',
+    neutral: 'bg-slate-400 text-slate-400',
+  } as const;
+
+  return tones[props.tone];
+});
+</script>
+
+<template>
+  <article class="overflow-hidden rounded-lg border border-border bg-background px-4 py-3.5">
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0">
+        <p class="text-[11px] font-medium text-foreground/55">
+          {{ label }}
+        </p>
+        <div class="mt-2 break-words text-[28px] leading-8 font-semibold text-foreground">
+          {{ value }}
+        </div>
+        <p v-if="hint" class="mt-2 text-xs leading-5 text-foreground/60">
+          {{ hint }}
+        </p>
+      </div>
+
+      <span :class="cn('mt-1 inline-flex h-2 w-2 shrink-0 rounded-full border border-current/20', dotClass)" />
+    </div>
+  </article>
+</template>
diff --git a/src/routes/settings/admin/components/AdminPlaceholderTable.vue b/src/routes/settings/admin/components/AdminPlaceholderTable.vue
new file mode 100644
index 0000000..cba6d92
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminPlaceholderTable.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { ColumnDef } from '@tanstack/vue-table';
+import { computed, h } from 'vue';
+import AdminTable from './AdminTable.vue';
+
+const props = withDefaults(defineProps<{
+  columns?: number | string[];
+  rows?: number;
+}>(), {
+  columns: 3,
+  rows: 4,
+});
+
+type SkeletonRow = { id: string };
+
+const data = computed<SkeletonRow[]>(() =>
+  Array.from({ length: props.rows }, (_, index) => ({ id: `placeholder-${index}` }))
+);
+
+const columnCount = computed(() => Array.isArray(props.columns) ? props.columns.length : props.columns);
+
+const tableColumns = computed<ColumnDef<SkeletonRow>[]>(() =>
+  Array.from({ length: columnCount.value }, (_, index) => ({
+    id: `column-${index + 1}`,
+    header: () => h('div', { class: 'h-3 w-20 rounded bg-muted/50 animate-pulse' }),
+    cell: () => h('div', { class: 'space-y-2' }, [
+      h('div', {
+        class: [
+          'h-4 rounded bg-muted/50',
+          index + 1 === columnCount.value ? 'ml-auto w-16' : 'w-full max-w-[12rem]',
+        ],
+      }),
+      index === 0 ? h('div', { class: 'h-3 w-24 rounded bg-muted/40' }) : null,
+    ]),
+    enableSorting: false,
+    meta: {
+      headerClass: 'px-4 py-3',
+      cellClass: 'px-4 py-4',
+    },
+  }))
+);
+</script>
+
+<template>
+  <AdminTable
+    :data="data"
+    :columns="tableColumns"
+    wrapperClass="border-0 rounded-none bg-transparent"
+    bodyRowClass="animate-pulse border-b border-border hover:bg-transparent"
+  />
+</template>
diff --git a/src/routes/settings/admin/components/AdminSectionCard.vue b/src/routes/settings/admin/components/AdminSectionCard.vue
new file mode 100644
index 0000000..028a059
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminSectionCard.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
+
+const props = withDefaults(defineProps<{
+  title?: string;
+  description?: string;
+  bodyClass?: string;
+  headerClass?: string;
+  titleClass?: string;
+  descriptionClass?: string;
+}>(), {
+  title: '',
+  description: '',
+  bodyClass: '',
+  headerClass: '',
+  titleClass: '',
+  descriptionClass: '',
+});
+</script>
+
+<template>
+  <SettingsSectionCard
+    class="admin-section-card"
+    :title="props.title"
+    :description="props.description"
+    :bodyClass="props.bodyClass === undefined ? 'p-4' : props.bodyClass"
+    :headerClass="cn('bg-header', props.headerClass)"
+    :titleClass="cn('text-sm font-semibold text-foreground', props.titleClass)"
+    :descriptionClass="cn('mt-0.5 text-xs leading-5 text-foreground/60', props.descriptionClass)"
+  >
+    <template v-if="$slots['header-actions']" #header-actions>
+      <slot name="header-actions" />
+    </template>
+
+    <slot />
+  </SettingsSectionCard>
+</template>
+
+<style scoped>
+.admin-section-card {
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+</style>
diff --git a/src/routes/settings/admin/components/AdminSectionShell.vue b/src/routes/settings/admin/components/AdminSectionShell.vue
new file mode 100644
index 0000000..6391a77
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminSectionShell.vue
@@ -0,0 +1,11 @@
+<template>
+  <section class="space-y-4">
+    <div v-if="$slots.stats" class="grid gap-3 sm:grid-cols-2 2xl:grid-cols-4">
+      <slot name="stats" />
+    </div>
+
+    <div class="min-w-0 space-y-4">
+      <slot />
+    </div>
+  </section>
+</template>
diff --git a/src/routes/settings/admin/components/AdminSelect.vue b/src/routes/settings/admin/components/AdminSelect.vue
new file mode 100644
index 0000000..03740bf
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminSelect.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | number | null;
+  disabled?: boolean;
+  id?: string;
+  name?: string;
+  class?: string;
+}>(), {
+  modelValue: '',
+  disabled: false,
+  id: undefined,
+  name: undefined,
+  class: '',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const onChange = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLSelectElement).value);
+};
+</script>
+
+<template>
+  <select
+    :id="props.id"
+    :name="props.name"
+    :value="props.modelValue ?? ''"
+    :disabled="props.disabled"
+    :class="cn('w-full rounded-md border border-border bg-white px-3 py-1.5 text-sm text-foreground focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-60', props.class)"
+    @change="onChange"
+  >
+    <slot />
+  </select>
+</template>
diff --git a/src/routes/settings/admin/components/AdminTable.vue b/src/routes/settings/admin/components/AdminTable.vue
new file mode 100644
index 0000000..031c9b9
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminTable.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts" generic="TData extends Record<string, any>">
+import BaseTable from '@/components/ui/BaseTable.vue';
+import { cn } from '@/lib/utils';
+import type { ColumnDef, Row } from '@tanstack/vue-table';
+
+const props = withDefaults(defineProps<{
+  data: TData[];
+  columns: ColumnDef<TData, any>[];
+  loading?: boolean;
+  emptyText?: string;
+  tableClass?: string;
+  wrapperClass?: string;
+  headerRowClass?: string;
+  bodyRowClass?: string | ((row: Row<TData>) => string | undefined);
+  getRowId?: (originalRow: TData, index: number) => string;
+}>(), {
+  loading: false,
+  emptyText: 'No data available.',
+  tableClass: '',
+  wrapperClass: '',
+  headerRowClass: '',
+  bodyRowClass: '',
+});
+
+function resolveBodyRowClass(row: Row<TData>) {
+  const extra = typeof props.bodyRowClass === 'function'
+    ? props.bodyRowClass(row)
+    : props.bodyRowClass;
+
+  return cn('border-b border-border hover:bg-header/60', extra);
+}
+</script>
+
+<template>
+  <div class="admin-primer-table">
+    <BaseTable
+      :data="props.data"
+      :columns="props.columns"
+      :loading="props.loading"
+      :empty-text="props.emptyText"
+      :table-class="cn('w-full', props.tableClass)"
+      :wrapper-class="cn('border-x-0 border-t-0 rounded-none bg-transparent', props.wrapperClass)"
+      :header-row-class="cn('bg-header', props.headerRowClass)"
+      :body-row-class="resolveBodyRowClass"
+      :get-row-id="props.getRowId"
+    >
+      <template #loading>
+        <slot name="loading">
+          Loading...
+        </slot>
+      </template>
+
+      <template #empty>
+        <slot name="empty">
+          {{ props.emptyText }}
+        </slot>
+      </template>
+    </BaseTable>
+  </div>
+</template>
+
+<style scoped>
+.admin-primer-table :deep(th) {
+  padding: 0.5rem 0.75rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+  font-weight: 600 !important;
+}
+
+.admin-primer-table :deep(td) {
+  padding: 0.625rem 0.75rem !important;
+}
+</style>
diff --git a/src/routes/settings/admin/components/AdminTextarea.vue b/src/routes/settings/admin/components/AdminTextarea.vue
new file mode 100644
index 0000000..74cbc55
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminTextarea.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | number | null;
+  rows?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  class?: string;
+}>(), {
+  modelValue: '',
+  rows: 3,
+  placeholder: '',
+  disabled: false,
+  class: '',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const onInput = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLTextAreaElement).value);
+};
+</script>
+
+<template>
+  <textarea
+    :value="props.modelValue ?? ''"
+    :rows="props.rows"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    :class="cn('w-full rounded-md border border-border bg-white px-3 py-2 text-sm text-foreground placeholder:text-foreground/45 focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-60', props.class)"
+    @input="onInput"
+  />
+</template>
diff --git a/src/routes/settings/admin/components/AdminUserFormFields.vue b/src/routes/settings/admin/components/AdminUserFormFields.vue
new file mode 100644
index 0000000..2822dab
--- /dev/null
+++ b/src/routes/settings/admin/components/AdminUserFormFields.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import AsyncSelect from '@/components/ui/AsyncSelect.vue';
+import AdminInput from './AdminInput.vue';
+import AdminSelect from './AdminSelect.vue';
+
+defineProps<{
+  mode: 'create' | 'edit';
+  roleOptions: readonly string[];
+  loadPlanOptions: () => Promise<{ label: string; value: string | number }[]>;
+}>();
+
+const email = defineModel<string>('email', { default: '' });
+const username = defineModel<string>('username', { default: '' });
+const role = defineModel<string>('role', { default: 'USER' });
+const password = defineModel<string>('password', { default: '' });
+const planId = defineModel<string>('planId', { default: '' });
+</script>
+
+<template>
+  <div class="grid gap-4 md:grid-cols-2">
+    <div class="space-y-2 md:col-span-2">
+      <label class="text-sm font-medium text-foreground/70">Email</label>
+      <AdminInput v-model="email" placeholder="user@example.com" />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-foreground/70">Username</label>
+      <AdminInput v-model="username" placeholder="Optional" />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-foreground/70">Role</label>
+      <AdminSelect v-model="role">
+        <option v-for="item in roleOptions" :key="item" :value="item">{{ item }}</option>
+      </AdminSelect>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-foreground/70">
+        {{ mode === 'create' ? 'Password' : 'Reset password' }}
+      </label>
+      <AdminInput
+        v-model="password"
+        type="password"
+        :placeholder="mode === 'create' ? 'Minimum 6 characters' : 'Leave blank to keep current'"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-foreground/70">Plan</label>
+      <AsyncSelect
+        v-model="planId"
+        :load-options="loadPlanOptions"
+        placeholder="Select a plan"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/routes/settings/admin/components/useAdminPageHeader.ts b/src/routes/settings/admin/components/useAdminPageHeader.ts
new file mode 100644
index 0000000..654d3cb
--- /dev/null
+++ b/src/routes/settings/admin/components/useAdminPageHeader.ts
@@ -0,0 +1,52 @@
+import { inject, onBeforeUnmount, reactive, watchEffect, type VNode } from 'vue';
+
+export type AdminHeaderAction = {
+  label: string;
+  icon?: string | VNode;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  onClick: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export type AdminPageHeaderState = {
+  eyebrow?: string;
+  badge?: string;
+  actions: AdminHeaderAction[];
+  owner: symbol | null;
+};
+
+export const adminPageHeaderKey = Symbol('admin-page-header');
+
+export const createAdminPageHeaderState = (): AdminPageHeaderState => reactive({
+  eyebrow: undefined,
+  badge: undefined,
+  actions: [],
+  owner: null,
+});
+
+export const useAdminPageHeader = (getConfig: () => Omit<AdminPageHeaderState, 'owner'>) => {
+  const state = inject<AdminPageHeaderState | null>(adminPageHeaderKey, null);
+
+  if (!state) {
+    return;
+  }
+
+  const owner = Symbol('admin-page-header-owner');
+
+  watchEffect(() => {
+    const config = getConfig();
+    state.owner = owner;
+    state.eyebrow = config.eyebrow;
+    state.badge = config.badge;
+    state.actions = config.actions;
+  });
+
+  onBeforeUnmount(() => {
+    if (state.owner !== owner) return;
+    state.owner = null;
+    state.eyebrow = undefined;
+    state.badge = undefined;
+    state.actions = [];
+  });
+};
diff --git a/src/routes/settings/components/SettingsNotice.vue b/src/routes/settings/components/SettingsNotice.vue
new file mode 100644
index 0000000..5e0e3d3
--- /dev/null
+++ b/src/routes/settings/components/SettingsNotice.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import AlertTriangleIcon from '@/components/icons/AlertTriangleIcon.vue';
+import InfoIcon from '@/components/icons/InfoIcon.vue';
+import { cn } from '@/lib/utils';
+import { computed, useAttrs } from 'vue';
+
+defineOptions({ inheritAttrs: false });
+
+type Tone = 'info' | 'warning';
+
+const props = withDefaults(defineProps<{
+    tone?: Tone;
+    title?: string;
+    contentClass?: string;
+    titleClass?: string;
+    iconClass?: string;
+}>(), {
+    tone: 'info',
+    title: '',
+    contentClass: 'text-xs text-foreground/70',
+    titleClass: 'font-medium text-foreground mb-1',
+    iconClass: '',
+});
+
+const attrs = useAttrs();
+
+const rootClass = computed(() => cn(
+    'flex items-start gap-2 rounded-md border p-4',
+    props.tone === 'warning' ? 'border-warning/20 bg-warning/5' : 'border-info/20 bg-info/5',
+));
+
+const defaultIconClass = computed(() => cn(
+    'mt-0.5 h-4 w-4 shrink-0',
+    props.tone === 'warning' ? 'text-warning' : 'text-info',
+    props.iconClass,
+));
+</script>
+
+<template>
+    <div v-bind="attrs" :class="rootClass">
+        <slot name="icon">
+            <component :is="tone === 'warning' ? AlertTriangleIcon : InfoIcon" :class="defaultIconClass" />
+        </slot>
+
+        <div :class="contentClass">
+            <p v-if="title" :class="titleClass">{{ title }}</p>
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/src/routes/settings/components/SettingsRow.vue b/src/routes/settings/components/SettingsRow.vue
new file mode 100644
index 0000000..1cd6477
--- /dev/null
+++ b/src/routes/settings/components/SettingsRow.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed, useAttrs } from 'vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+    title: string;
+    description?: string;
+    iconBoxClass?: string;
+    hoverClass?: string;
+    titleClass?: string;
+    descriptionClass?: string;
+    actionsClass?: string;
+    rowClass?: string;
+}>(), {
+    description: '',
+    iconBoxClass: 'bg-muted text-foreground/70',
+    hoverClass: 'hover:bg-header',
+    titleClass: 'text-sm font-medium text-foreground',
+    descriptionClass: 'text-xs text-foreground/60 mt-0.5',
+    actionsClass: '',
+    rowClass: '',
+});
+
+const attrs = useAttrs();
+
+const rootClass = computed(() => cn(
+    'flex items-center justify-between gap-4 px-6 py-4 transition-all',
+    props.hoverClass,
+    props.rowClass,
+));
+
+const iconClass = computed(() => cn(
+    'w-10 h-10 rounded-md flex items-center justify-center shrink-0',
+    props.iconBoxClass,
+));
+
+const actionsWrapperClass = computed(() => cn('shrink-0', props.actionsClass));
+</script>
+
+<template>
+    <div v-bind="attrs" :class="rootClass">
+        <div class="flex min-w-0 items-center gap-4">
+            <div :class="iconClass">
+                <slot name="icon" class="h-6 w-6" />
+            </div>
+
+            <div class="min-w-0">
+                <p :class="titleClass">{{ title }}</p>
+                <p v-if="description" :class="descriptionClass">{{ description }}</p>
+            </div>
+        </div>
+
+        <div v-if="$slots.actions" :class="actionsWrapperClass">
+            <slot name="actions" />
+        </div>
+    </div>
+</template>
diff --git a/src/routes/settings/components/SettingsRowSkeleton.vue b/src/routes/settings/components/SettingsRowSkeleton.vue
new file mode 100644
index 0000000..e441f2e
--- /dev/null
+++ b/src/routes/settings/components/SettingsRowSkeleton.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<{
+  actionClass?: string;
+  titleClass?: string;
+  descriptionClass?: string;
+}>(), {
+  actionClass: 'h-6 w-11',
+  titleClass: 'w-32',
+  descriptionClass: 'w-56 max-w-full',
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between gap-4 px-6 py-4 animate-pulse">
+    <div class="flex min-w-0 items-center gap-4">
+      <div class="h-10 w-10 rounded-md bg-muted/50 shrink-0" />
+
+      <div class="min-w-0 space-y-2">
+        <div :class="cn('h-4 rounded bg-muted/50', titleClass)" />
+        <div :class="cn('h-3 rounded bg-muted/40', descriptionClass)" />
+      </div>
+    </div>
+
+    <div :class="cn('shrink-0 rounded-full bg-muted/50', actionClass)" />
+  </div>
+</template>
diff --git a/src/routes/settings/components/SettingsSectionCard.vue b/src/routes/settings/components/SettingsSectionCard.vue
new file mode 100644
index 0000000..0c46bbe
--- /dev/null
+++ b/src/routes/settings/components/SettingsSectionCard.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed, useAttrs } from 'vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+    title?: string;
+    description?: string;
+    bodyClass?: string;
+    headerClass?: string;
+    titleClass?: string;
+    descriptionClass?: string;
+}>(), {
+    title: '',
+    description: '',
+    bodyClass: 'divide-y divide-border',
+    headerClass: '',
+    titleClass: 'text-base font-semibold text-foreground',
+    descriptionClass: 'text-sm text-foreground/60 mt-0.5',
+});
+
+const attrs = useAttrs();
+
+const rootClass = computed(() => cn(
+    'bg-white border border-border rounded-lg',
+));
+</script>
+
+<template>
+    <div v-bind="attrs" :class="rootClass">
+        <div
+            v-if="title || description || $slots['header-actions']"
+            :class="cn(
+                'px-6 py-4 border-b border-border bg-header rounded-tl-lg rounded-tr-lg',
+                $slots['header-actions'] ? 'flex items-center justify-between gap-4' : '',
+                headerClass,
+            )"
+        >
+            <div class="min-w-0">
+                <h2 v-if="title" :class="titleClass">{{ title }}</h2>
+                <p v-if="description" :class="descriptionClass">{{ description }}</p>
+            </div>
+
+            <div v-if="$slots['header-actions']" class="shrink-0">
+                <slot name="header-actions" />
+            </div>
+        </div>
+
+        <div :class="bodyClass">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/src/routes/settings/components/SettingsTableSkeleton.vue b/src/routes/settings/components/SettingsTableSkeleton.vue
new file mode 100644
index 0000000..380c98b
--- /dev/null
+++ b/src/routes/settings/components/SettingsTableSkeleton.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import BaseTable from '@/components/ui/BaseTable.vue';
+import type { ColumnDef } from '@tanstack/vue-table';
+
+const props = withDefaults(defineProps<{
+  columns?: number;
+  rows?: number;
+}>(), {
+  columns: 3,
+  rows: 4,
+});
+
+type SkeletonRow = { id: string };
+
+const data = computed<SkeletonRow[]>(() =>
+  Array.from({ length: props.rows }, (_, index) => ({ id: `row-${index}` }))
+);
+
+const tableColumns = computed<ColumnDef<SkeletonRow>[]>(() =>
+  Array.from({ length: props.columns }, (_, index) => ({
+    id: `column-${index + 1}`,
+    header: () => h('div', { class: 'h-3 w-20 rounded bg-muted/50 animate-pulse' }),
+    cell: () => h('div', { class: 'space-y-2' }, [
+      h('div', {
+        class: [
+          'h-4 rounded bg-muted/50',
+          index + 1 === props.columns ? 'ml-auto w-16' : 'w-full max-w-[12rem]',
+        ],
+      }),
+      index === 0 ? h('div', { class: 'h-3 w-24 rounded bg-muted/40' }) : null,
+    ]),
+    enableSorting: false,
+    meta: {
+      headerClass: 'px-6 py-3',
+      cellClass: 'px-6 py-4',
+    },
+  }))
+);
+</script>
+
+<template>
+  <BaseTable
+    :data="data"
+    :columns="tableColumns"
+    wrapperClass="mt-4 border-b border-border rounded-none border-x-0 border-t-0 bg-transparent"
+    tableClass="w-full"
+    headerRowClass="bg-muted/30"
+    bodyRowClass="animate-pulse hover:bg-transparent"
+  />
+</template>
diff --git a/src/routes/upload/Upload.vue b/src/routes/upload/Upload.vue
new file mode 100644
index 0000000..aff69a8
--- /dev/null
+++ b/src/routes/upload/Upload.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import AppDialog from '@/components/ui/AppDialog.vue';
+import { useAppToast } from '@/composables/useAppToast';
+import { useUploadQueue } from '@/composables/useUploadQueue';
+import { useUIState } from '@/stores/uiState';
+import { useTranslation } from 'i18next-vue';
+import { ref } from 'vue';
+import RemoteUrlForm from './components/RemoteUrlForm.vue';
+import UploadDropzone from './components/UploadDropzone.vue';
+const uiState = useUIState();
+const toast = useAppToast();
+const mode = ref<'local' | 'remote'>('local');
+const { t } = useTranslation();
+
+const { addFiles, addRemoteUrls, pendingCount, startQueue, remainingSlots, maxItems } = useUploadQueue();
+
+const handleFilesSelected = (files: FileList) => {
+    const result = addFiles(files);
+    if (result.duplicates > 0) {
+        toast.add({
+            severity: 'warn',
+            summary: t('upload.dialog.duplicateFilesSummary'),
+            detail: result.duplicates > 1
+                ? t('upload.dialog.duplicateFilesDetailOther', { count: result.duplicates })
+                : t('upload.dialog.duplicateFilesDetailOne', { count: result.duplicates }),
+            life: 4000,
+        });
+    }
+    if (result.added > 0) uiState.uploadDialogVisible = false;
+};
+
+const handleRemoteUrls = (urls: string[]) => {
+    const result = addRemoteUrls(urls);
+    if (result.duplicates > 0) {
+        toast.add({
+            severity: 'warn',
+            summary: t('upload.dialog.duplicateUrlsSummary'),
+            detail: result.duplicates > 1
+                ? t('upload.dialog.duplicateUrlsDetailOther', { count: result.duplicates })
+                : t('upload.dialog.duplicateUrlsDetailOne', { count: result.duplicates }),
+            life: 4000,
+        });
+    }
+    if (result.added > 0) uiState.uploadDialogVisible = false;
+};
+
+const handleStartUpload = () => {
+    startQueue();
+    uiState.uploadDialogVisible = false;
+};
+</script>
+
+<template>
+    <AppDialog
+        v-model:visible="uiState.uploadDialogVisible"
+        :closable="false"
+        max-width-class="max-w-[580px] w-full"
+    >
+        <template #header="{ close }">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-xl bg-accent/10 flex items-center justify-center shrink-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-accent" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="17 8 12 3 7 8" />
+                            <line x1="12" y1="3" x2="12" y2="15" />
+                        </svg>
+                    </div>
+                    <div>
+                        <h2 class="font-bold text-base text-slate-900 leading-tight">{{ t('upload.dialog.title') }}</h2>
+                        <p class="text-sm text-slate-400 leading-tight mt-0.5">{{ t('upload.dialog.subtitle', { maxItems }) }}</p>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-0.5 bg-slate-100 rounded-xl p-1">
+                    <button @click="mode = 'local'"
+                        :class="['px-4 py-2 text-sm font-medium rounded-lg transition-all', mode === 'local' ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700']">
+                        {{ t('upload.dialog.mode.local') }}
+                    </button>
+                    <button @click="mode = 'remote'"
+                        :class="['px-4 py-2 text-sm font-medium rounded-lg transition-all', mode === 'remote' ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700']">
+                        {{ t('upload.dialog.mode.remote') }}
+                    </button>
+                </div>
+            </div>
+        </template>
+
+        <div class="h-[320px]">
+            <div v-if="remainingSlots === 0"
+                class="h-full flex flex-col items-center justify-center gap-4 text-center">
+                <div class="w-16 h-16 rounded-2xl bg-amber-50 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-amber-500" viewBox="0 0 24 24"
+                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+                        <path d="M12 9v4" />
+                        <path d="M12 17h.01" />
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-base font-semibold text-slate-700">{{ t('upload.dialog.queueFullTitle') }}</p>
+                    <p class="text-sm text-slate-400 mt-1">
+                        {{ t('upload.dialog.queueFullDescription', { maxItems }) }}
+                    </p>
+                </div>
+            </div>
+
+            <Transition v-else enter-active-class="transition-all duration-200 ease-out"
+                enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0"
+                leave-active-class="transition-all duration-150 ease-in"
+                leave-from-class="opacity-100" leave-to-class="opacity-0" mode="out-in">
+                <UploadDropzone v-if="mode === 'local'" :max-files="remainingSlots" @files-selected="handleFilesSelected" />
+                <RemoteUrlForm v-else :max-urls="remainingSlots" @submit="handleRemoteUrls" />
+            </Transition>
+        </div>
+
+        <template #footer>
+            <div class="flex items-center justify-between">
+                <span class="text-sm text-slate-400">
+                    <span v-if="remainingSlots < maxItems">
+                        {{ t('upload.dialog.slotsRemaining', { remaining: remainingSlots, maxItems }) }}
+                    </span>
+                    <span v-else>{{ t('upload.dialog.formatsHint') }}</span>
+                </span>
+                <div class="flex items-center gap-2">
+                    <button @click="uiState.uploadDialogVisible = false"
+                        class="px-5 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-xl transition-all">
+                        {{ t('common.close') }}
+                    </button>
+                    <button v-if="pendingCount > 0" @click="handleStartUpload"
+                        class="flex items-center gap-2 px-5 py-2.5 bg-accent hover:bg-accent/90 text-white text-sm font-semibold rounded-xl transition-all shadow-sm shadow-accent/30">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="17 8 12 3 7 8" />
+                            <line x1="12" y1="3" x2="12" y2="15" />
+                        </svg>
+                        {{ t('upload.dialog.startUpload', { count: pendingCount }) }}
+                    </button>
+                </div>
+            </div>
+        </template>
+    </AppDialog>
+</template>
diff --git a/src/routes/upload/components/BulkActions.vue b/src/routes/upload/components/BulkActions.vue
new file mode 100644
index 0000000..1f5c74b
--- /dev/null
+++ b/src/routes/upload/components/BulkActions.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    pendingCount?: number;
+    visible?: boolean;
+}>();
+
+const category = ref('');
+const visibility = ref('public');
+const { t } = useTranslation();
+</script>
+
+<template>
+    <div id="bulk-actions" class="mt-10" :class="{ 'hidden opacity-0 translate-y-4': !visible }"
+        style="transition: all 500ms;">
+        <div class="p-6 bg-indigo-50/50 rounded-3xl border border-indigo-100/50 flex items-center justify-between">
+            <div>
+                <h4 class="text-lg font-semibold text-slate-900">{{ t('upload.bulkActions.title') }}</h4>
+                <p class="text-slate-500 text-sm">{{ t('upload.bulkActions.applyToPending', { count: pendingCount || 0 }) }}</p>
+            </div>
+            <div class="flex gap-3">
+                <select v-model="category"
+                    class="px-4 py-2.5 bg-white border-2 border-slate-200 rounded-xl text-sm font-medium text-slate-700 focus:border-accent outline-none transition">
+                    <option value="">{{ t('upload.bulkActions.selectCategory') }}</option>
+                    <option value="learning">{{ t('upload.bulkActions.category.learning') }}</option>
+                    <option value="entertainment">{{ t('upload.bulkActions.category.entertainment') }}</option>
+                </select>
+                <select v-model="visibility"
+                    class="px-4 py-2.5 bg-white border-2 border-slate-200 rounded-xl text-sm font-medium text-slate-700 focus:border-accent outline-none transition">
+                    <option value="public">{{ t('upload.bulkActions.visibility.public') }}</option>
+                    <option value="private">{{ t('upload.bulkActions.visibility.private') }}</option>
+                </select>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/upload/components/InfoTip.vue b/src/routes/upload/components/InfoTip.vue
new file mode 100644
index 0000000..ca32f04
--- /dev/null
+++ b/src/routes/upload/components/InfoTip.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <div class="rounded-2xl border border-blue-500/30 bg-blue-500/10 p-3 flex items-start gap-3">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="lucide lucide-info h-5 w-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" aria-hidden="true">
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M12 16v-4"></path>
+            <path d="M12 8h.01"></path>
+        </svg>
+        <div class="flex-1 text-sm">
+            <p class="font-medium text-blue-900 dark:text-blue-100 mb-1">{{ t('upload.infoTip.title') }}</p>
+            <p class="text-blue-800 dark:text-blue-200">{{ t('upload.infoTip.description') }}</p>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/upload/components/RemoteUrlForm.vue b/src/routes/upload/components/RemoteUrlForm.vue
new file mode 100644
index 0000000..e92ad86
--- /dev/null
+++ b/src/routes/upload/components/RemoteUrlForm.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{ maxUrls?: number }>();
+const urls = ref('');
+
+const emit = defineEmits<{ submit: [urls: string[]] }>();
+const { t } = useTranslation();
+
+const handleSubmit = () => {
+    const limit = props.maxUrls ?? 5;
+    const urlList = urls.value
+        .split('\n')
+        .map(url => url.trim())
+        .filter(url => url.length > 0)
+        .slice(0, limit);
+    if (urlList.length > 0) {
+        emit('submit', urlList);
+        urls.value = '';
+    }
+};
+</script>
+
+<template>
+    <div class="flex flex-col gap-3 h-full">
+        <div class="relative flex-1">
+            <textarea
+                v-model="urls"
+                :placeholder="t('upload.remote.placeholder')"
+                class="w-full h-full min-h-[200px] px-4 py-3.5 bg-white border border-slate-200
+                       rounded-xl focus:border-accent focus:ring-2 focus:ring-accent/10 focus:outline-none
+                       transition-all resize-none text-base text-slate-700 placeholder:text-slate-300
+                       leading-relaxed font-[inherit]"
+            />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 text-sm text-slate-400">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-4 h-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 16v-4" />
+                    <path d="M12 8h.01" />
+                </svg>
+                {{ t('upload.remote.providersHint') }}
+            </div>
+            <button
+                @click="handleSubmit"
+                class="flex items-center gap-2 px-5 py-2.5 bg-slate-800 hover:bg-slate-900 text-white
+                       text-sm font-semibold rounded-xl transition-all active:scale-95"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-4 h-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M5 12h14" />
+                    <path d="m12 5 7 7-7 7" />
+                </svg>
+                {{ t('upload.remote.addUrls') }}
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/upload/components/UploadDropzone.vue b/src/routes/upload/components/UploadDropzone.vue
new file mode 100644
index 0000000..8e0b368
--- /dev/null
+++ b/src/routes/upload/components/UploadDropzone.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{ maxFiles?: number }>();
+const emit = defineEmits<{ filesSelected: [files: FileList] }>();
+const { t } = useTranslation();
+
+const isDragOver = ref(false);
+let dragCounter = 0;
+
+const toVideoFiles = (files: FileList | null | undefined): FileList | null => {
+    if (!files?.length) return null;
+    const limit = props.maxFiles ?? 5;
+    const dt = new DataTransfer();
+    Array.from(files)
+        .filter(f => f.type.startsWith('video/'))
+        .slice(0, limit)
+        .forEach(f => dt.items.add(f));
+    return dt.files.length ? dt.files : null;
+};
+
+const handleFileChange = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const files = toVideoFiles(input.files);
+    if (files) emit('filesSelected', files);
+    input.value = ''; // reset so same file can be re-selected
+};
+
+const onDragEnter = (e: DragEvent) => {
+    e.preventDefault();
+    dragCounter++;
+    isDragOver.value = true;
+};
+
+const onDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    dragCounter--;
+    if (dragCounter <= 0) {
+        dragCounter = 0;
+        isDragOver.value = false;
+    }
+};
+
+const onDragOver = (e: DragEvent) => {
+    e.preventDefault(); // required to allow drop
+    e.stopPropagation();
+};
+
+const onDrop = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter = 0;
+    isDragOver.value = false;
+    const files = toVideoFiles(e.dataTransfer?.files);
+    if (files) emit('filesSelected', files);
+};
+</script>
+
+<template>
+    <div class="relative group cursor-pointer flex-1 flex flex-col h-full"
+        @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop">
+        <input type="file" multiple accept="video/*"
+            class="absolute inset-0 w-full h-full opacity-0 z-20 cursor-pointer" @change="handleFileChange">
+
+        <div :class="[
+            'flex-1 flex flex-col items-center justify-center gap-4 rounded-xl border-2 border-dashed transition-all duration-200 py-6 px-4 h-full bg-white',
+            isDragOver
+                ? 'border-accent bg-accent/5 scale-[0.99]'
+                : 'border-slate-200 group-hover:border-accent/60 group-hover:bg-accent/[0.03]'
+        ]">
+
+            <!-- Animated icon -->
+            <div class="relative">
+                <div :class="[
+                    'w-20 h-20 rounded-2xl flex items-center justify-center transition-all duration-200',
+                    isDragOver ? 'bg-accent/10 scale-110 shadow-md' : 'bg-slate-100 group-hover:bg-accent/10 group-hover:scale-105 group-hover:shadow-md'
+                ]">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                        :class="['w-10 h-10 transition-colors duration-200', isDragOver ? 'text-accent' : 'text-slate-400 group-hover:text-accent']"
+                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                        <polyline points="17 8 12 3 7 8" />
+                        <line x1="12" x2="12" y1="3" y2="15" />
+                    </svg>
+                </div>
+                <div :class="[
+                    'absolute inset-0 rounded-2xl ring-4 transition-all duration-200',
+                    isDragOver ? 'ring-accent/30' : 'ring-accent/0 group-hover:ring-accent/20'
+                ]"></div>
+            </div>
+
+            <div class="text-center">
+                <p :class="['text-base font-semibold transition-colors', isDragOver ? 'text-accent' : 'text-slate-700 group-hover:text-slate-900']">
+                    {{ isDragOver ? t('upload.dropzone.releaseToAdd') : t('upload.dropzone.dropHere') }}
+                </p>
+                <p class="text-sm text-slate-400 mt-1.5">{{ t('upload.dropzone.browse') }}</p>
+            </div>
+
+            <!-- Format badges -->
+            <div class="flex items-center gap-2">
+                <span v-for="fmt in ['MP4', 'MOV', 'MKV']" :key="fmt"
+                    :class="['text-xs font-semibold px-3 py-1 rounded-lg tracking-wide transition-colors', isDragOver ? 'bg-accent/10 text-accent' : 'bg-slate-100 text-slate-500']">
+                    {{ fmt }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/upload/components/UploadModeToggle.vue b/src/routes/upload/components/UploadModeToggle.vue
new file mode 100644
index 0000000..33147bc
--- /dev/null
+++ b/src/routes/upload/components/UploadModeToggle.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{
+    modelValue: 'local' | 'remote';
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: 'local' | 'remote'];
+}>();
+
+const { t } = useTranslation();
+
+const modeList = computed<{ id: 'local' | 'remote'; label: string; icon: string }[]>(() => [
+    {
+        id: 'local',
+        label: t('upload.dialog.mode.local'),
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 0 1 7.38 16.75"/><path d="M12 8v8"/><path d="m8 12 4-4 4 4"/><path d="M2.5 8.875a10 10 0 0 0-.5 3"/><path d="M2.83 16a10 10 0 0 0 2.43 3.4"/><path d="M4.636 5.235a10 10 0 0 1 .891-.857"/><rect width="6" height="6" x="16" y="16" rx="1"/></svg>`
+    },
+    {
+        id: 'remote',
+        label: t('upload.dialog.mode.remote'),
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`
+    }
+]);
+
+const mode = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+</script>
+
+<template>
+    <div class="inline-flex bg-slate-100 p-0.5 rounded-lg relative z-0 w-fit">
+        <div
+            :class="cn(':uno: absolute left-0.5 top-0.5 h-[calc(100%-4px)] w-[calc(50%-2px)] bg-white rounded-md shadow-sm transition-all duration-300 ease-out -z-10', mode === 'local' ? 'translate-x-0' : 'translate-x-full')">
+        </div>
+        <button v-for="item in modeList" :key="item.id" @click="mode = item.id"
+            :class="cn('flex items-center gap-1.5 px-3.5 py-1.5 text-xs rounded-md transition-colors relative z-10', mode === item.id ? 'font-semibold text-slate-800' : 'font-medium text-slate-500 hover:text-slate-700')">
+            <span class="w-3.5 h-3.5" v-html="item.icon"></span>
+            {{ item.label }}
+        </button>
+    </div>
+</template>
+
diff --git a/src/routes/upload/components/UploadQueue.vue b/src/routes/upload/components/UploadQueue.vue
new file mode 100644
index 0000000..3e541fd
--- /dev/null
+++ b/src/routes/upload/components/UploadQueue.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { QueueItem } from '@/composables/useUploadQueue';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    items?: QueueItem[];
+    totalSize?: string;
+    completeCount?: number;
+    pendingCount?: number;
+}>();
+
+const emit = defineEmits<{
+    removeItem: [id: string];
+    cancelItem: [id: string];
+    publish: [];
+    startQueue: [];
+}>()
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <aside
+        class=":uno: w-full flex flex-col h-[calc(100svh-64px)] sticky top-16 before:(content-[''] absolute pointer-events-none inset-[-1px] rounded-[calc(var(--radius-2xl)+1px)] bg-[linear-gradient(-45deg,var(--capra-ramp-5)_0,var(--capra-ramp-4)_8%,var(--capra-ramp-3)_17%,var(--capra-ramp-2)_25%,var(--capra-ramp-1)_33%,#292929_34%,#292929_40%,#e1dfdf_45%,#e1dfdf_100%)] bg-[length:400%_200%] bg-[position:0_0] transition-[background-position] duration-[1000ms] ease-in-out delay-[500ms] z-0)"
+        :class="{ 'before:bg-[position:100%_100%]': pendingCount && pendingCount > 0 }">
+        <div class="bg-header z-1 relative flex flex-col h-full rounded-2xl overflow-hidden">
+
+            <div class="flex-1 overflow-y-auto scrollbar-thin p-6 space-y-5 relative" id="queue-list">
+                <div v-if="!items?.length" id="empty-queue"
+                    class="absolute inset-0 flex flex-col items-center justify-center p-8 text-center opacity-40">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-32 h-32 mb-4 text-slate-300" viewBox="0 0 24 24"
+                        fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <rect width="18" height="18" x="3" y="3" rx="2" />
+                        <path d="M3 9h18" />
+                        <path d="M9 21V9" />
+                    </svg>
+                    <p class="text-slate-400 font-medium">{{ t('upload.queue.empty') }}</p>
+                </div>
+
+                
+            </div>
+
+            <div class="p-6 border-t border-border shrink-0">
+                <div class="flex items-center justify-between text-sm mb-4 font-medium">
+                    <span class="text-slate-500">{{ t('upload.queue.totalSize') }}</span>
+                    <span class="text-slate-900">{{ totalSize || t('upload.queue.zeroSize') }}</span>
+                </div>
+
+                <button :disabled="!!(!pendingCount || pendingCount < 1)" @click="emit('startQueue')"
+                    class="btn btn-primary w-full flex items-center justify-center gap-2 mb-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                        <polyline points="17 8 12 3 7 8" />
+                        <line x1="12" y1="3" x2="12" y2="15" />
+                    </svg>
+                    {{ t('upload.dialog.startUpload', { count: pendingCount || 0 }) }}
+                </button>
+            </div>
+        </div>
+    </aside>
+</template>
diff --git a/src/routes/upload/components/UploadQueueItem.vue b/src/routes/upload/components/UploadQueueItem.vue
new file mode 100644
index 0000000..9a6383b
--- /dev/null
+++ b/src/routes/upload/components/UploadQueueItem.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import FileUploadType from '@/components/icons/FileUploadType.vue';
+import type { QueueItem } from '@/composables/useUploadQueue';
+import { computed } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{
+    item: QueueItem;
+}>();
+
+const emit = defineEmits<{
+    remove: [id: string];
+    cancel: [id: string];
+}>();
+
+const { t } = useTranslation();
+
+const statusLabel = computed(() => {
+    switch (props.item.status) {
+        case 'pending': return t('upload.queueItem.status.pending');
+        case 'uploading': return props.item.activeChunks
+            ? t('upload.queueItem.status.uploadingThreads', { threads: props.item.activeChunks })
+            : t('upload.queueItem.status.uploading');
+        case 'processing': return t('upload.queueItem.status.processing');
+        case 'complete': return t('upload.queueItem.status.complete');
+        case 'error': return t('upload.queueItem.status.error');
+        case 'fetching': return t('upload.queueItem.status.fetching');
+        default: return props.item.status;
+    }
+});
+
+const statusVariant = computed(() => {
+    switch (props.item.status) {
+        case 'complete': return { dot: 'bg-green-500', text: 'text-green-600', bar: 'bg-green-500' };
+        case 'error': return { dot: 'bg-red-500', text: 'text-red-500', bar: 'bg-red-500' };
+        case 'pending': return { dot: 'bg-slate-300', text: 'text-slate-400', bar: 'bg-slate-300' };
+        default: return { dot: 'bg-accent', text: 'text-accent', bar: 'bg-accent' };
+    }
+});
+
+const isActive = computed(() =>
+    props.item.status === 'uploading' || props.item.status === 'fetching' || props.item.status === 'processing'
+);
+
+const canCancel = computed(() =>
+    props.item.status === 'uploading'
+);
+
+const progress = computed(() => props.item.progress || 0);
+</script>
+
+<template>
+    <div class="group relative rounded-xl bg-white border border-slate-100 p-3 hover:border-gray-200 transition-all duration-200">
+        <!-- Progress bar (only for uploading) -->
+        <div v-if="item.type === 'local'" class="absolute z-1 h-full w-full bg-transparent rounded-xl overflow-hidden top-0 left-0">
+            <div class="h-full transition-all duration-500 opacity-10"
+                :class="statusVariant.bar"
+                :style="{ width: `${progress}%` }">
+            </div>
+        </div>
+        <div class="relative flex items-start gap-3 z-2">
+            <!-- File type icon -->
+            <div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 my-a"
+                :class="item.type === 'remote' ? 'bg-indigo-50 text-indigo-400' : 'bg-slate-100 text-slate-400'">
+                <FileUploadType :filled="item.type === 'local'" />
+            </div>
+
+            <!-- Content -->
+            <div class="flex-1 min-w-0">
+                <!-- Name row -->
+                <div class="flex items-start justify-between gap-2">
+                    <p class="text-xs font-semibold text-slate-700 truncate leading-5">{{ item.name }}</p>
+                    <button v-if="item.status == 'pending'" @click="emit('remove', item.id)"
+                        class="shrink-0 w-5 h-5 flex items-center justify-center rounded text-slate-300 hover:text-red-400 hover:bg-red-50 transition-all opacity-0 group-hover:opacity-100">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M18 6 6 18" />
+                            <path d="m6 6 12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Status + progress row -->
+                <div class="mt-1.5">
+                    <div class="flex items-center justify-between">
+                        <!-- Status badge -->
+                         <div class="flex gap-2 text-[10px] font-medium" :class="statusVariant.text">
+                            <!-- Size -->
+                            <span v-if="item.type === 'local'" >
+                                {{ item.total }}
+                            </span>
+                            <span class="flex items-center gap-1" :class="statusVariant.text">
+                                <span class="w-1.5 h-1.5 rounded-full shrink-0" :class="[statusVariant.dot, isActive ? 'animate-pulse' : '']"></span>
+                                {{ statusLabel }}
+                            </span>
+                         </div>
+
+                        <div class="flex items-center gap-2">
+                            <!-- Progress % -->
+                            <span v-if="item.type === 'local' && progress > 0"
+                                class="text-[10px] font-bold tabular-nums" :class="statusVariant.text">
+                                {{ progress }}%
+                            </span>
+                            <!-- Speed -->
+                            <span v-if="isActive && item.speed" class="text-[10px] text-slate-400">
+                                {{ item.speed }}
+                            </span>
+                            <!-- Cancel button -->
+                            <button v-if="canCancel" @click="emit('cancel', item.id)"
+                                class="text-[10px] font-medium text-slate-400 hover:text-red-500 transition-colors">
+                                {{ t('common.cancel') }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/video/CopyVideoModal.vue b/src/routes/video/CopyVideoModal.vue
new file mode 100644
index 0000000..4ed1d9e
--- /dev/null
+++ b/src/routes/video/CopyVideoModal.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import type { Video as ModelVideo } from '@/server/api/proto/app/v1/common';
+import { useAppToast } from '@/composables/useAppToast';
+import { computed, ref, watch } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{
+    videoId: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'close'): void;
+}>();
+
+const toast = useAppToast();
+const video = ref<ModelVideo | null>(null);
+const loading = ref(true);
+const copiedField = ref<string | null>(null);
+const { t } = useTranslation();
+
+const fetchVideo = async () => {
+    loading.value = true;
+    try {
+        const response = await rpcClient.getVideo({ id: props.videoId });
+        if (response.video) {
+            video.value = response.video;
+        }
+    } catch (error) {
+        console.error('Failed to fetch video:', error);
+        toast.add({
+            severity: 'error',
+            summary: t('video.copyModal.toastErrorSummary'),
+            detail: t('video.copyModal.toastErrorDetail'),
+            life: 3000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const baseUrl = computed(() => typeof window !== 'undefined' ? window.location.origin : '');
+
+const shareLinks = computed(() => {
+    if (!video.value) return [];
+    const v = video.value;
+    const playbackPath = v.url || '';
+    const playbackUrl = playbackPath.startsWith('http') ? playbackPath : `${baseUrl.value}/${playbackPath.replace(/^\/+/, '')}`;
+    return [
+        {
+            key: 'embed',
+            label: t('video.copyModal.embedPlayer'),
+            value: playbackUrl,
+        },
+        {
+            key: 'thumbnail',
+            label: t('video.copyModal.thumbnail'),
+            value: v.thumbnail || '',
+        },
+        {
+            key: 'hls',
+            label: t('video.copyModal.hls'),
+            value: playbackUrl,
+            placeholder: t('video.copyModal.hlsPlaceholder'),
+            hint: t('video.copyModal.hlsHint'),
+        },
+    ];
+});
+
+const copyToClipboard = async (text: string, key: string) => {
+    try {
+        await navigator.clipboard.writeText(text);
+    } catch {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+    }
+    copiedField.value = key;
+    toast.add({
+        severity: 'success',
+        summary: t('video.copyModal.toastCopiedSummary'),
+        detail: t('video.copyModal.toastCopiedDetail'),
+        life: 2000
+    });
+    setTimeout(() => {
+        copiedField.value = null;
+    }, 2000);
+};
+
+watch(() => props.videoId, (newId) => {
+    if (newId) {
+        fetchVideo();
+    } else {
+        video.value = null;
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <AppDialog :visible="!!videoId" @update:visible="emit('close')" max-width-class="max-w-xl"
+        :title="loading ? '' : t('video.copyModal.title')">
+
+        <!-- Loading Skeleton -->
+        <div v-if="loading" class="flex flex-col gap-5">
+            <div>
+                <div class="w-32 h-3 bg-gray-200 rounded animate-pulse mb-3" />
+                <div v-for="i in 3" :key="i" class="flex flex-col gap-1.5 mb-4">
+                    <div class="w-2/5 h-3 bg-gray-200 rounded animate-pulse" />
+                    <div class="flex gap-2">
+                        <div class="w-full h-9 bg-gray-200 rounded-md animate-pulse" />
+                        <div class="w-11 h-9 bg-gray-200 rounded-md animate-pulse" />
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-col gap-2">
+                <div class="w-full h-16 bg-gray-200 rounded-md animate-pulse" />
+                <div class="w-full h-16 bg-gray-200 rounded-md animate-pulse" />
+            </div>
+        </div>
+
+        <!-- Content -->
+        <div v-else class="flex flex-col gap-5">
+            <!-- Player addresses -->
+            <div>
+                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">{{ t('video.copyModal.playerAddress') }}</p>
+                <div class="flex flex-col gap-4">
+                    <div v-for="link in shareLinks" :key="link.key" class="flex flex-col gap-1.5">
+                        <p class="text-sm font-medium text-muted-foreground">{{ link.label }}</p>
+                        <div class="flex gap-2">
+                            <AppInput :model-value="link.value || ''" :placeholder="link.placeholder" readonly
+                                input-class="!font-mono !text-xs" wrapperClass="w-full" @click="($event.target as HTMLInputElement)?.select()" />
+                            <AppButton variant="secondary" :disabled="!link.value || copiedField === link.key"
+                                @click="copyToClipboard(link.value, link.key)" class="shrink-0">
+                                <!-- Copy icon -->
+                                <svg v-if="copiedField !== link.key" xmlns="http://www.w3.org/2000/svg" width="16"
+                                    height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                    stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                                    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                                </svg>
+                                <!-- Check icon -->
+                                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                    stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                    <path d="M20 6 9 17l-5-5" />
+                                </svg>
+                            </AppButton>
+                        </div>
+                        <p v-if="link.hint" class="text-xs text-muted-foreground">{{ link.hint }}</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Notices -->
+            <div class="flex flex-col gap-2 text-sm">
+                <div class="rounded-xl border border-red-500/30 bg-red-500/10 p-3 flex items-start gap-3">
+                    <div class="flex-1 text-sm">
+                        <p class="font-medium text-red-900 dark:text-red-100 mb-1">{{ t('video.copyModal.warningTitle') }}</p>
+                        <p class="text-red-800 dark:text-red-200">{{ t('video.copyModal.warningDetail') }}</p>
+                    </div>
+                </div>
+                <div class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 flex items-start gap-3">
+                    <div class="flex-1 text-sm">
+                        <p class="font-medium text-amber-900 dark:text-amber-100 mb-1">{{ t('video.copyModal.reminderTitle') }}</p>
+                        <p class="text-amber-800 dark:text-amber-200">{{ t('video.copyModal.reminderDetail') }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppDialog>
+</template>
diff --git a/src/routes/video/DetailVideoModal.vue b/src/routes/video/DetailVideoModal.vue
new file mode 100644
index 0000000..6480f4d
--- /dev/null
+++ b/src/routes/video/DetailVideoModal.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import type { AdTemplate as ManualAdTemplate, Video as ModelVideo } from '@/server/api/proto/app/v1/common';
+import { useAppToast } from '@/composables/useAppToast';
+import { useAuthStore } from '@/stores/auth';
+import { computed, ref, watch } from 'vue';
+import { useTranslation } from 'i18next-vue';
+
+const props = defineProps<{
+    videoId: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'close'): void;
+}>();
+
+const toast = useAppToast();
+const auth = useAuthStore();
+const video = ref<ModelVideo | null>(null);
+const loading = ref(true);
+const saving = ref(false);
+const { t } = useTranslation();
+
+type AdConfigPayload = {
+    ad_template_id: string;
+    template_name?: string;
+    vast_tag_url?: string;
+    ad_format?: string;
+    duration?: number;
+};
+
+const form = ref({
+    title: '',
+    adTemplateId: '' as string,
+});
+
+const currentAdConfig = ref<AdConfigPayload | null>(null);
+const adTemplates = ref<ManualAdTemplate[]>([]);
+const loadingTemplates = ref(false);
+
+const errors = ref<{ title?: string }>({});
+const isFreePlan = computed(() => !auth.user?.plan_id);
+
+const activeTemplates = computed(() =>
+    adTemplates.value.filter(t => t.isActive),
+);
+
+const subtitleForm = ref({
+    file: null as File | null,
+    language: 'en',
+    displayName: '',
+});
+
+const fetchAdTemplates = async () => {
+    loadingTemplates.value = true;
+    try {
+        const response = await rpcClient.listAdTemplates();
+        adTemplates.value = response.templates ?? [];
+    } catch (error) {
+        console.error('Failed to fetch ad templates:', error);
+    } finally {
+        loadingTemplates.value = false;
+    }
+};
+
+const fetchVideo = async () => {
+    loading.value = true;
+    try {
+        const response = await rpcClient.getVideo({ id: props.videoId });
+        const videoData = response.video;
+
+        if (videoData) {
+            video.value = videoData;
+            currentAdConfig.value = null;
+            form.value = {
+                title: videoData.title || '',
+                adTemplateId: '',
+            };
+        }
+    } catch (error) {
+        console.error('Failed to fetch video:', error);
+        toast.add({
+            severity: 'error',
+            summary: t('video.detailModal.toast.loadErrorSummary'),
+            detail: t('video.detailModal.toast.loadErrorDetail'),
+            life: 3000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const validate = (): boolean => {
+    errors.value = {};
+    if (!form.value.title.trim()) {
+        errors.value.title = t('video.detailModal.errors.titleRequired');
+    }
+    return Object.keys(errors.value).length === 0;
+};
+
+const onFormSubmit = async () => {
+    if (!validate()) return;
+    saving.value = true;
+    try {
+        const response = await rpcClient.updateVideo({
+            id: props.videoId,
+            title: form.value.title,
+            description: video.value?.description || '',
+            url: video.value?.url,
+            size: video.value?.size,
+            duration: video.value?.duration,
+            format: video.value?.format,
+            status: video.value?.status,
+        });
+
+        const updatedVideo = response.video as ModelVideo | undefined;
+
+        if (updatedVideo) {
+            video.value = updatedVideo;
+            currentAdConfig.value = null;
+            form.value = {
+                title: updatedVideo.title || '',
+                adTemplateId: '',
+            };
+        }
+
+        toast.add({
+            severity: 'success',
+            summary: t('video.detailModal.toast.saveSuccessSummary'),
+            detail: t('video.detailModal.toast.saveSuccessDetail'),
+            life: 3000
+        });
+        emit('close');
+    } catch (error) {
+        console.error('Failed to save video:', error);
+        toast.add({
+            severity: 'error',
+            summary: t('video.detailModal.toast.saveErrorSummary'),
+            detail: t('video.detailModal.toast.saveErrorDetail'),
+            life: 3000
+        });
+    } finally {
+        saving.value = false;
+    }
+};
+
+const onSubtitleFileChange = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    subtitleForm.value.file = target.files?.[0] || null;
+};
+
+const canUploadSubtitle = computed(() => {
+    return subtitleForm.value.file && subtitleForm.value.language.trim();
+});
+
+const handleUploadSubtitle = () => {
+    if (!canUploadSubtitle.value) return;
+    toast.add({
+        severity: 'info',
+        summary: t('video.detailModal.toast.subtitleInfoSummary'),
+        detail: t('video.detailModal.toast.subtitleInfoDetail'),
+        life: 3000
+    });
+};
+
+watch(() => props.videoId, (newId) => {
+    if (newId) {
+        errors.value = {};
+        fetchVideo();
+        fetchAdTemplates();
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <AppDialog :visible="!!videoId" @update:visible="emit('close')" max-width-class="max-w-xl"
+        :title="loading ? '' : $t('video.detailModal.title')">
+
+        <!-- Loading Skeleton -->
+        <div v-if="loading" class="flex flex-col gap-4">
+            <!-- Title skeleton -->
+            <div class="flex flex-col gap-2">
+                <div class="w-12 h-3.5 bg-gray-200 rounded animate-pulse" />
+                <div class="w-full h-10 bg-gray-200 rounded-md animate-pulse" />
+            </div>
+            <!-- ad-template selector skeleton -->
+            <div class="flex flex-col gap-2">
+                <div class="w-24 h-3.5 bg-gray-200 rounded animate-pulse" />
+                <div class="w-full h-10 bg-gray-200 rounded-md animate-pulse" />
+            </div>
+            <!-- Subtitles section skeleton -->
+            <div class="flex flex-col gap-3 border-t border-gray-200 pt-4">
+                <div class="flex items-center justify-between">
+                    <div class="w-16 h-3.5 bg-gray-200 rounded animate-pulse" />
+                    <div class="w-[4.5rem] h-6 bg-gray-200 rounded-full animate-pulse" />
+                </div>
+                <div class="w-3/5 h-3.5 bg-gray-200 rounded animate-pulse" />
+                <div class="flex flex-col gap-3 rounded-lg border border-gray-200 p-3">
+                    <div class="w-24 h-3.5 bg-gray-200 rounded animate-pulse" />
+                    <div class="w-full h-9 bg-gray-200 rounded-md animate-pulse" />
+                    <div class="grid grid-cols-2 gap-3">
+                        <div class="w-full h-9 bg-gray-200 rounded-md animate-pulse" />
+                        <div class="w-full h-9 bg-gray-200 rounded-md animate-pulse" />
+                    </div>
+                    <div class="w-full h-10 bg-gray-200 rounded-md animate-pulse" />
+                </div>
+            </div>
+            <!-- Footer skeleton -->
+            <div class="flex justify-end gap-2 border-t border-gray-200 pt-4">
+                <div class="w-20 h-10 bg-gray-200 rounded-md animate-pulse" />
+                <div class="w-32 h-10 bg-gray-200 rounded-md animate-pulse" />
+            </div>
+        </div>
+
+        <!-- Form Content -->
+        <form v-else @submit.prevent="onFormSubmit" class="flex flex-col gap-4">
+            <!-- Title -->
+            <div class="flex flex-col gap-1">
+                <label for="edit-title" class="text-sm font-medium">{{ t('video.detailModal.titleLabel') }}</label>
+                <AppInput id="edit-title" v-model="form.title" :placeholder="t('video.detailModal.titlePlaceholder')" />
+                <p v-if="errors.title" class="text-xs text-red-500 mt-0.5">{{ errors.title }}</p>
+            </div>
+
+            <!-- Ad Template Selector -->
+            <div class="flex flex-col gap-1">
+                <label for="edit-ad-template" class="text-sm font-medium">{{ t('video.detailModal.adTemplateLabel') }}</label>
+                <select
+                    id="edit-ad-template"
+                    v-model="form.adTemplateId"
+                    :disabled="isFreePlan || saving"
+                    class="w-full px-3 py-2 border rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                    :class="isFreePlan
+                        ? 'border-border bg-muted/50 text-foreground/50 cursor-not-allowed'
+                        : 'border-border bg-background text-foreground cursor-pointer hover:border-primary/50'"
+                >
+                    <option value="">{{ t('video.detailModal.adTemplateNone') }}</option>
+                    <option
+                        v-for="tmpl in activeTemplates"
+                        :key="tmpl.id"
+                        :value="tmpl.id"
+                    >
+                        {{ tmpl.name }}{{ tmpl.isDefault ? ` (${t('video.detailModal.adTemplateDefault')})` : '' }}
+                    </option>
+                </select>
+                <p v-if="isFreePlan" class="text-xs text-foreground/50 mt-0.5">
+                    {{ t('video.detailModal.adTemplateUpgradeHint') }}
+                </p>
+                <p v-else-if="!form.adTemplateId" class="text-xs text-foreground/50 mt-0.5">
+                    {{ t('video.detailModal.adTemplateNoAdsHint') }}
+                </p>
+            </div>
+
+            <!-- Subtitles Section -->
+            <div class="flex flex-col gap-3 border-t-2 border-border pt-4">
+                <div class="flex items-center justify-between">
+                    <label class="text-sm font-medium">{{ t('video.detailModal.subtitlesTitle') }}</label>
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-foreground/70">
+                        {{ t('video.detailModal.subtitleTracks', { count: 0 }) }}
+                    </span>
+                </div>
+                <p class="text-sm text-muted-foreground">{{ t('video.detailModal.noSubtitles') }}</p>
+
+                <!-- Upload Subtitle Form -->
+                <div class="flex flex-col gap-3 rounded-lg border border-border p-3">
+                    <label class="text-sm font-medium">{{ t('video.detailModal.uploadSubtitle') }}</label>
+
+                    <div class="flex flex-col gap-1">
+                        <label for="subtitle-file" class="text-xs font-medium">
+                            {{ t('video.detailModal.subtitleFile') }}
+                        </label>
+                        <input id="subtitle-file" type="file"
+                            accept=".vtt,.srt,.ass,.ssa,text/vtt,text/srt,application/x-subrip"
+                            class="w-full text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-primary hover:file:bg-primary/20 cursor-pointer"
+                            @change="onSubtitleFileChange" />
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-3">
+                        <div class="flex flex-col gap-1">
+                            <label for="subtitle-language" class="text-xs font-medium">{{ t('video.detailModal.languageCode') }}</label>
+                            <AppInput id="subtitle-language" v-model="subtitleForm.language" :placeholder="t('video.detailModal.languagePlaceholder')"
+                                :maxlength="10" />
+                        </div>
+                        <div class="flex flex-col gap-1">
+                            <label for="subtitle-name" class="text-xs font-medium">{{ t('video.detailModal.displayName') }}</label>
+                            <AppInput id="subtitle-name" v-model="subtitleForm.displayName"
+                                :placeholder="t('video.detailModal.displayNamePlaceholder')" />
+                        </div>
+                    </div>
+
+                    <AppButton variant="secondary" class="w-full" :disabled="!canUploadSubtitle" @click="handleUploadSubtitle">
+                        {{ t('video.detailModal.uploadSubtitleButton') }}
+                    </AppButton>
+                </div>
+            </div>
+
+            <!-- Footer inside Form so submit works -->
+            <div class="flex justify-end gap-2 border-t border-border pt-4">
+                <AppButton variant="ghost" type="button" @click="emit('close')">{{ t('video.detailModal.cancel') }}</AppButton>
+                <AppButton type="submit" :loading="saving">{{ t('video.detailModal.saveChanges') }}</AppButton>
+            </div>
+        </form>
+    </AppDialog>
+</template>
diff --git a/src/routes/video/Videos.vue b/src/routes/video/Videos.vue
new file mode 100644
index 0000000..93939f0
--- /dev/null
+++ b/src/routes/video/Videos.vue
@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { client as rpcClient } from '@/api/rpcclient';
+import type { Video as ModelVideo } from '@/server/api/proto/app/v1/common';
+import EmptyState from '@/components/dashboard/EmptyState.vue';
+import PageHeader from '@/components/dashboard/PageHeader.vue';
+import { useTranslation } from 'i18next-vue';
+import { computed, createStaticVNode, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import ClientOnly from '@/components/ClientOnly';
+import { useAppToast } from '@/composables/useAppToast';
+import { useUploadQueue } from '@/composables/useUploadQueue';
+import { useUIState } from '@/stores/uiState';
+import VideoBulkActions from './components/VideoBulkActions.vue';
+import VideoFilters from './components/VideoFilters.vue';
+import VideoTable from './components/VideoTable.vue';
+import CopyVideoModal from './CopyVideoModal.vue';
+import DetailVideoModal from './DetailVideoModal.vue';
+
+const detailVideoId = ref<string>('');
+const copyVideoId = ref<string>('');
+
+const uiState = useUIState();
+const { addFiles, startQueue } = useUploadQueue();
+const toast = useAppToast();
+const router = useRouter();
+const { t } = useTranslation();
+const videos = ref<ModelVideo[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+const searchQuery = ref('');
+const selectedStatus = ref<string>('all');
+const iconHoist = createStaticVNode(`<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 468 534"><path d="M10 364v64c0 53 43 96 96 96h256c53 0 96-43 96-96v-64c0-18-14-32-32-32s-32 14-32 32v64c0 18-14 32-32 32H106c-18 0-32-14-32-32v-64c0-18-14-32-32-32s-32 14-32 32z" fill="color-mix(in srgb, var(--colors-white-DEFAULT) 60%, transparent)"/><path d="M217 19c9-9 25-9 34 0l144 144c7 7 9 17 5 26-3 9-12 15-22 15h-80v112c0 27-21 48-48 48h-32c-26 0-48-21-48-48V204H90c-10 0-18-6-22-15s-2-19 5-26L217 19z" fill="var(--colors-white-DEFAULT)"/></svg>`, 1)
+
+// Pagination
+const page = ref(1);
+const limit = ref(10);
+const total = ref(0);
+
+// Filters
+const statusOptions = computed(() => [
+  { label: t('video.filters.allStatus'), value: 'all' },
+  { label: t('video.filters.ready'), value: 'ready' },
+  { label: t('video.filters.processing'), value: 'processing' },
+  { label: t('video.filters.failed'), value: 'failed' },
+]);
+
+const fetchVideos = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await rpcClient.listVideos({
+      page: page.value,
+      limit: limit.value,
+      search: searchQuery.value || undefined,
+      status: selectedStatus.value !== 'all' ? selectedStatus.value : undefined,
+    });
+
+    videos.value = response.videos ?? [];
+    total.value = response.total ?? 0;
+  } catch (err: any) {
+    console.error(err);
+    error.value = err?.response?.data?.message || err?.message || t('video.page.retry');
+    videos.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSearch = () => {
+  page.value = 1;
+  fetchVideos();
+};
+
+const handleFilter = () => {
+  page.value = 1;
+  fetchVideos();
+};
+
+// Selection Logic
+const selectedVideos = ref<ModelVideo[]>([]);
+
+const deleteSelectedVideos = async () => {
+  if (!selectedVideos.value.length || !confirm(t('video.page.deleteSelectedConfirm', { count: selectedVideos.value.length }))) return;
+
+  try {
+    await Promise.all(
+      selectedVideos.value
+        .map(v => v.id)
+        .filter((id): id is string => Boolean(id))
+        .map(id => rpcClient.deleteVideo({ id }))
+    );
+    selectedVideos.value = [];
+    await fetchVideos();
+  } catch (err) {
+    console.error('Failed to delete videos', err);
+    toast.add({
+      severity: 'error',
+      summary: t('video.detailPage.toast.deleteErrorSummary'),
+      detail: t('video.detailPage.toast.deleteErrorDetail'),
+      life: 3000,
+    });
+  }
+};
+
+const deleteVideo = async (videoId?: string) => {
+  if (!videoId || !confirm(t('video.page.deleteSingleConfirm'))) return;
+
+  try {
+    await rpcClient.deleteVideo({ id: videoId });
+    selectedVideos.value = selectedVideos.value.filter(v => v.id !== videoId);
+    await fetchVideos();
+  } catch (err) {
+    console.error('Failed to delete video:', err);
+    toast.add({
+      severity: 'error',
+      summary: t('video.detailPage.toast.deleteErrorSummary'),
+      detail: t('video.detailPage.toast.deleteErrorDetail'),
+      life: 3000,
+    });
+  }
+};
+
+onMounted(() => {
+  fetchVideos();
+});
+
+// Reset drag state when upload dialog opens mid-drag
+watch(() => uiState.uploadDialogVisible, (visible) => {
+  if (visible) {
+    dragCounter = 0;
+    isDraggingOver.value = false;
+  }
+});
+
+watch([selectedStatus, limit, page], () => {
+  fetchVideos();
+});
+const editVideo = (videoId?: string) => {
+  detailVideoId.value = videoId || "";
+};
+
+const copyVideo = (videoId?: string) => {
+  copyVideoId.value = videoId || '';
+};
+
+// ── Drag & drop upload ──────────────────────────────────────────────────
+const isDraggingOver = ref(false);
+let dragCounter = 0; // track nested dragenter/dragleave pairs
+
+// Returns true for any OS file drag (used to keep counter balanced)
+const isAnyFileDrag = (e: DragEvent) =>
+  Array.from(e.dataTransfer?.types ?? []).includes('Files');
+
+// Returns true only when dragged items contain at least one video file
+const isVideoDrag = (e: DragEvent): boolean => {
+  if (!isAnyFileDrag(e)) return false;
+  const items = e.dataTransfer?.items;
+  if (items?.length) {
+    return Array.from(items).some(item => item.kind === 'file' && item.type.startsWith('video/'));
+  }
+  return false;
+};
+
+const onWindowDragEnter = (e: DragEvent) => {
+  if (uiState.uploadDialogVisible) return; // don't show overlay if dialog is open
+  if (!isAnyFileDrag(e)) return; // same guard as leave — keeps counter balanced
+  dragCounter++;
+  if (isVideoDrag(e)) isDraggingOver.value = true; // show overlay only for video
+};
+
+const onWindowDragLeave = (e: DragEvent) => {
+  if (!isAnyFileDrag(e)) return; // same guard as enter — keeps counter balanced
+  dragCounter--;
+  if (dragCounter <= 0) {
+    dragCounter = 0;
+    isDraggingOver.value = false;
+  }
+};
+
+const onWindowDragOver = (e: DragEvent) => {
+  // When upload dialog is open, let the dropzone handle its own dragover/drop.
+  // Still preventDefault to block browser navigation, but stopPropagation
+  // is NOT set so the dropzone's own handler can also fire.
+  if (uiState.uploadDialogVisible) return;
+  if (isAnyFileDrag(e)) e.preventDefault();
+};
+
+const onWindowDrop = (e: DragEvent) => {
+  e.preventDefault();
+  dragCounter = 0;
+  isDraggingOver.value = false;
+  if (uiState.uploadDialogVisible) return; // let the dialog handle it
+  const allFiles = e.dataTransfer?.files;
+  if (!allFiles?.length) return;
+  // Only pass video files
+  const dt = new DataTransfer();
+  Array.from(allFiles).filter(f => f.type.startsWith('video/')).forEach(f => dt.items.add(f));
+  if (!dt.files.length) return;
+  const result = addFiles(dt.files);
+  if (result.duplicates > 0) {
+    toast.add({
+      severity: 'warn',
+      summary: t('video.page.duplicateSummary'),
+      detail: result.duplicates > 1
+        ? t('video.page.duplicateDetailOther', { count: result.duplicates })
+        : t('video.page.duplicateDetailOne', { count: result.duplicates }),
+      life: 4000,
+    });
+  }
+  if (result.added > 0) startQueue();
+};
+
+onMounted(() => {
+  window.addEventListener('dragenter', onWindowDragEnter);
+  window.addEventListener('dragleave', onWindowDragLeave);
+  window.addEventListener('dragover', onWindowDragOver);
+  window.addEventListener('drop', onWindowDrop);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('dragenter', onWindowDragEnter);
+  window.removeEventListener('dragleave', onWindowDragLeave);
+  window.removeEventListener('dragover', onWindowDragOver);
+  window.removeEventListener('drop', onWindowDrop);
+});
+</script>
+
+<template>
+  <div>
+    <PageHeader :title="t('video.page.title')" :description="t('video.page.description')" :breadcrumbs="[
+      { label: t('pageHeader.dashboard'), to: '/' },
+      { label: t('nav.videos') }
+    ]" :actions="[
+      {
+        label: t('video.page.uploadAction'),
+        icon: iconHoist,
+        variant: 'primary',
+        onClick: () => uiState.toggleUploadDialog()
+      }
+    ]" />
+
+    <VideoBulkActions :selectedVideos="selectedVideos" @delete="deleteSelectedVideos" @clear="selectedVideos = []" />
+    <VideoFilters :loading="loading" v-model:searchQuery="searchQuery" :selectedStatus="selectedStatus"
+      v-model:page="page" v-model:limit="limit" :total="total" ref="videoFilters" :statusOptions="statusOptions"
+      @search="handleSearch" @filter="handleFilter" />
+
+    <Transition name="fade" mode="out-in">
+      <!-- Error State -->
+      <div v-if="error" class="bg-red-50 border border-red-200 rounded-xl p-6 text-center">
+        <span class="i-heroicons-exclamation-circle text-red-500 text-4xl mb-3 inline-block" />
+        <p class="text-red-700 font-medium">{{ error }}</p>
+        <button @click="fetchVideos"
+          class="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors">
+          {{ t('video.page.retry') }}
+        </button>
+      </div>
+
+      <!-- Empty State -->
+      <EmptyState v-else-if="videos.length === 0 && !loading" :title="t('video.page.emptyTitle')"
+        :description="t('video.page.emptyDescription')"
+        imageUrl="https://cdn-icons-png.flaticon.com/512/7486/7486747.png" :actionLabel="t('video.page.emptyAction')"
+        :onAction="() => uiState.toggleUploadDialog()" />
+      <!-- Grid View -->
+      <!-- <VideoGrid :videos="videos" :loading="loading" v-model:selectedVideos="selectedVideos" @delete="deleteVideo" v-else-if="viewMode === 'grid'" /> -->
+
+      <!-- Table View -->
+      <VideoTable v-else :videos="videos" :loading="loading" v-model:selectedVideos="selectedVideos" @delete="deleteVideo"
+        @edit="editVideo" @copy="copyVideo" />
+    </Transition>
+    <DetailVideoModal :videoId="detailVideoId" @close="detailVideoId = ''" />
+    <CopyVideoModal :videoId="copyVideoId" @close="copyVideoId = ''" />
+
+    <!-- Global drag & drop overlay -->
+    <ClientOnly>
+      <Teleport to="body">
+        <div v-if="isDraggingOver"
+          class="fixed inset-0 z-[9999] flex flex-col items-center justify-center pointer-events-none"
+          aria-hidden="true">
+          <!-- Backdrop -->
+          <div class="absolute inset-0 bg-primary/10 backdrop-blur-[2px]" />
+          <!-- Card -->
+          <div class="animate-spring-card relative flex flex-col items-center gap-3 select-none">
+            <div class="w-16 h-16 rounded-2xl bg-white shadow-lg flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-primary" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+            </div>
+            <p class="text-lg font-semibold text-primary">{{ t('video.page.uploadDropTitle') }}</p>
+            <p class="text-sm text-primary/70">{{ t('video.page.uploadDropSubtitle') }}</p>
+          </div>
+        </div>
+      </Teleport>
+    </ClientOnly>
+  </div>
+</template>
diff --git a/src/routes/video/components/VideoBulkActions.vue b/src/routes/video/components/VideoBulkActions.vue
new file mode 100644
index 0000000..0ae6825
--- /dev/null
+++ b/src/routes/video/components/VideoBulkActions.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Video as ModelVideo } from '@/server/api/proto/app/v1/common';
+import { useTranslation } from 'i18next-vue';
+
+defineProps<{
+    selectedVideos: ModelVideo[];
+}>();
+
+const emit = defineEmits<{
+    (e: 'delete'): void;
+    (e: 'clear'): void;
+}>();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+    <div v-if="selectedVideos.length > 0"
+        class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-white border border-gray-200 shadow-xl rounded-full px-6 py-3 flex items-center gap-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
+        <span class="font-medium text-sm text-gray-700">{{ t('video.bulk.selected', { count: selectedVideos.length }) }}</span>
+        <div class="h-4 w-px bg-gray-200"></div>
+        <button @click="emit('delete')"
+            class="flex items-center gap-2 text-red-600 hover:text-red-700 font-medium text-sm transition-colors">
+            <span class="i-heroicons-trash w-4 h-4" />
+            {{ t('video.bulk.delete') }}
+        </button>
+        <button @click="emit('clear')" class="ml-2 text-gray-400 hover:text-gray-600">
+            <span class="i-heroicons-x-mark w-5 h-5" />
+        </button>
+    </div>
+</template>
diff --git a/src/routes/video/components/VideoFilters.vue b/src/routes/video/components/VideoFilters.vue
new file mode 100644
index 0000000..45b76fe
--- /dev/null
+++ b/src/routes/video/components/VideoFilters.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    searchQuery: string;
+    selectedStatus: string;
+    statusOptions: { label: string; value: string }[];
+    total: number;
+    page: number; // 1-based index
+    limit: number;
+    loading: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:searchQuery', value: string): void;
+    (e: 'update:selectedStatus', value: string): void;
+    (e: 'update:page', value: number): void;
+    (e: 'update:limit', value: number): void;
+    (e: 'search'): void;
+}>();
+
+const { t } = useTranslation();
+const pageCount = computed(() => Math.ceil(props.total / props.limit) || 1);
+const first = computed(() => Math.min((props.page - 1) * props.limit + 1, props.total));
+const last = computed(() => Math.min(props.page * props.limit, props.total));
+
+const prevPage = () => {
+    if (props.page > 1) emit('update:page', props.page - 1);
+};
+
+const nextPage = () => {
+    if (props.page < pageCount.value) emit('update:page', props.page + 1);
+};
+</script>
+
+<template>
+    <div class="border-b border-gray-200 mb-6">
+        <div class="flex flex-col md:flex-row gap-3 items-stretch md:items-center">
+            <!-- Search -->
+            <AppInput :model-value="searchQuery" @update:model-value="emit('update:searchQuery', $event as string)"
+                @enter="emit('search')" :placeholder="t('video.filters.searchPlaceholder')" class="flex-1">
+                <template #prefix>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+                    </svg>
+                </template>
+            </AppInput>
+
+            <!-- Status Filter -->
+            <select :value="selectedStatus" @change="emit('update:selectedStatus', ($event.target as HTMLSelectElement).value)"
+                class="w-full md:w-44 px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
+                <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
+                    {{ opt.label }}
+                </option>
+            </select>
+        </div>
+
+        <!-- Paginator -->
+        <div class="flex justify-end w-full gap-2 mt-3 mb-2">
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                {{ t('video.filters.rangeOfTotal', { first, last, total }) }}
+            </span>
+            <div class="flex items-center gap-1">
+                <button class="p-1.5 rounded-full hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                    @click="prevPage" :disabled="page <= 1" :aria-label="t('video.filters.previousPageAria')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m15 18-6-6 6-6" />
+                    </svg>
+                </button>
+                <button class="p-1.5 rounded-full hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                    @click="nextPage" :disabled="page >= pageCount" :aria-label="t('video.filters.nextPageAria')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m9 18 6-6-6-6" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/routes/video/components/VideoTable.vue b/src/routes/video/components/VideoTable.vue
new file mode 100644
index 0000000..f58a382
--- /dev/null
+++ b/src/routes/video/components/VideoTable.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import LinkIcon from '@/components/icons/LinkIcon.vue';
+import PencilIcon from '@/components/icons/PencilIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
+import VideoIcon from '@/components/icons/VideoIcon.vue';
+import BaseTable from '@/components/ui/BaseTable.vue';
+import { formatBytes, formatDate, getStatusSeverity } from '@/lib/utils';
+import type { Video as ModelVideo } from '@/server/api/proto/app/v1/common';
+import type { ColumnDef } from '@tanstack/vue-table';
+import { useTranslation } from 'i18next-vue';
+import { computed, h } from 'vue';
+
+const props = defineProps<{
+  videos: ModelVideo[];
+  selectedVideos: ModelVideo[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:selectedVideos', value: ModelVideo[]): void;
+  (e: 'delete', videoId: string): void;
+  (e: 'edit', videoId: string): void;
+  (e: 'copy', videoId: string): void;
+}>();
+
+const { t } = useTranslation();
+
+const severityClasses: Record<string, string> = {
+  success: 'bg-green-100 text-green-800',
+  info: 'bg-blue-100 text-blue-800',
+  warn: 'bg-yellow-100 text-yellow-800',
+  warning: 'bg-yellow-100 text-yellow-800',
+  danger: 'bg-red-100 text-red-800',
+  secondary: 'bg-gray-100 text-gray-800',
+};
+
+const isAllSelected = computed(() =>
+  props.videos.length > 0 && props.selectedVideos.length === props.videos.length
+);
+
+const toggleAll = () => {
+  if (isAllSelected.value) {
+    emit('update:selectedVideos', []);
+    return;
+  }
+
+  emit('update:selectedVideos', [...props.videos]);
+};
+
+const toggleRow = (video: ModelVideo) => {
+  const exists = props.selectedVideos.some(v => v.id === video.id);
+  if (exists) {
+    emit('update:selectedVideos', props.selectedVideos.filter(v => v.id !== video.id));
+    return;
+  }
+
+  emit('update:selectedVideos', [...props.selectedVideos, video]);
+};
+
+const isSelected = (video: ModelVideo) =>
+  props.selectedVideos.some(v => v.id === video.id);
+
+const columns = computed<ColumnDef<ModelVideo>[]>(() => [
+  {
+    id: 'select',
+    header: () => h('input', {
+      type: 'checkbox',
+      checked: isAllSelected.value,
+      onChange: toggleAll,
+      class: 'h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary',
+    }),
+    cell: ({ row }) => h('input', {
+      type: 'checkbox',
+      checked: isSelected(row.original),
+      onChange: () => toggleRow(row.original),
+      class: 'h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary',
+    }),
+    enableSorting: false,
+    meta: {
+      headerClass: 'w-12',
+    },
+  },
+  {
+    id: 'video',
+    header: t('video.table.video'),
+    cell: ({ row }) => h('div', { class: 'flex items-center gap-3' }, [
+      h('div', { class: 'h-12 w-20 flex-shrink-0 overflow-hidden rounded bg-gray-200' }, row.original.thumbnail
+        ? h('img', {
+          src: row.original.thumbnail,
+          alt: row.original.title,
+          class: 'h-full w-full object-cover',
+        })
+        : h('div', { class: 'flex h-full w-full items-center justify-center' }, [
+          h(VideoIcon, { class: 'h-5 w-5 text-gray-400' }),
+        ])),
+      h('div', { class: 'min-w-0 flex-1' }, [
+        h('p', { class: 'truncate font-medium text-gray-900' }, row.original.title),
+        h('p', { class: 'truncate text-sm text-gray-500' }, row.original.description || t('video.table.noDescription')),
+      ]),
+    ]),
+  },
+  {
+    accessorKey: 'status',
+    header: t('video.table.status'),
+    cell: ({ row }) => h('span', {
+      class: [
+        'rounded-full px-2 py-0.5 text-xs font-medium capitalize',
+        severityClasses[getStatusSeverity(row.original.status) || 'secondary'],
+      ],
+    }, row.original.status),
+  },
+  {
+    id: 'size',
+    header: t('video.table.size'),
+    accessorFn: row => Number(row.size || 0),
+    cell: ({ row }) => h('span', { class: 'text-sm text-gray-500' }, formatBytes(row.original.size)),
+  },
+  {
+    id: 'createdAt',
+    header: t('video.table.created'),
+    accessorFn: row => row.createdAt || '',
+    cell: ({ row }) => h('span', { class: 'text-sm text-gray-500' }, formatDate(row.original.createdAt, true)),
+  },
+  {
+    id: 'actions',
+    header: t('video.table.actions'),
+    enableSorting: false,
+    cell: ({ row }) => h('div', { class: 'flex items-center gap-0.5' }, [
+      h('button', {
+        class: 'rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700',
+        title: t('video.table.copyLink'),
+        onClick: () => emit('copy', row.original.id!),
+      }, [h(LinkIcon, { class: 'h-4 w-4' })]),
+      h('button', {
+        class: 'rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary',
+        title: t('video.table.edit'),
+        onClick: () => emit('edit', row.original.id!),
+      }, [h(PencilIcon, { class: 'h-4 w-4' })]),
+      h('button', {
+        class: 'rounded-md p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-500',
+        title: t('video.table.delete'),
+        onClick: () => emit('delete', row.original.id!),
+      }, [h(TrashIcon, { class: 'h-4 w-4' })]),
+    ]),
+  },
+]);
+</script>
+
+<template>
+  <BaseTable
+    :data="videos"
+    :columns="columns"
+    :loading="loading"
+    :get-row-id="(row, index) => row.id || `${row.title || 'video'}-${index}`"
+    tableClass="min-w-[50rem]"
+    :body-row-class="(row) => isSelected(row.original) ? 'bg-primary/5' : ''"
+  >
+    <template #loading>
+      <div class="divide-y divide-gray-200">
+        <div v-for="i in 10" :key="i" class="p-4">
+          <div class="flex items-center gap-4">
+            <div class="h-12 w-20 rounded-md bg-gray-200 animate-pulse" />
+            <div class="flex-1">
+              <div class="mb-2 h-4 w-2/5 rounded bg-gray-200 animate-pulse" />
+              <div class="h-3 w-1/4 rounded bg-gray-200 animate-pulse" />
+            </div>
+            <div class="h-3 w-[8%] rounded bg-gray-200 animate-pulse" />
+            <div class="h-3 w-[8%] rounded bg-gray-200 animate-pulse" />
+            <div class="h-6 w-16 rounded-full bg-gray-200 animate-pulse" />
+            <div class="h-7 w-22 rounded-md bg-gray-200 animate-pulse" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </BaseTable>
+</template>
diff --git a/src/server/api/proto/agent/v1/woodpecker.ts b/src/server/api/proto/agent/v1/woodpecker.ts
new file mode 100644
index 0000000..263eb00
--- /dev/null
+++ b/src/server/api/proto/agent/v1/woodpecker.ts
@@ -0,0 +1,2734 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: agent/v1/woodpecker.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientReadableStream,
+  type ClientUnaryCall,
+  type ClientWritableStream,
+  type handleClientStreamingCall,
+  type handleServerStreamingCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+
+export const protobufPackage = "proto";
+
+export interface StepState {
+  stepUuid?: string | undefined;
+  started?: number | undefined;
+  finished?: number | undefined;
+  exited?: boolean | undefined;
+  exitCode?: number | undefined;
+  error?: string | undefined;
+  canceled?: boolean | undefined;
+}
+
+export interface WorkflowState {
+  started?: number | undefined;
+  finished?: number | undefined;
+  error?: string | undefined;
+  canceled?: boolean | undefined;
+}
+
+export interface LogEntry {
+  stepUuid?: string | undefined;
+  time?: number | undefined;
+  line?:
+    | number
+    | undefined;
+  /** 0 = stdout, 1 = stderr, 2 = exit-code, 3 = metadata, 4 = progress */
+  type?: number | undefined;
+  data?: Buffer | undefined;
+}
+
+export interface Filter {
+  labels?: { [key: string]: string } | undefined;
+}
+
+export interface Filter_LabelsEntry {
+  key: string;
+  value: string;
+}
+
+export interface Workflow {
+  id?: string | undefined;
+  timeout?: number | undefined;
+  payload?: Buffer | undefined;
+  cancel?: boolean | undefined;
+}
+
+export interface NextRequest {
+  filter?: Filter | undefined;
+}
+
+export interface InitRequest {
+  id?: string | undefined;
+  state?: WorkflowState | undefined;
+}
+
+export interface WaitRequest {
+  id?: string | undefined;
+}
+
+export interface DoneRequest {
+  id?: string | undefined;
+  state?: WorkflowState | undefined;
+}
+
+export interface ExtendRequest {
+  id?: string | undefined;
+}
+
+export interface UpdateRequest {
+  id?: string | undefined;
+  state?: StepState | undefined;
+}
+
+export interface LogRequest {
+  logEntries?: LogEntry[] | undefined;
+}
+
+export interface Empty {
+}
+
+export interface ReportHealthRequest {
+  status?: string | undefined;
+}
+
+export interface AgentInfo {
+  platform?: string | undefined;
+  capacity?: number | undefined;
+  backend?: string | undefined;
+  version?: string | undefined;
+  customLabels?: { [key: string]: string } | undefined;
+}
+
+export interface AgentInfo_CustomLabelsEntry {
+  key: string;
+  value: string;
+}
+
+export interface RegisterAgentRequest {
+  info?: AgentInfo | undefined;
+}
+
+export interface VersionResponse {
+  grpcVersion?: number | undefined;
+  serverVersion?: string | undefined;
+}
+
+export interface NextResponse {
+  workflow?: Workflow | undefined;
+}
+
+export interface RegisterAgentResponse {
+  agentId?: string | undefined;
+}
+
+export interface WaitResponse {
+  canceled?: boolean | undefined;
+}
+
+export interface AuthRequest {
+  agentToken?: string | undefined;
+  agentId?: string | undefined;
+  hostname?: string | undefined;
+}
+
+export interface AuthResponse {
+  status?: string | undefined;
+  agentId?: string | undefined;
+  accessToken?: string | undefined;
+}
+
+export interface StreamOptions {
+  filter?: Filter | undefined;
+}
+
+export interface StatusUpdate {
+  stepUuid?: string | undefined;
+  time?:
+    | number
+    | undefined;
+  /** 0=stdout, 1=stderr, 2=exit-code, 3=metadata, 4=progress, 5=system-resource */
+  type?: number | undefined;
+  data?: Buffer | undefined;
+}
+
+function createBaseStepState(): StepState {
+  return { stepUuid: "", started: 0, finished: 0, exited: false, exitCode: 0, error: "", canceled: false };
+}
+
+export const StepState: MessageFns<StepState> = {
+  encode(message: StepState, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.stepUuid !== undefined && message.stepUuid !== "") {
+      writer.uint32(10).string(message.stepUuid);
+    }
+    if (message.started !== undefined && message.started !== 0) {
+      writer.uint32(16).int64(message.started);
+    }
+    if (message.finished !== undefined && message.finished !== 0) {
+      writer.uint32(24).int64(message.finished);
+    }
+    if (message.exited !== undefined && message.exited !== false) {
+      writer.uint32(32).bool(message.exited);
+    }
+    if (message.exitCode !== undefined && message.exitCode !== 0) {
+      writer.uint32(40).int32(message.exitCode);
+    }
+    if (message.error !== undefined && message.error !== "") {
+      writer.uint32(50).string(message.error);
+    }
+    if (message.canceled !== undefined && message.canceled !== false) {
+      writer.uint32(56).bool(message.canceled);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): StepState {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseStepState();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.stepUuid = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.started = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.finished = longToNumber(reader.int64());
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.exited = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.exitCode = reader.int32();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.error = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.canceled = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): StepState {
+    return {
+      stepUuid: isSet(object.stepUuid)
+        ? globalThis.String(object.stepUuid)
+        : isSet(object.step_uuid)
+        ? globalThis.String(object.step_uuid)
+        : "",
+      started: isSet(object.started) ? globalThis.Number(object.started) : 0,
+      finished: isSet(object.finished) ? globalThis.Number(object.finished) : 0,
+      exited: isSet(object.exited) ? globalThis.Boolean(object.exited) : false,
+      exitCode: isSet(object.exitCode)
+        ? globalThis.Number(object.exitCode)
+        : isSet(object.exit_code)
+        ? globalThis.Number(object.exit_code)
+        : 0,
+      error: isSet(object.error) ? globalThis.String(object.error) : "",
+      canceled: isSet(object.canceled) ? globalThis.Boolean(object.canceled) : false,
+    };
+  },
+
+  toJSON(message: StepState): unknown {
+    const obj: any = {};
+    if (message.stepUuid !== undefined && message.stepUuid !== "") {
+      obj.stepUuid = message.stepUuid;
+    }
+    if (message.started !== undefined && message.started !== 0) {
+      obj.started = Math.round(message.started);
+    }
+    if (message.finished !== undefined && message.finished !== 0) {
+      obj.finished = Math.round(message.finished);
+    }
+    if (message.exited !== undefined && message.exited !== false) {
+      obj.exited = message.exited;
+    }
+    if (message.exitCode !== undefined && message.exitCode !== 0) {
+      obj.exitCode = Math.round(message.exitCode);
+    }
+    if (message.error !== undefined && message.error !== "") {
+      obj.error = message.error;
+    }
+    if (message.canceled !== undefined && message.canceled !== false) {
+      obj.canceled = message.canceled;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<StepState>, I>>(base?: I): StepState {
+    return StepState.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<StepState>, I>>(object: I): StepState {
+    const message = createBaseStepState();
+    message.stepUuid = object.stepUuid ?? "";
+    message.started = object.started ?? 0;
+    message.finished = object.finished ?? 0;
+    message.exited = object.exited ?? false;
+    message.exitCode = object.exitCode ?? 0;
+    message.error = object.error ?? "";
+    message.canceled = object.canceled ?? false;
+    return message;
+  },
+};
+
+function createBaseWorkflowState(): WorkflowState {
+  return { started: 0, finished: 0, error: "", canceled: false };
+}
+
+export const WorkflowState: MessageFns<WorkflowState> = {
+  encode(message: WorkflowState, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.started !== undefined && message.started !== 0) {
+      writer.uint32(8).int64(message.started);
+    }
+    if (message.finished !== undefined && message.finished !== 0) {
+      writer.uint32(16).int64(message.finished);
+    }
+    if (message.error !== undefined && message.error !== "") {
+      writer.uint32(26).string(message.error);
+    }
+    if (message.canceled !== undefined && message.canceled !== false) {
+      writer.uint32(32).bool(message.canceled);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): WorkflowState {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseWorkflowState();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.started = longToNumber(reader.int64());
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.finished = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.error = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.canceled = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): WorkflowState {
+    return {
+      started: isSet(object.started) ? globalThis.Number(object.started) : 0,
+      finished: isSet(object.finished) ? globalThis.Number(object.finished) : 0,
+      error: isSet(object.error) ? globalThis.String(object.error) : "",
+      canceled: isSet(object.canceled) ? globalThis.Boolean(object.canceled) : false,
+    };
+  },
+
+  toJSON(message: WorkflowState): unknown {
+    const obj: any = {};
+    if (message.started !== undefined && message.started !== 0) {
+      obj.started = Math.round(message.started);
+    }
+    if (message.finished !== undefined && message.finished !== 0) {
+      obj.finished = Math.round(message.finished);
+    }
+    if (message.error !== undefined && message.error !== "") {
+      obj.error = message.error;
+    }
+    if (message.canceled !== undefined && message.canceled !== false) {
+      obj.canceled = message.canceled;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<WorkflowState>, I>>(base?: I): WorkflowState {
+    return WorkflowState.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<WorkflowState>, I>>(object: I): WorkflowState {
+    const message = createBaseWorkflowState();
+    message.started = object.started ?? 0;
+    message.finished = object.finished ?? 0;
+    message.error = object.error ?? "";
+    message.canceled = object.canceled ?? false;
+    return message;
+  },
+};
+
+function createBaseLogEntry(): LogEntry {
+  return { stepUuid: "", time: 0, line: 0, type: 0, data: Buffer.alloc(0) };
+}
+
+export const LogEntry: MessageFns<LogEntry> = {
+  encode(message: LogEntry, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.stepUuid !== undefined && message.stepUuid !== "") {
+      writer.uint32(10).string(message.stepUuid);
+    }
+    if (message.time !== undefined && message.time !== 0) {
+      writer.uint32(16).int64(message.time);
+    }
+    if (message.line !== undefined && message.line !== 0) {
+      writer.uint32(24).int32(message.line);
+    }
+    if (message.type !== undefined && message.type !== 0) {
+      writer.uint32(32).int32(message.type);
+    }
+    if (message.data !== undefined && message.data.length !== 0) {
+      writer.uint32(42).bytes(message.data);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LogEntry {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLogEntry();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.stepUuid = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.time = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.line = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.type = reader.int32();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.data = Buffer.from(reader.bytes());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LogEntry {
+    return {
+      stepUuid: isSet(object.stepUuid)
+        ? globalThis.String(object.stepUuid)
+        : isSet(object.step_uuid)
+        ? globalThis.String(object.step_uuid)
+        : "",
+      time: isSet(object.time) ? globalThis.Number(object.time) : 0,
+      line: isSet(object.line) ? globalThis.Number(object.line) : 0,
+      type: isSet(object.type) ? globalThis.Number(object.type) : 0,
+      data: isSet(object.data) ? Buffer.from(bytesFromBase64(object.data)) : Buffer.alloc(0),
+    };
+  },
+
+  toJSON(message: LogEntry): unknown {
+    const obj: any = {};
+    if (message.stepUuid !== undefined && message.stepUuid !== "") {
+      obj.stepUuid = message.stepUuid;
+    }
+    if (message.time !== undefined && message.time !== 0) {
+      obj.time = Math.round(message.time);
+    }
+    if (message.line !== undefined && message.line !== 0) {
+      obj.line = Math.round(message.line);
+    }
+    if (message.type !== undefined && message.type !== 0) {
+      obj.type = Math.round(message.type);
+    }
+    if (message.data !== undefined && message.data.length !== 0) {
+      obj.data = base64FromBytes(message.data);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LogEntry>, I>>(base?: I): LogEntry {
+    return LogEntry.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LogEntry>, I>>(object: I): LogEntry {
+    const message = createBaseLogEntry();
+    message.stepUuid = object.stepUuid ?? "";
+    message.time = object.time ?? 0;
+    message.line = object.line ?? 0;
+    message.type = object.type ?? 0;
+    message.data = object.data ?? Buffer.alloc(0);
+    return message;
+  },
+};
+
+function createBaseFilter(): Filter {
+  return { labels: {} };
+}
+
+export const Filter: MessageFns<Filter> = {
+  encode(message: Filter, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    globalThis.Object.entries(message.labels || {}).forEach(([key, value]: [string, string]) => {
+      Filter_LabelsEntry.encode({ key: key as any, value }, writer.uint32(10).fork()).join();
+    });
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Filter {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseFilter();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const entry1 = Filter_LabelsEntry.decode(reader, reader.uint32());
+          if (entry1.value !== undefined) {
+            message.labels![entry1.key] = entry1.value;
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Filter {
+    return {
+      labels: isObject(object.labels)
+        ? (globalThis.Object.entries(object.labels) as [string, any][]).reduce(
+          (acc: { [key: string]: string }, [key, value]: [string, any]) => {
+            acc[key] = globalThis.String(value);
+            return acc;
+          },
+          {},
+        )
+        : {},
+    };
+  },
+
+  toJSON(message: Filter): unknown {
+    const obj: any = {};
+    if (message.labels) {
+      const entries = globalThis.Object.entries(message.labels) as [string, string][];
+      if (entries.length > 0) {
+        obj.labels = {};
+        entries.forEach(([k, v]) => {
+          obj.labels[k] = v;
+        });
+      }
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Filter>, I>>(base?: I): Filter {
+    return Filter.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Filter>, I>>(object: I): Filter {
+    const message = createBaseFilter();
+    message.labels = (globalThis.Object.entries(object.labels ?? {}) as [string, string][]).reduce(
+      (acc: { [key: string]: string }, [key, value]: [string, string]) => {
+        if (value !== undefined) {
+          acc[key] = globalThis.String(value);
+        }
+        return acc;
+      },
+      {},
+    );
+    return message;
+  },
+};
+
+function createBaseFilter_LabelsEntry(): Filter_LabelsEntry {
+  return { key: "", value: "" };
+}
+
+export const Filter_LabelsEntry: MessageFns<Filter_LabelsEntry> = {
+  encode(message: Filter_LabelsEntry, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.key !== "") {
+      writer.uint32(10).string(message.key);
+    }
+    if (message.value !== "") {
+      writer.uint32(18).string(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Filter_LabelsEntry {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseFilter_LabelsEntry();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.key = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Filter_LabelsEntry {
+    return {
+      key: isSet(object.key) ? globalThis.String(object.key) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+    };
+  },
+
+  toJSON(message: Filter_LabelsEntry): unknown {
+    const obj: any = {};
+    if (message.key !== "") {
+      obj.key = message.key;
+    }
+    if (message.value !== "") {
+      obj.value = message.value;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Filter_LabelsEntry>, I>>(base?: I): Filter_LabelsEntry {
+    return Filter_LabelsEntry.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Filter_LabelsEntry>, I>>(object: I): Filter_LabelsEntry {
+    const message = createBaseFilter_LabelsEntry();
+    message.key = object.key ?? "";
+    message.value = object.value ?? "";
+    return message;
+  },
+};
+
+function createBaseWorkflow(): Workflow {
+  return { id: "", timeout: 0, payload: Buffer.alloc(0), cancel: false };
+}
+
+export const Workflow: MessageFns<Workflow> = {
+  encode(message: Workflow, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.timeout !== undefined && message.timeout !== 0) {
+      writer.uint32(16).int64(message.timeout);
+    }
+    if (message.payload !== undefined && message.payload.length !== 0) {
+      writer.uint32(26).bytes(message.payload);
+    }
+    if (message.cancel !== undefined && message.cancel !== false) {
+      writer.uint32(32).bool(message.cancel);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Workflow {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseWorkflow();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.timeout = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.payload = Buffer.from(reader.bytes());
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.cancel = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Workflow {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      timeout: isSet(object.timeout) ? globalThis.Number(object.timeout) : 0,
+      payload: isSet(object.payload) ? Buffer.from(bytesFromBase64(object.payload)) : Buffer.alloc(0),
+      cancel: isSet(object.cancel) ? globalThis.Boolean(object.cancel) : false,
+    };
+  },
+
+  toJSON(message: Workflow): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.timeout !== undefined && message.timeout !== 0) {
+      obj.timeout = Math.round(message.timeout);
+    }
+    if (message.payload !== undefined && message.payload.length !== 0) {
+      obj.payload = base64FromBytes(message.payload);
+    }
+    if (message.cancel !== undefined && message.cancel !== false) {
+      obj.cancel = message.cancel;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Workflow>, I>>(base?: I): Workflow {
+    return Workflow.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Workflow>, I>>(object: I): Workflow {
+    const message = createBaseWorkflow();
+    message.id = object.id ?? "";
+    message.timeout = object.timeout ?? 0;
+    message.payload = object.payload ?? Buffer.alloc(0);
+    message.cancel = object.cancel ?? false;
+    return message;
+  },
+};
+
+function createBaseNextRequest(): NextRequest {
+  return { filter: undefined };
+}
+
+export const NextRequest: MessageFns<NextRequest> = {
+  encode(message: NextRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.filter !== undefined) {
+      Filter.encode(message.filter, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): NextRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseNextRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.filter = Filter.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): NextRequest {
+    return { filter: isSet(object.filter) ? Filter.fromJSON(object.filter) : undefined };
+  },
+
+  toJSON(message: NextRequest): unknown {
+    const obj: any = {};
+    if (message.filter !== undefined) {
+      obj.filter = Filter.toJSON(message.filter);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<NextRequest>, I>>(base?: I): NextRequest {
+    return NextRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<NextRequest>, I>>(object: I): NextRequest {
+    const message = createBaseNextRequest();
+    message.filter = (object.filter !== undefined && object.filter !== null)
+      ? Filter.fromPartial(object.filter)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseInitRequest(): InitRequest {
+  return { id: "", state: undefined };
+}
+
+export const InitRequest: MessageFns<InitRequest> = {
+  encode(message: InitRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.state !== undefined) {
+      WorkflowState.encode(message.state, writer.uint32(18).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): InitRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseInitRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.state = WorkflowState.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): InitRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      state: isSet(object.state) ? WorkflowState.fromJSON(object.state) : undefined,
+    };
+  },
+
+  toJSON(message: InitRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.state !== undefined) {
+      obj.state = WorkflowState.toJSON(message.state);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<InitRequest>, I>>(base?: I): InitRequest {
+    return InitRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<InitRequest>, I>>(object: I): InitRequest {
+    const message = createBaseInitRequest();
+    message.id = object.id ?? "";
+    message.state = (object.state !== undefined && object.state !== null)
+      ? WorkflowState.fromPartial(object.state)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseWaitRequest(): WaitRequest {
+  return { id: "" };
+}
+
+export const WaitRequest: MessageFns<WaitRequest> = {
+  encode(message: WaitRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): WaitRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseWaitRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): WaitRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: WaitRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<WaitRequest>, I>>(base?: I): WaitRequest {
+    return WaitRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<WaitRequest>, I>>(object: I): WaitRequest {
+    const message = createBaseWaitRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseDoneRequest(): DoneRequest {
+  return { id: "", state: undefined };
+}
+
+export const DoneRequest: MessageFns<DoneRequest> = {
+  encode(message: DoneRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.state !== undefined) {
+      WorkflowState.encode(message.state, writer.uint32(18).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DoneRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDoneRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.state = WorkflowState.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DoneRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      state: isSet(object.state) ? WorkflowState.fromJSON(object.state) : undefined,
+    };
+  },
+
+  toJSON(message: DoneRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.state !== undefined) {
+      obj.state = WorkflowState.toJSON(message.state);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DoneRequest>, I>>(base?: I): DoneRequest {
+    return DoneRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DoneRequest>, I>>(object: I): DoneRequest {
+    const message = createBaseDoneRequest();
+    message.id = object.id ?? "";
+    message.state = (object.state !== undefined && object.state !== null)
+      ? WorkflowState.fromPartial(object.state)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseExtendRequest(): ExtendRequest {
+  return { id: "" };
+}
+
+export const ExtendRequest: MessageFns<ExtendRequest> = {
+  encode(message: ExtendRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ExtendRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseExtendRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ExtendRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: ExtendRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ExtendRequest>, I>>(base?: I): ExtendRequest {
+    return ExtendRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ExtendRequest>, I>>(object: I): ExtendRequest {
+    const message = createBaseExtendRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseUpdateRequest(): UpdateRequest {
+  return { id: "", state: undefined };
+}
+
+export const UpdateRequest: MessageFns<UpdateRequest> = {
+  encode(message: UpdateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.state !== undefined) {
+      StepState.encode(message.state, writer.uint32(18).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.state = StepState.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      state: isSet(object.state) ? StepState.fromJSON(object.state) : undefined,
+    };
+  },
+
+  toJSON(message: UpdateRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.state !== undefined) {
+      obj.state = StepState.toJSON(message.state);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateRequest>, I>>(base?: I): UpdateRequest {
+    return UpdateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateRequest>, I>>(object: I): UpdateRequest {
+    const message = createBaseUpdateRequest();
+    message.id = object.id ?? "";
+    message.state = (object.state !== undefined && object.state !== null)
+      ? StepState.fromPartial(object.state)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseLogRequest(): LogRequest {
+  return { logEntries: [] };
+}
+
+export const LogRequest: MessageFns<LogRequest> = {
+  encode(message: LogRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.logEntries !== undefined && message.logEntries.length !== 0) {
+      for (const v of message.logEntries) {
+        LogEntry.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LogRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLogRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = LogEntry.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.logEntries!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LogRequest {
+    return {
+      logEntries: globalThis.Array.isArray(object?.logEntries)
+        ? object.logEntries.map((e: any) => LogEntry.fromJSON(e))
+        : [],
+    };
+  },
+
+  toJSON(message: LogRequest): unknown {
+    const obj: any = {};
+    if (message.logEntries?.length) {
+      obj.logEntries = message.logEntries.map((e) => LogEntry.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LogRequest>, I>>(base?: I): LogRequest {
+    return LogRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LogRequest>, I>>(object: I): LogRequest {
+    const message = createBaseLogRequest();
+    message.logEntries = object.logEntries?.map((e) => LogEntry.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseEmpty(): Empty {
+  return {};
+}
+
+export const Empty: MessageFns<Empty> = {
+  encode(_: Empty, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Empty {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseEmpty();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): Empty {
+    return {};
+  },
+
+  toJSON(_: Empty): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Empty>, I>>(base?: I): Empty {
+    return Empty.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Empty>, I>>(_: I): Empty {
+    const message = createBaseEmpty();
+    return message;
+  },
+};
+
+function createBaseReportHealthRequest(): ReportHealthRequest {
+  return { status: "" };
+}
+
+export const ReportHealthRequest: MessageFns<ReportHealthRequest> = {
+  encode(message: ReportHealthRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(10).string(message.status);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ReportHealthRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseReportHealthRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ReportHealthRequest {
+    return { status: isSet(object.status) ? globalThis.String(object.status) : "" };
+  },
+
+  toJSON(message: ReportHealthRequest): unknown {
+    const obj: any = {};
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ReportHealthRequest>, I>>(base?: I): ReportHealthRequest {
+    return ReportHealthRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ReportHealthRequest>, I>>(object: I): ReportHealthRequest {
+    const message = createBaseReportHealthRequest();
+    message.status = object.status ?? "";
+    return message;
+  },
+};
+
+function createBaseAgentInfo(): AgentInfo {
+  return { platform: "", capacity: 0, backend: "", version: "", customLabels: {} };
+}
+
+export const AgentInfo: MessageFns<AgentInfo> = {
+  encode(message: AgentInfo, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.platform !== undefined && message.platform !== "") {
+      writer.uint32(10).string(message.platform);
+    }
+    if (message.capacity !== undefined && message.capacity !== 0) {
+      writer.uint32(16).int32(message.capacity);
+    }
+    if (message.backend !== undefined && message.backend !== "") {
+      writer.uint32(26).string(message.backend);
+    }
+    if (message.version !== undefined && message.version !== "") {
+      writer.uint32(34).string(message.version);
+    }
+    globalThis.Object.entries(message.customLabels || {}).forEach(([key, value]: [string, string]) => {
+      AgentInfo_CustomLabelsEntry.encode({ key: key as any, value }, writer.uint32(42).fork()).join();
+    });
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AgentInfo {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAgentInfo();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.platform = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.capacity = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.backend = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.version = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          const entry5 = AgentInfo_CustomLabelsEntry.decode(reader, reader.uint32());
+          if (entry5.value !== undefined) {
+            message.customLabels![entry5.key] = entry5.value;
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AgentInfo {
+    return {
+      platform: isSet(object.platform) ? globalThis.String(object.platform) : "",
+      capacity: isSet(object.capacity) ? globalThis.Number(object.capacity) : 0,
+      backend: isSet(object.backend) ? globalThis.String(object.backend) : "",
+      version: isSet(object.version) ? globalThis.String(object.version) : "",
+      customLabels: isObject(object.customLabels)
+        ? (globalThis.Object.entries(object.customLabels) as [string, any][]).reduce(
+          (acc: { [key: string]: string }, [key, value]: [string, any]) => {
+            acc[key] = globalThis.String(value);
+            return acc;
+          },
+          {},
+        )
+        : {},
+    };
+  },
+
+  toJSON(message: AgentInfo): unknown {
+    const obj: any = {};
+    if (message.platform !== undefined && message.platform !== "") {
+      obj.platform = message.platform;
+    }
+    if (message.capacity !== undefined && message.capacity !== 0) {
+      obj.capacity = Math.round(message.capacity);
+    }
+    if (message.backend !== undefined && message.backend !== "") {
+      obj.backend = message.backend;
+    }
+    if (message.version !== undefined && message.version !== "") {
+      obj.version = message.version;
+    }
+    if (message.customLabels) {
+      const entries = globalThis.Object.entries(message.customLabels) as [string, string][];
+      if (entries.length > 0) {
+        obj.customLabels = {};
+        entries.forEach(([k, v]) => {
+          obj.customLabels[k] = v;
+        });
+      }
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AgentInfo>, I>>(base?: I): AgentInfo {
+    return AgentInfo.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AgentInfo>, I>>(object: I): AgentInfo {
+    const message = createBaseAgentInfo();
+    message.platform = object.platform ?? "";
+    message.capacity = object.capacity ?? 0;
+    message.backend = object.backend ?? "";
+    message.version = object.version ?? "";
+    message.customLabels = (globalThis.Object.entries(object.customLabels ?? {}) as [string, string][]).reduce(
+      (acc: { [key: string]: string }, [key, value]: [string, string]) => {
+        if (value !== undefined) {
+          acc[key] = globalThis.String(value);
+        }
+        return acc;
+      },
+      {},
+    );
+    return message;
+  },
+};
+
+function createBaseAgentInfo_CustomLabelsEntry(): AgentInfo_CustomLabelsEntry {
+  return { key: "", value: "" };
+}
+
+export const AgentInfo_CustomLabelsEntry: MessageFns<AgentInfo_CustomLabelsEntry> = {
+  encode(message: AgentInfo_CustomLabelsEntry, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.key !== "") {
+      writer.uint32(10).string(message.key);
+    }
+    if (message.value !== "") {
+      writer.uint32(18).string(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AgentInfo_CustomLabelsEntry {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAgentInfo_CustomLabelsEntry();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.key = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AgentInfo_CustomLabelsEntry {
+    return {
+      key: isSet(object.key) ? globalThis.String(object.key) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+    };
+  },
+
+  toJSON(message: AgentInfo_CustomLabelsEntry): unknown {
+    const obj: any = {};
+    if (message.key !== "") {
+      obj.key = message.key;
+    }
+    if (message.value !== "") {
+      obj.value = message.value;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AgentInfo_CustomLabelsEntry>, I>>(base?: I): AgentInfo_CustomLabelsEntry {
+    return AgentInfo_CustomLabelsEntry.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AgentInfo_CustomLabelsEntry>, I>>(object: I): AgentInfo_CustomLabelsEntry {
+    const message = createBaseAgentInfo_CustomLabelsEntry();
+    message.key = object.key ?? "";
+    message.value = object.value ?? "";
+    return message;
+  },
+};
+
+function createBaseRegisterAgentRequest(): RegisterAgentRequest {
+  return { info: undefined };
+}
+
+export const RegisterAgentRequest: MessageFns<RegisterAgentRequest> = {
+  encode(message: RegisterAgentRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.info !== undefined) {
+      AgentInfo.encode(message.info, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RegisterAgentRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRegisterAgentRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.info = AgentInfo.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RegisterAgentRequest {
+    return { info: isSet(object.info) ? AgentInfo.fromJSON(object.info) : undefined };
+  },
+
+  toJSON(message: RegisterAgentRequest): unknown {
+    const obj: any = {};
+    if (message.info !== undefined) {
+      obj.info = AgentInfo.toJSON(message.info);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RegisterAgentRequest>, I>>(base?: I): RegisterAgentRequest {
+    return RegisterAgentRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RegisterAgentRequest>, I>>(object: I): RegisterAgentRequest {
+    const message = createBaseRegisterAgentRequest();
+    message.info = (object.info !== undefined && object.info !== null) ? AgentInfo.fromPartial(object.info) : undefined;
+    return message;
+  },
+};
+
+function createBaseVersionResponse(): VersionResponse {
+  return { grpcVersion: 0, serverVersion: "" };
+}
+
+export const VersionResponse: MessageFns<VersionResponse> = {
+  encode(message: VersionResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.grpcVersion !== undefined && message.grpcVersion !== 0) {
+      writer.uint32(8).int32(message.grpcVersion);
+    }
+    if (message.serverVersion !== undefined && message.serverVersion !== "") {
+      writer.uint32(18).string(message.serverVersion);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): VersionResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseVersionResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.grpcVersion = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.serverVersion = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): VersionResponse {
+    return {
+      grpcVersion: isSet(object.grpcVersion)
+        ? globalThis.Number(object.grpcVersion)
+        : isSet(object.grpc_version)
+        ? globalThis.Number(object.grpc_version)
+        : 0,
+      serverVersion: isSet(object.serverVersion)
+        ? globalThis.String(object.serverVersion)
+        : isSet(object.server_version)
+        ? globalThis.String(object.server_version)
+        : "",
+    };
+  },
+
+  toJSON(message: VersionResponse): unknown {
+    const obj: any = {};
+    if (message.grpcVersion !== undefined && message.grpcVersion !== 0) {
+      obj.grpcVersion = Math.round(message.grpcVersion);
+    }
+    if (message.serverVersion !== undefined && message.serverVersion !== "") {
+      obj.serverVersion = message.serverVersion;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<VersionResponse>, I>>(base?: I): VersionResponse {
+    return VersionResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<VersionResponse>, I>>(object: I): VersionResponse {
+    const message = createBaseVersionResponse();
+    message.grpcVersion = object.grpcVersion ?? 0;
+    message.serverVersion = object.serverVersion ?? "";
+    return message;
+  },
+};
+
+function createBaseNextResponse(): NextResponse {
+  return { workflow: undefined };
+}
+
+export const NextResponse: MessageFns<NextResponse> = {
+  encode(message: NextResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.workflow !== undefined) {
+      Workflow.encode(message.workflow, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): NextResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseNextResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.workflow = Workflow.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): NextResponse {
+    return { workflow: isSet(object.workflow) ? Workflow.fromJSON(object.workflow) : undefined };
+  },
+
+  toJSON(message: NextResponse): unknown {
+    const obj: any = {};
+    if (message.workflow !== undefined) {
+      obj.workflow = Workflow.toJSON(message.workflow);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<NextResponse>, I>>(base?: I): NextResponse {
+    return NextResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<NextResponse>, I>>(object: I): NextResponse {
+    const message = createBaseNextResponse();
+    message.workflow = (object.workflow !== undefined && object.workflow !== null)
+      ? Workflow.fromPartial(object.workflow)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseRegisterAgentResponse(): RegisterAgentResponse {
+  return { agentId: "" };
+}
+
+export const RegisterAgentResponse: MessageFns<RegisterAgentResponse> = {
+  encode(message: RegisterAgentResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.agentId !== undefined && message.agentId !== "") {
+      writer.uint32(10).string(message.agentId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RegisterAgentResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRegisterAgentResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.agentId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RegisterAgentResponse {
+    return {
+      agentId: isSet(object.agentId)
+        ? globalThis.String(object.agentId)
+        : isSet(object.agent_id)
+        ? globalThis.String(object.agent_id)
+        : "",
+    };
+  },
+
+  toJSON(message: RegisterAgentResponse): unknown {
+    const obj: any = {};
+    if (message.agentId !== undefined && message.agentId !== "") {
+      obj.agentId = message.agentId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RegisterAgentResponse>, I>>(base?: I): RegisterAgentResponse {
+    return RegisterAgentResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RegisterAgentResponse>, I>>(object: I): RegisterAgentResponse {
+    const message = createBaseRegisterAgentResponse();
+    message.agentId = object.agentId ?? "";
+    return message;
+  },
+};
+
+function createBaseWaitResponse(): WaitResponse {
+  return { canceled: false };
+}
+
+export const WaitResponse: MessageFns<WaitResponse> = {
+  encode(message: WaitResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.canceled !== undefined && message.canceled !== false) {
+      writer.uint32(8).bool(message.canceled);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): WaitResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseWaitResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.canceled = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): WaitResponse {
+    return { canceled: isSet(object.canceled) ? globalThis.Boolean(object.canceled) : false };
+  },
+
+  toJSON(message: WaitResponse): unknown {
+    const obj: any = {};
+    if (message.canceled !== undefined && message.canceled !== false) {
+      obj.canceled = message.canceled;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<WaitResponse>, I>>(base?: I): WaitResponse {
+    return WaitResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<WaitResponse>, I>>(object: I): WaitResponse {
+    const message = createBaseWaitResponse();
+    message.canceled = object.canceled ?? false;
+    return message;
+  },
+};
+
+function createBaseAuthRequest(): AuthRequest {
+  return { agentToken: "", agentId: "", hostname: "" };
+}
+
+export const AuthRequest: MessageFns<AuthRequest> = {
+  encode(message: AuthRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.agentToken !== undefined && message.agentToken !== "") {
+      writer.uint32(10).string(message.agentToken);
+    }
+    if (message.agentId !== undefined && message.agentId !== "") {
+      writer.uint32(18).string(message.agentId);
+    }
+    if (message.hostname !== undefined && message.hostname !== "") {
+      writer.uint32(26).string(message.hostname);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AuthRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAuthRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.agentToken = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.agentId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.hostname = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AuthRequest {
+    return {
+      agentToken: isSet(object.agentToken)
+        ? globalThis.String(object.agentToken)
+        : isSet(object.agent_token)
+        ? globalThis.String(object.agent_token)
+        : "",
+      agentId: isSet(object.agentId)
+        ? globalThis.String(object.agentId)
+        : isSet(object.agent_id)
+        ? globalThis.String(object.agent_id)
+        : "",
+      hostname: isSet(object.hostname) ? globalThis.String(object.hostname) : "",
+    };
+  },
+
+  toJSON(message: AuthRequest): unknown {
+    const obj: any = {};
+    if (message.agentToken !== undefined && message.agentToken !== "") {
+      obj.agentToken = message.agentToken;
+    }
+    if (message.agentId !== undefined && message.agentId !== "") {
+      obj.agentId = message.agentId;
+    }
+    if (message.hostname !== undefined && message.hostname !== "") {
+      obj.hostname = message.hostname;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AuthRequest>, I>>(base?: I): AuthRequest {
+    return AuthRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AuthRequest>, I>>(object: I): AuthRequest {
+    const message = createBaseAuthRequest();
+    message.agentToken = object.agentToken ?? "";
+    message.agentId = object.agentId ?? "";
+    message.hostname = object.hostname ?? "";
+    return message;
+  },
+};
+
+function createBaseAuthResponse(): AuthResponse {
+  return { status: "", agentId: "", accessToken: "" };
+}
+
+export const AuthResponse: MessageFns<AuthResponse> = {
+  encode(message: AuthResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(10).string(message.status);
+    }
+    if (message.agentId !== undefined && message.agentId !== "") {
+      writer.uint32(18).string(message.agentId);
+    }
+    if (message.accessToken !== undefined && message.accessToken !== "") {
+      writer.uint32(26).string(message.accessToken);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AuthResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAuthResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.agentId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.accessToken = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AuthResponse {
+    return {
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      agentId: isSet(object.agentId)
+        ? globalThis.String(object.agentId)
+        : isSet(object.agent_id)
+        ? globalThis.String(object.agent_id)
+        : "",
+      accessToken: isSet(object.accessToken)
+        ? globalThis.String(object.accessToken)
+        : isSet(object.access_token)
+        ? globalThis.String(object.access_token)
+        : "",
+    };
+  },
+
+  toJSON(message: AuthResponse): unknown {
+    const obj: any = {};
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.agentId !== undefined && message.agentId !== "") {
+      obj.agentId = message.agentId;
+    }
+    if (message.accessToken !== undefined && message.accessToken !== "") {
+      obj.accessToken = message.accessToken;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AuthResponse>, I>>(base?: I): AuthResponse {
+    return AuthResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AuthResponse>, I>>(object: I): AuthResponse {
+    const message = createBaseAuthResponse();
+    message.status = object.status ?? "";
+    message.agentId = object.agentId ?? "";
+    message.accessToken = object.accessToken ?? "";
+    return message;
+  },
+};
+
+function createBaseStreamOptions(): StreamOptions {
+  return { filter: undefined };
+}
+
+export const StreamOptions: MessageFns<StreamOptions> = {
+  encode(message: StreamOptions, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.filter !== undefined) {
+      Filter.encode(message.filter, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): StreamOptions {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseStreamOptions();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.filter = Filter.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): StreamOptions {
+    return { filter: isSet(object.filter) ? Filter.fromJSON(object.filter) : undefined };
+  },
+
+  toJSON(message: StreamOptions): unknown {
+    const obj: any = {};
+    if (message.filter !== undefined) {
+      obj.filter = Filter.toJSON(message.filter);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<StreamOptions>, I>>(base?: I): StreamOptions {
+    return StreamOptions.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<StreamOptions>, I>>(object: I): StreamOptions {
+    const message = createBaseStreamOptions();
+    message.filter = (object.filter !== undefined && object.filter !== null)
+      ? Filter.fromPartial(object.filter)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseStatusUpdate(): StatusUpdate {
+  return { stepUuid: "", time: 0, type: 0, data: Buffer.alloc(0) };
+}
+
+export const StatusUpdate: MessageFns<StatusUpdate> = {
+  encode(message: StatusUpdate, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.stepUuid !== undefined && message.stepUuid !== "") {
+      writer.uint32(10).string(message.stepUuid);
+    }
+    if (message.time !== undefined && message.time !== 0) {
+      writer.uint32(16).int64(message.time);
+    }
+    if (message.type !== undefined && message.type !== 0) {
+      writer.uint32(24).int32(message.type);
+    }
+    if (message.data !== undefined && message.data.length !== 0) {
+      writer.uint32(34).bytes(message.data);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): StatusUpdate {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseStatusUpdate();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.stepUuid = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.time = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.type = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.data = Buffer.from(reader.bytes());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): StatusUpdate {
+    return {
+      stepUuid: isSet(object.stepUuid)
+        ? globalThis.String(object.stepUuid)
+        : isSet(object.step_uuid)
+        ? globalThis.String(object.step_uuid)
+        : "",
+      time: isSet(object.time) ? globalThis.Number(object.time) : 0,
+      type: isSet(object.type) ? globalThis.Number(object.type) : 0,
+      data: isSet(object.data) ? Buffer.from(bytesFromBase64(object.data)) : Buffer.alloc(0),
+    };
+  },
+
+  toJSON(message: StatusUpdate): unknown {
+    const obj: any = {};
+    if (message.stepUuid !== undefined && message.stepUuid !== "") {
+      obj.stepUuid = message.stepUuid;
+    }
+    if (message.time !== undefined && message.time !== 0) {
+      obj.time = Math.round(message.time);
+    }
+    if (message.type !== undefined && message.type !== 0) {
+      obj.type = Math.round(message.type);
+    }
+    if (message.data !== undefined && message.data.length !== 0) {
+      obj.data = base64FromBytes(message.data);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<StatusUpdate>, I>>(base?: I): StatusUpdate {
+    return StatusUpdate.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<StatusUpdate>, I>>(object: I): StatusUpdate {
+    const message = createBaseStatusUpdate();
+    message.stepUuid = object.stepUuid ?? "";
+    message.time = object.time ?? 0;
+    message.type = object.type ?? 0;
+    message.data = object.data ?? Buffer.alloc(0);
+    return message;
+  },
+};
+
+/** Woodpecker Server Service */
+export type WoodpeckerService = typeof WoodpeckerService;
+export const WoodpeckerService = {
+  version: {
+    path: "/proto.Woodpecker/Version",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    requestDeserialize: (value: Buffer): Empty => Empty.decode(value),
+    responseSerialize: (value: VersionResponse): Buffer => Buffer.from(VersionResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): VersionResponse => VersionResponse.decode(value),
+  },
+  next: {
+    path: "/proto.Woodpecker/Next",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: NextRequest): Buffer => Buffer.from(NextRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): NextRequest => NextRequest.decode(value),
+    responseSerialize: (value: NextResponse): Buffer => Buffer.from(NextResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): NextResponse => NextResponse.decode(value),
+  },
+  init: {
+    path: "/proto.Woodpecker/Init",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: InitRequest): Buffer => Buffer.from(InitRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): InitRequest => InitRequest.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+  wait: {
+    path: "/proto.Woodpecker/Wait",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: WaitRequest): Buffer => Buffer.from(WaitRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): WaitRequest => WaitRequest.decode(value),
+    responseSerialize: (value: WaitResponse): Buffer => Buffer.from(WaitResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): WaitResponse => WaitResponse.decode(value),
+  },
+  done: {
+    path: "/proto.Woodpecker/Done",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DoneRequest): Buffer => Buffer.from(DoneRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DoneRequest => DoneRequest.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+  extend: {
+    path: "/proto.Woodpecker/Extend",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ExtendRequest): Buffer => Buffer.from(ExtendRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ExtendRequest => ExtendRequest.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+  update: {
+    path: "/proto.Woodpecker/Update",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateRequest): Buffer => Buffer.from(UpdateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateRequest => UpdateRequest.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+  log: {
+    path: "/proto.Woodpecker/Log",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: LogRequest): Buffer => Buffer.from(LogRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): LogRequest => LogRequest.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+  registerAgent: {
+    path: "/proto.Woodpecker/RegisterAgent",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: RegisterAgentRequest): Buffer => Buffer.from(RegisterAgentRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): RegisterAgentRequest => RegisterAgentRequest.decode(value),
+    responseSerialize: (value: RegisterAgentResponse): Buffer =>
+      Buffer.from(RegisterAgentResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): RegisterAgentResponse => RegisterAgentResponse.decode(value),
+  },
+  unregisterAgent: {
+    path: "/proto.Woodpecker/UnregisterAgent",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    requestDeserialize: (value: Buffer): Empty => Empty.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+  reportHealth: {
+    path: "/proto.Woodpecker/ReportHealth",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ReportHealthRequest): Buffer => Buffer.from(ReportHealthRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ReportHealthRequest => ReportHealthRequest.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+  /** New Streaming RPCs */
+  streamJobs: {
+    path: "/proto.Woodpecker/StreamJobs",
+    requestStream: false,
+    responseStream: true,
+    requestSerialize: (value: StreamOptions): Buffer => Buffer.from(StreamOptions.encode(value).finish()),
+    requestDeserialize: (value: Buffer): StreamOptions => StreamOptions.decode(value),
+    responseSerialize: (value: Workflow): Buffer => Buffer.from(Workflow.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Workflow => Workflow.decode(value),
+  },
+  submitStatus: {
+    path: "/proto.Woodpecker/SubmitStatus",
+    requestStream: true,
+    responseStream: false,
+    requestSerialize: (value: StatusUpdate): Buffer => Buffer.from(StatusUpdate.encode(value).finish()),
+    requestDeserialize: (value: Buffer): StatusUpdate => StatusUpdate.decode(value),
+    responseSerialize: (value: Empty): Buffer => Buffer.from(Empty.encode(value).finish()),
+    responseDeserialize: (value: Buffer): Empty => Empty.decode(value),
+  },
+} as const;
+
+export interface WoodpeckerServer extends UntypedServiceImplementation {
+  version: handleUnaryCall<Empty, VersionResponse>;
+  next: handleUnaryCall<NextRequest, NextResponse>;
+  init: handleUnaryCall<InitRequest, Empty>;
+  wait: handleUnaryCall<WaitRequest, WaitResponse>;
+  done: handleUnaryCall<DoneRequest, Empty>;
+  extend: handleUnaryCall<ExtendRequest, Empty>;
+  update: handleUnaryCall<UpdateRequest, Empty>;
+  log: handleUnaryCall<LogRequest, Empty>;
+  registerAgent: handleUnaryCall<RegisterAgentRequest, RegisterAgentResponse>;
+  unregisterAgent: handleUnaryCall<Empty, Empty>;
+  reportHealth: handleUnaryCall<ReportHealthRequest, Empty>;
+  /** New Streaming RPCs */
+  streamJobs: handleServerStreamingCall<StreamOptions, Workflow>;
+  submitStatus: handleClientStreamingCall<StatusUpdate, Empty>;
+}
+
+export interface WoodpeckerClient extends Client {
+  version(request: Empty, callback: (error: ServiceError | null, response: VersionResponse) => void): ClientUnaryCall;
+  version(
+    request: Empty,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: VersionResponse) => void,
+  ): ClientUnaryCall;
+  version(
+    request: Empty,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: VersionResponse) => void,
+  ): ClientUnaryCall;
+  next(request: NextRequest, callback: (error: ServiceError | null, response: NextResponse) => void): ClientUnaryCall;
+  next(
+    request: NextRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: NextResponse) => void,
+  ): ClientUnaryCall;
+  next(
+    request: NextRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: NextResponse) => void,
+  ): ClientUnaryCall;
+  init(request: InitRequest, callback: (error: ServiceError | null, response: Empty) => void): ClientUnaryCall;
+  init(
+    request: InitRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  init(
+    request: InitRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  wait(request: WaitRequest, callback: (error: ServiceError | null, response: WaitResponse) => void): ClientUnaryCall;
+  wait(
+    request: WaitRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: WaitResponse) => void,
+  ): ClientUnaryCall;
+  wait(
+    request: WaitRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: WaitResponse) => void,
+  ): ClientUnaryCall;
+  done(request: DoneRequest, callback: (error: ServiceError | null, response: Empty) => void): ClientUnaryCall;
+  done(
+    request: DoneRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  done(
+    request: DoneRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  extend(request: ExtendRequest, callback: (error: ServiceError | null, response: Empty) => void): ClientUnaryCall;
+  extend(
+    request: ExtendRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  extend(
+    request: ExtendRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  update(request: UpdateRequest, callback: (error: ServiceError | null, response: Empty) => void): ClientUnaryCall;
+  update(
+    request: UpdateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  update(
+    request: UpdateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  log(request: LogRequest, callback: (error: ServiceError | null, response: Empty) => void): ClientUnaryCall;
+  log(
+    request: LogRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  log(
+    request: LogRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  registerAgent(
+    request: RegisterAgentRequest,
+    callback: (error: ServiceError | null, response: RegisterAgentResponse) => void,
+  ): ClientUnaryCall;
+  registerAgent(
+    request: RegisterAgentRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: RegisterAgentResponse) => void,
+  ): ClientUnaryCall;
+  registerAgent(
+    request: RegisterAgentRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: RegisterAgentResponse) => void,
+  ): ClientUnaryCall;
+  unregisterAgent(request: Empty, callback: (error: ServiceError | null, response: Empty) => void): ClientUnaryCall;
+  unregisterAgent(
+    request: Empty,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  unregisterAgent(
+    request: Empty,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  reportHealth(
+    request: ReportHealthRequest,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  reportHealth(
+    request: ReportHealthRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  reportHealth(
+    request: ReportHealthRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientUnaryCall;
+  /** New Streaming RPCs */
+  streamJobs(request: StreamOptions, options?: Partial<CallOptions>): ClientReadableStream<Workflow>;
+  streamJobs(
+    request: StreamOptions,
+    metadata?: Metadata,
+    options?: Partial<CallOptions>,
+  ): ClientReadableStream<Workflow>;
+  submitStatus(callback: (error: ServiceError | null, response: Empty) => void): ClientWritableStream<StatusUpdate>;
+  submitStatus(
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientWritableStream<StatusUpdate>;
+  submitStatus(
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientWritableStream<StatusUpdate>;
+  submitStatus(
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: Empty) => void,
+  ): ClientWritableStream<StatusUpdate>;
+}
+
+export const WoodpeckerClient = makeGenericClientConstructor(WoodpeckerService, "proto.Woodpecker") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): WoodpeckerClient;
+  service: typeof WoodpeckerService;
+  serviceName: string;
+};
+
+export type WoodpeckerAuthService = typeof WoodpeckerAuthService;
+export const WoodpeckerAuthService = {
+  auth: {
+    path: "/proto.WoodpeckerAuth/Auth",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: AuthRequest): Buffer => Buffer.from(AuthRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): AuthRequest => AuthRequest.decode(value),
+    responseSerialize: (value: AuthResponse): Buffer => Buffer.from(AuthResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): AuthResponse => AuthResponse.decode(value),
+  },
+} as const;
+
+export interface WoodpeckerAuthServer extends UntypedServiceImplementation {
+  auth: handleUnaryCall<AuthRequest, AuthResponse>;
+}
+
+export interface WoodpeckerAuthClient extends Client {
+  auth(request: AuthRequest, callback: (error: ServiceError | null, response: AuthResponse) => void): ClientUnaryCall;
+  auth(
+    request: AuthRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: AuthResponse) => void,
+  ): ClientUnaryCall;
+  auth(
+    request: AuthRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: AuthResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const WoodpeckerAuthClient = makeGenericClientConstructor(
+  WoodpeckerAuthService,
+  "proto.WoodpeckerAuth",
+) as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): WoodpeckerAuthClient;
+  service: typeof WoodpeckerAuthService;
+  serviceName: string;
+};
+
+function bytesFromBase64(b64: string): Uint8Array {
+  return Uint8Array.from(globalThis.Buffer.from(b64, "base64"));
+}
+
+function base64FromBytes(arr: Uint8Array): string {
+  return globalThis.Buffer.from(arr).toString("base64");
+}
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isObject(value: any): boolean {
+  return typeof value === "object" && value !== null;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/account.ts b/src/server/api/proto/app/v1/account.ts
new file mode 100644
index 0000000..d2a9c08
--- /dev/null
+++ b/src/server/api/proto/app/v1/account.ts
@@ -0,0 +1,1795 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/account.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientUnaryCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+import { StringValue } from "../../google/protobuf/wrappers";
+import { MessageResponse, Notification, Preferences, User } from "./common";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface GetMeRequest {
+}
+
+export interface GetMeResponse {
+  user?: User | undefined;
+}
+
+export interface UpdateMeRequest {
+  username?: string | undefined;
+  email?: string | undefined;
+  language?: string | undefined;
+  locale?: string | undefined;
+  telegramId?: string | undefined;
+}
+
+export interface UpdateMeResponse {
+  user?: User | undefined;
+}
+
+export interface DeleteMeRequest {
+}
+
+export interface ClearMyDataRequest {
+}
+
+export interface GetPreferencesRequest {
+}
+
+export interface GetPreferencesResponse {
+  preferences?: Preferences | undefined;
+}
+
+export interface UpdatePreferencesRequest {
+  emailNotifications?: boolean | undefined;
+  pushNotifications?: boolean | undefined;
+  marketingNotifications?: boolean | undefined;
+  telegramNotifications?: boolean | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  language?: string | undefined;
+  locale?: string | undefined;
+}
+
+export interface UpdatePreferencesResponse {
+  preferences?: Preferences | undefined;
+}
+
+export interface GetUsageRequest {
+}
+
+export interface GetUsageResponse {
+  userId?: string | undefined;
+  totalVideos?: number | undefined;
+  totalStorage?: number | undefined;
+}
+
+export interface ListNotificationsRequest {
+}
+
+export interface ListNotificationsResponse {
+  notifications?: Notification[] | undefined;
+}
+
+export interface MarkNotificationReadRequest {
+  id?: string | undefined;
+}
+
+export interface MarkAllNotificationsReadRequest {
+}
+
+export interface DeleteNotificationRequest {
+  id?: string | undefined;
+}
+
+export interface ClearNotificationsRequest {
+}
+
+function createBaseGetMeRequest(): GetMeRequest {
+  return {};
+}
+
+export const GetMeRequest: MessageFns<GetMeRequest> = {
+  encode(_: GetMeRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetMeRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetMeRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): GetMeRequest {
+    return {};
+  },
+
+  toJSON(_: GetMeRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetMeRequest>, I>>(base?: I): GetMeRequest {
+    return GetMeRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetMeRequest>, I>>(_: I): GetMeRequest {
+    const message = createBaseGetMeRequest();
+    return message;
+  },
+};
+
+function createBaseGetMeResponse(): GetMeResponse {
+  return { user: undefined };
+}
+
+export const GetMeResponse: MessageFns<GetMeResponse> = {
+  encode(message: GetMeResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      User.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetMeResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetMeResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = User.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetMeResponse {
+    return { user: isSet(object.user) ? User.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: GetMeResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = User.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetMeResponse>, I>>(base?: I): GetMeResponse {
+    return GetMeResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetMeResponse>, I>>(object: I): GetMeResponse {
+    const message = createBaseGetMeResponse();
+    message.user = (object.user !== undefined && object.user !== null) ? User.fromPartial(object.user) : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateMeRequest(): UpdateMeRequest {
+  return { username: undefined, email: undefined, language: undefined, locale: undefined, telegramId: undefined };
+}
+
+export const UpdateMeRequest: MessageFns<UpdateMeRequest> = {
+  encode(message: UpdateMeRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.username !== undefined) {
+      writer.uint32(10).string(message.username);
+    }
+    if (message.email !== undefined) {
+      writer.uint32(18).string(message.email);
+    }
+    if (message.language !== undefined) {
+      writer.uint32(26).string(message.language);
+    }
+    if (message.locale !== undefined) {
+      writer.uint32(34).string(message.locale);
+    }
+    if (message.telegramId !== undefined) {
+      writer.uint32(42).string(message.telegramId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateMeRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateMeRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.language = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.locale = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.telegramId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateMeRequest {
+    return {
+      username: isSet(object.username) ? globalThis.String(object.username) : undefined,
+      email: isSet(object.email) ? globalThis.String(object.email) : undefined,
+      language: isSet(object.language) ? globalThis.String(object.language) : undefined,
+      locale: isSet(object.locale) ? globalThis.String(object.locale) : undefined,
+      telegramId: isSet(object.telegramId)
+        ? globalThis.String(object.telegramId)
+        : isSet(object.telegram_id)
+        ? globalThis.String(object.telegram_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateMeRequest): unknown {
+    const obj: any = {};
+    if (message.username !== undefined) {
+      obj.username = message.username;
+    }
+    if (message.email !== undefined) {
+      obj.email = message.email;
+    }
+    if (message.language !== undefined) {
+      obj.language = message.language;
+    }
+    if (message.locale !== undefined) {
+      obj.locale = message.locale;
+    }
+    if (message.telegramId !== undefined) {
+      obj.telegramId = message.telegramId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateMeRequest>, I>>(base?: I): UpdateMeRequest {
+    return UpdateMeRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateMeRequest>, I>>(object: I): UpdateMeRequest {
+    const message = createBaseUpdateMeRequest();
+    message.username = object.username ?? undefined;
+    message.email = object.email ?? undefined;
+    message.language = object.language ?? undefined;
+    message.locale = object.locale ?? undefined;
+    message.telegramId = object.telegramId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateMeResponse(): UpdateMeResponse {
+  return { user: undefined };
+}
+
+export const UpdateMeResponse: MessageFns<UpdateMeResponse> = {
+  encode(message: UpdateMeResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      User.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateMeResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateMeResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = User.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateMeResponse {
+    return { user: isSet(object.user) ? User.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: UpdateMeResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = User.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateMeResponse>, I>>(base?: I): UpdateMeResponse {
+    return UpdateMeResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateMeResponse>, I>>(object: I): UpdateMeResponse {
+    const message = createBaseUpdateMeResponse();
+    message.user = (object.user !== undefined && object.user !== null) ? User.fromPartial(object.user) : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteMeRequest(): DeleteMeRequest {
+  return {};
+}
+
+export const DeleteMeRequest: MessageFns<DeleteMeRequest> = {
+  encode(_: DeleteMeRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteMeRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteMeRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): DeleteMeRequest {
+    return {};
+  },
+
+  toJSON(_: DeleteMeRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteMeRequest>, I>>(base?: I): DeleteMeRequest {
+    return DeleteMeRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteMeRequest>, I>>(_: I): DeleteMeRequest {
+    const message = createBaseDeleteMeRequest();
+    return message;
+  },
+};
+
+function createBaseClearMyDataRequest(): ClearMyDataRequest {
+  return {};
+}
+
+export const ClearMyDataRequest: MessageFns<ClearMyDataRequest> = {
+  encode(_: ClearMyDataRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ClearMyDataRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseClearMyDataRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ClearMyDataRequest {
+    return {};
+  },
+
+  toJSON(_: ClearMyDataRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ClearMyDataRequest>, I>>(base?: I): ClearMyDataRequest {
+    return ClearMyDataRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ClearMyDataRequest>, I>>(_: I): ClearMyDataRequest {
+    const message = createBaseClearMyDataRequest();
+    return message;
+  },
+};
+
+function createBaseGetPreferencesRequest(): GetPreferencesRequest {
+  return {};
+}
+
+export const GetPreferencesRequest: MessageFns<GetPreferencesRequest> = {
+  encode(_: GetPreferencesRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetPreferencesRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetPreferencesRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): GetPreferencesRequest {
+    return {};
+  },
+
+  toJSON(_: GetPreferencesRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetPreferencesRequest>, I>>(base?: I): GetPreferencesRequest {
+    return GetPreferencesRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetPreferencesRequest>, I>>(_: I): GetPreferencesRequest {
+    const message = createBaseGetPreferencesRequest();
+    return message;
+  },
+};
+
+function createBaseGetPreferencesResponse(): GetPreferencesResponse {
+  return { preferences: undefined };
+}
+
+export const GetPreferencesResponse: MessageFns<GetPreferencesResponse> = {
+  encode(message: GetPreferencesResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.preferences !== undefined) {
+      Preferences.encode(message.preferences, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetPreferencesResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetPreferencesResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.preferences = Preferences.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetPreferencesResponse {
+    return { preferences: isSet(object.preferences) ? Preferences.fromJSON(object.preferences) : undefined };
+  },
+
+  toJSON(message: GetPreferencesResponse): unknown {
+    const obj: any = {};
+    if (message.preferences !== undefined) {
+      obj.preferences = Preferences.toJSON(message.preferences);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetPreferencesResponse>, I>>(base?: I): GetPreferencesResponse {
+    return GetPreferencesResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetPreferencesResponse>, I>>(object: I): GetPreferencesResponse {
+    const message = createBaseGetPreferencesResponse();
+    message.preferences = (object.preferences !== undefined && object.preferences !== null)
+      ? Preferences.fromPartial(object.preferences)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdatePreferencesRequest(): UpdatePreferencesRequest {
+  return {
+    emailNotifications: undefined,
+    pushNotifications: undefined,
+    marketingNotifications: undefined,
+    telegramNotifications: undefined,
+    autoplay: undefined,
+    loop: undefined,
+    muted: undefined,
+    showControls: undefined,
+    pip: undefined,
+    airplay: undefined,
+    chromecast: undefined,
+    language: undefined,
+    locale: undefined,
+  };
+}
+
+export const UpdatePreferencesRequest: MessageFns<UpdatePreferencesRequest> = {
+  encode(message: UpdatePreferencesRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.emailNotifications !== undefined) {
+      writer.uint32(8).bool(message.emailNotifications);
+    }
+    if (message.pushNotifications !== undefined) {
+      writer.uint32(16).bool(message.pushNotifications);
+    }
+    if (message.marketingNotifications !== undefined) {
+      writer.uint32(24).bool(message.marketingNotifications);
+    }
+    if (message.telegramNotifications !== undefined) {
+      writer.uint32(32).bool(message.telegramNotifications);
+    }
+    if (message.autoplay !== undefined) {
+      writer.uint32(40).bool(message.autoplay);
+    }
+    if (message.loop !== undefined) {
+      writer.uint32(48).bool(message.loop);
+    }
+    if (message.muted !== undefined) {
+      writer.uint32(56).bool(message.muted);
+    }
+    if (message.showControls !== undefined) {
+      writer.uint32(64).bool(message.showControls);
+    }
+    if (message.pip !== undefined) {
+      writer.uint32(72).bool(message.pip);
+    }
+    if (message.airplay !== undefined) {
+      writer.uint32(80).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined) {
+      writer.uint32(88).bool(message.chromecast);
+    }
+    if (message.language !== undefined) {
+      writer.uint32(98).string(message.language);
+    }
+    if (message.locale !== undefined) {
+      writer.uint32(106).string(message.locale);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdatePreferencesRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdatePreferencesRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.emailNotifications = reader.bool();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.pushNotifications = reader.bool();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.marketingNotifications = reader.bool();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.telegramNotifications = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.language = reader.string();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.locale = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdatePreferencesRequest {
+    return {
+      emailNotifications: isSet(object.emailNotifications)
+        ? globalThis.Boolean(object.emailNotifications)
+        : isSet(object.email_notifications)
+        ? globalThis.Boolean(object.email_notifications)
+        : undefined,
+      pushNotifications: isSet(object.pushNotifications)
+        ? globalThis.Boolean(object.pushNotifications)
+        : isSet(object.push_notifications)
+        ? globalThis.Boolean(object.push_notifications)
+        : undefined,
+      marketingNotifications: isSet(object.marketingNotifications)
+        ? globalThis.Boolean(object.marketingNotifications)
+        : isSet(object.marketing_notifications)
+        ? globalThis.Boolean(object.marketing_notifications)
+        : undefined,
+      telegramNotifications: isSet(object.telegramNotifications)
+        ? globalThis.Boolean(object.telegramNotifications)
+        : isSet(object.telegram_notifications)
+        ? globalThis.Boolean(object.telegram_notifications)
+        : undefined,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : undefined,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : undefined,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : undefined,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : undefined,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : undefined,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : undefined,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : undefined,
+      language: isSet(object.language) ? globalThis.String(object.language) : undefined,
+      locale: isSet(object.locale) ? globalThis.String(object.locale) : undefined,
+    };
+  },
+
+  toJSON(message: UpdatePreferencesRequest): unknown {
+    const obj: any = {};
+    if (message.emailNotifications !== undefined) {
+      obj.emailNotifications = message.emailNotifications;
+    }
+    if (message.pushNotifications !== undefined) {
+      obj.pushNotifications = message.pushNotifications;
+    }
+    if (message.marketingNotifications !== undefined) {
+      obj.marketingNotifications = message.marketingNotifications;
+    }
+    if (message.telegramNotifications !== undefined) {
+      obj.telegramNotifications = message.telegramNotifications;
+    }
+    if (message.autoplay !== undefined) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.language !== undefined) {
+      obj.language = message.language;
+    }
+    if (message.locale !== undefined) {
+      obj.locale = message.locale;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdatePreferencesRequest>, I>>(base?: I): UpdatePreferencesRequest {
+    return UpdatePreferencesRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdatePreferencesRequest>, I>>(object: I): UpdatePreferencesRequest {
+    const message = createBaseUpdatePreferencesRequest();
+    message.emailNotifications = object.emailNotifications ?? undefined;
+    message.pushNotifications = object.pushNotifications ?? undefined;
+    message.marketingNotifications = object.marketingNotifications ?? undefined;
+    message.telegramNotifications = object.telegramNotifications ?? undefined;
+    message.autoplay = object.autoplay ?? undefined;
+    message.loop = object.loop ?? undefined;
+    message.muted = object.muted ?? undefined;
+    message.showControls = object.showControls ?? undefined;
+    message.pip = object.pip ?? undefined;
+    message.airplay = object.airplay ?? undefined;
+    message.chromecast = object.chromecast ?? undefined;
+    message.language = object.language ?? undefined;
+    message.locale = object.locale ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdatePreferencesResponse(): UpdatePreferencesResponse {
+  return { preferences: undefined };
+}
+
+export const UpdatePreferencesResponse: MessageFns<UpdatePreferencesResponse> = {
+  encode(message: UpdatePreferencesResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.preferences !== undefined) {
+      Preferences.encode(message.preferences, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdatePreferencesResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdatePreferencesResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.preferences = Preferences.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdatePreferencesResponse {
+    return { preferences: isSet(object.preferences) ? Preferences.fromJSON(object.preferences) : undefined };
+  },
+
+  toJSON(message: UpdatePreferencesResponse): unknown {
+    const obj: any = {};
+    if (message.preferences !== undefined) {
+      obj.preferences = Preferences.toJSON(message.preferences);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdatePreferencesResponse>, I>>(base?: I): UpdatePreferencesResponse {
+    return UpdatePreferencesResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdatePreferencesResponse>, I>>(object: I): UpdatePreferencesResponse {
+    const message = createBaseUpdatePreferencesResponse();
+    message.preferences = (object.preferences !== undefined && object.preferences !== null)
+      ? Preferences.fromPartial(object.preferences)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseGetUsageRequest(): GetUsageRequest {
+  return {};
+}
+
+export const GetUsageRequest: MessageFns<GetUsageRequest> = {
+  encode(_: GetUsageRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetUsageRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetUsageRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): GetUsageRequest {
+    return {};
+  },
+
+  toJSON(_: GetUsageRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetUsageRequest>, I>>(base?: I): GetUsageRequest {
+    return GetUsageRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetUsageRequest>, I>>(_: I): GetUsageRequest {
+    const message = createBaseGetUsageRequest();
+    return message;
+  },
+};
+
+function createBaseGetUsageResponse(): GetUsageResponse {
+  return { userId: "", totalVideos: 0, totalStorage: 0 };
+}
+
+export const GetUsageResponse: MessageFns<GetUsageResponse> = {
+  encode(message: GetUsageResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(10).string(message.userId);
+    }
+    if (message.totalVideos !== undefined && message.totalVideos !== 0) {
+      writer.uint32(16).int64(message.totalVideos);
+    }
+    if (message.totalStorage !== undefined && message.totalStorage !== 0) {
+      writer.uint32(24).int64(message.totalStorage);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetUsageResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetUsageResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.totalVideos = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.totalStorage = longToNumber(reader.int64());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetUsageResponse {
+    return {
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      totalVideos: isSet(object.totalVideos)
+        ? globalThis.Number(object.totalVideos)
+        : isSet(object.total_videos)
+        ? globalThis.Number(object.total_videos)
+        : 0,
+      totalStorage: isSet(object.totalStorage)
+        ? globalThis.Number(object.totalStorage)
+        : isSet(object.total_storage)
+        ? globalThis.Number(object.total_storage)
+        : 0,
+    };
+  },
+
+  toJSON(message: GetUsageResponse): unknown {
+    const obj: any = {};
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.totalVideos !== undefined && message.totalVideos !== 0) {
+      obj.totalVideos = Math.round(message.totalVideos);
+    }
+    if (message.totalStorage !== undefined && message.totalStorage !== 0) {
+      obj.totalStorage = Math.round(message.totalStorage);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetUsageResponse>, I>>(base?: I): GetUsageResponse {
+    return GetUsageResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetUsageResponse>, I>>(object: I): GetUsageResponse {
+    const message = createBaseGetUsageResponse();
+    message.userId = object.userId ?? "";
+    message.totalVideos = object.totalVideos ?? 0;
+    message.totalStorage = object.totalStorage ?? 0;
+    return message;
+  },
+};
+
+function createBaseListNotificationsRequest(): ListNotificationsRequest {
+  return {};
+}
+
+export const ListNotificationsRequest: MessageFns<ListNotificationsRequest> = {
+  encode(_: ListNotificationsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListNotificationsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListNotificationsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ListNotificationsRequest {
+    return {};
+  },
+
+  toJSON(_: ListNotificationsRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListNotificationsRequest>, I>>(base?: I): ListNotificationsRequest {
+    return ListNotificationsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListNotificationsRequest>, I>>(_: I): ListNotificationsRequest {
+    const message = createBaseListNotificationsRequest();
+    return message;
+  },
+};
+
+function createBaseListNotificationsResponse(): ListNotificationsResponse {
+  return { notifications: [] };
+}
+
+export const ListNotificationsResponse: MessageFns<ListNotificationsResponse> = {
+  encode(message: ListNotificationsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.notifications !== undefined && message.notifications.length !== 0) {
+      for (const v of message.notifications) {
+        Notification.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListNotificationsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListNotificationsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = Notification.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.notifications!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListNotificationsResponse {
+    return {
+      notifications: globalThis.Array.isArray(object?.notifications)
+        ? object.notifications.map((e: any) => Notification.fromJSON(e))
+        : [],
+    };
+  },
+
+  toJSON(message: ListNotificationsResponse): unknown {
+    const obj: any = {};
+    if (message.notifications?.length) {
+      obj.notifications = message.notifications.map((e) => Notification.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListNotificationsResponse>, I>>(base?: I): ListNotificationsResponse {
+    return ListNotificationsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListNotificationsResponse>, I>>(object: I): ListNotificationsResponse {
+    const message = createBaseListNotificationsResponse();
+    message.notifications = object.notifications?.map((e) => Notification.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseMarkNotificationReadRequest(): MarkNotificationReadRequest {
+  return { id: "" };
+}
+
+export const MarkNotificationReadRequest: MessageFns<MarkNotificationReadRequest> = {
+  encode(message: MarkNotificationReadRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): MarkNotificationReadRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseMarkNotificationReadRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): MarkNotificationReadRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: MarkNotificationReadRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<MarkNotificationReadRequest>, I>>(base?: I): MarkNotificationReadRequest {
+    return MarkNotificationReadRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<MarkNotificationReadRequest>, I>>(object: I): MarkNotificationReadRequest {
+    const message = createBaseMarkNotificationReadRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseMarkAllNotificationsReadRequest(): MarkAllNotificationsReadRequest {
+  return {};
+}
+
+export const MarkAllNotificationsReadRequest: MessageFns<MarkAllNotificationsReadRequest> = {
+  encode(_: MarkAllNotificationsReadRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): MarkAllNotificationsReadRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseMarkAllNotificationsReadRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): MarkAllNotificationsReadRequest {
+    return {};
+  },
+
+  toJSON(_: MarkAllNotificationsReadRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<MarkAllNotificationsReadRequest>, I>>(base?: I): MarkAllNotificationsReadRequest {
+    return MarkAllNotificationsReadRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<MarkAllNotificationsReadRequest>, I>>(_: I): MarkAllNotificationsReadRequest {
+    const message = createBaseMarkAllNotificationsReadRequest();
+    return message;
+  },
+};
+
+function createBaseDeleteNotificationRequest(): DeleteNotificationRequest {
+  return { id: "" };
+}
+
+export const DeleteNotificationRequest: MessageFns<DeleteNotificationRequest> = {
+  encode(message: DeleteNotificationRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteNotificationRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteNotificationRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteNotificationRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteNotificationRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteNotificationRequest>, I>>(base?: I): DeleteNotificationRequest {
+    return DeleteNotificationRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteNotificationRequest>, I>>(object: I): DeleteNotificationRequest {
+    const message = createBaseDeleteNotificationRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseClearNotificationsRequest(): ClearNotificationsRequest {
+  return {};
+}
+
+export const ClearNotificationsRequest: MessageFns<ClearNotificationsRequest> = {
+  encode(_: ClearNotificationsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ClearNotificationsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseClearNotificationsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ClearNotificationsRequest {
+    return {};
+  },
+
+  toJSON(_: ClearNotificationsRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ClearNotificationsRequest>, I>>(base?: I): ClearNotificationsRequest {
+    return ClearNotificationsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ClearNotificationsRequest>, I>>(_: I): ClearNotificationsRequest {
+    const message = createBaseClearNotificationsRequest();
+    return message;
+  },
+};
+
+export type AccountService = typeof AccountService;
+export const AccountService = {
+  getMe: {
+    path: "/stream.app.v1.Account/GetMe",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetMeRequest): Buffer => Buffer.from(GetMeRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetMeRequest => GetMeRequest.decode(value),
+    responseSerialize: (value: GetMeResponse): Buffer => Buffer.from(GetMeResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetMeResponse => GetMeResponse.decode(value),
+  },
+  updateMe: {
+    path: "/stream.app.v1.Account/UpdateMe",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateMeRequest): Buffer => Buffer.from(UpdateMeRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateMeRequest => UpdateMeRequest.decode(value),
+    responseSerialize: (value: UpdateMeResponse): Buffer => Buffer.from(UpdateMeResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateMeResponse => UpdateMeResponse.decode(value),
+  },
+  deleteMe: {
+    path: "/stream.app.v1.Account/DeleteMe",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteMeRequest): Buffer => Buffer.from(DeleteMeRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteMeRequest => DeleteMeRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  clearMyData: {
+    path: "/stream.app.v1.Account/ClearMyData",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ClearMyDataRequest): Buffer => Buffer.from(ClearMyDataRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ClearMyDataRequest => ClearMyDataRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  getUserById: {
+    path: "/stream.app.v1.Account/GetUserById",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: string | undefined): Buffer =>
+      Buffer.from(StringValue.encode({ value: value ?? "" }).finish()),
+    requestDeserialize: (value: Buffer): string | undefined => StringValue.decode(value).value,
+    responseSerialize: (value: User): Buffer => Buffer.from(User.encode(value).finish()),
+    responseDeserialize: (value: Buffer): User => User.decode(value),
+  },
+  getPreferences: {
+    path: "/stream.app.v1.Account/GetPreferences",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetPreferencesRequest): Buffer =>
+      Buffer.from(GetPreferencesRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetPreferencesRequest => GetPreferencesRequest.decode(value),
+    responseSerialize: (value: GetPreferencesResponse): Buffer =>
+      Buffer.from(GetPreferencesResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetPreferencesResponse => GetPreferencesResponse.decode(value),
+  },
+  updatePreferences: {
+    path: "/stream.app.v1.Account/UpdatePreferences",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdatePreferencesRequest): Buffer =>
+      Buffer.from(UpdatePreferencesRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdatePreferencesRequest => UpdatePreferencesRequest.decode(value),
+    responseSerialize: (value: UpdatePreferencesResponse): Buffer =>
+      Buffer.from(UpdatePreferencesResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdatePreferencesResponse => UpdatePreferencesResponse.decode(value),
+  },
+  getUsage: {
+    path: "/stream.app.v1.Account/GetUsage",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetUsageRequest): Buffer => Buffer.from(GetUsageRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetUsageRequest => GetUsageRequest.decode(value),
+    responseSerialize: (value: GetUsageResponse): Buffer => Buffer.from(GetUsageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetUsageResponse => GetUsageResponse.decode(value),
+  },
+} as const;
+
+export interface AccountServer extends UntypedServiceImplementation {
+  getMe: handleUnaryCall<GetMeRequest, GetMeResponse>;
+  updateMe: handleUnaryCall<UpdateMeRequest, UpdateMeResponse>;
+  deleteMe: handleUnaryCall<DeleteMeRequest, MessageResponse>;
+  clearMyData: handleUnaryCall<ClearMyDataRequest, MessageResponse>;
+  getUserById: handleUnaryCall<string | undefined, User>;
+  getPreferences: handleUnaryCall<GetPreferencesRequest, GetPreferencesResponse>;
+  updatePreferences: handleUnaryCall<UpdatePreferencesRequest, UpdatePreferencesResponse>;
+  getUsage: handleUnaryCall<GetUsageRequest, GetUsageResponse>;
+}
+
+export interface AccountClient extends Client {
+  getMe(
+    request: GetMeRequest,
+    callback: (error: ServiceError | null, response: GetMeResponse) => void,
+  ): ClientUnaryCall;
+  getMe(
+    request: GetMeRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetMeResponse) => void,
+  ): ClientUnaryCall;
+  getMe(
+    request: GetMeRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetMeResponse) => void,
+  ): ClientUnaryCall;
+  updateMe(
+    request: UpdateMeRequest,
+    callback: (error: ServiceError | null, response: UpdateMeResponse) => void,
+  ): ClientUnaryCall;
+  updateMe(
+    request: UpdateMeRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateMeResponse) => void,
+  ): ClientUnaryCall;
+  updateMe(
+    request: UpdateMeRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateMeResponse) => void,
+  ): ClientUnaryCall;
+  deleteMe(
+    request: DeleteMeRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteMe(
+    request: DeleteMeRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteMe(
+    request: DeleteMeRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  clearMyData(
+    request: ClearMyDataRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  clearMyData(
+    request: ClearMyDataRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  clearMyData(
+    request: ClearMyDataRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  getUserById(
+    request: string | undefined,
+    callback: (error: ServiceError | null, response: User) => void,
+  ): ClientUnaryCall;
+  getUserById(
+    request: string | undefined,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: User) => void,
+  ): ClientUnaryCall;
+  getUserById(
+    request: string | undefined,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: User) => void,
+  ): ClientUnaryCall;
+  getPreferences(
+    request: GetPreferencesRequest,
+    callback: (error: ServiceError | null, response: GetPreferencesResponse) => void,
+  ): ClientUnaryCall;
+  getPreferences(
+    request: GetPreferencesRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetPreferencesResponse) => void,
+  ): ClientUnaryCall;
+  getPreferences(
+    request: GetPreferencesRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetPreferencesResponse) => void,
+  ): ClientUnaryCall;
+  updatePreferences(
+    request: UpdatePreferencesRequest,
+    callback: (error: ServiceError | null, response: UpdatePreferencesResponse) => void,
+  ): ClientUnaryCall;
+  updatePreferences(
+    request: UpdatePreferencesRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdatePreferencesResponse) => void,
+  ): ClientUnaryCall;
+  updatePreferences(
+    request: UpdatePreferencesRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdatePreferencesResponse) => void,
+  ): ClientUnaryCall;
+  getUsage(
+    request: GetUsageRequest,
+    callback: (error: ServiceError | null, response: GetUsageResponse) => void,
+  ): ClientUnaryCall;
+  getUsage(
+    request: GetUsageRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetUsageResponse) => void,
+  ): ClientUnaryCall;
+  getUsage(
+    request: GetUsageRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetUsageResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const AccountClient = makeGenericClientConstructor(AccountService, "stream.app.v1.Account") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): AccountClient;
+  service: typeof AccountService;
+  serviceName: string;
+};
+
+export type NotificationsService = typeof NotificationsService;
+export const NotificationsService = {
+  listNotifications: {
+    path: "/stream.app.v1.Notifications/ListNotifications",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListNotificationsRequest): Buffer =>
+      Buffer.from(ListNotificationsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListNotificationsRequest => ListNotificationsRequest.decode(value),
+    responseSerialize: (value: ListNotificationsResponse): Buffer =>
+      Buffer.from(ListNotificationsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListNotificationsResponse => ListNotificationsResponse.decode(value),
+  },
+  markNotificationRead: {
+    path: "/stream.app.v1.Notifications/MarkNotificationRead",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: MarkNotificationReadRequest): Buffer =>
+      Buffer.from(MarkNotificationReadRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): MarkNotificationReadRequest => MarkNotificationReadRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  markAllNotificationsRead: {
+    path: "/stream.app.v1.Notifications/MarkAllNotificationsRead",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: MarkAllNotificationsReadRequest): Buffer =>
+      Buffer.from(MarkAllNotificationsReadRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): MarkAllNotificationsReadRequest =>
+      MarkAllNotificationsReadRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  deleteNotification: {
+    path: "/stream.app.v1.Notifications/DeleteNotification",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteNotificationRequest): Buffer =>
+      Buffer.from(DeleteNotificationRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteNotificationRequest => DeleteNotificationRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  clearNotifications: {
+    path: "/stream.app.v1.Notifications/ClearNotifications",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ClearNotificationsRequest): Buffer =>
+      Buffer.from(ClearNotificationsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ClearNotificationsRequest => ClearNotificationsRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+} as const;
+
+export interface NotificationsServer extends UntypedServiceImplementation {
+  listNotifications: handleUnaryCall<ListNotificationsRequest, ListNotificationsResponse>;
+  markNotificationRead: handleUnaryCall<MarkNotificationReadRequest, MessageResponse>;
+  markAllNotificationsRead: handleUnaryCall<MarkAllNotificationsReadRequest, MessageResponse>;
+  deleteNotification: handleUnaryCall<DeleteNotificationRequest, MessageResponse>;
+  clearNotifications: handleUnaryCall<ClearNotificationsRequest, MessageResponse>;
+}
+
+export interface NotificationsClient extends Client {
+  listNotifications(
+    request: ListNotificationsRequest,
+    callback: (error: ServiceError | null, response: ListNotificationsResponse) => void,
+  ): ClientUnaryCall;
+  listNotifications(
+    request: ListNotificationsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListNotificationsResponse) => void,
+  ): ClientUnaryCall;
+  listNotifications(
+    request: ListNotificationsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListNotificationsResponse) => void,
+  ): ClientUnaryCall;
+  markNotificationRead(
+    request: MarkNotificationReadRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  markNotificationRead(
+    request: MarkNotificationReadRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  markNotificationRead(
+    request: MarkNotificationReadRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  markAllNotificationsRead(
+    request: MarkAllNotificationsReadRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  markAllNotificationsRead(
+    request: MarkAllNotificationsReadRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  markAllNotificationsRead(
+    request: MarkAllNotificationsReadRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteNotification(
+    request: DeleteNotificationRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteNotification(
+    request: DeleteNotificationRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteNotification(
+    request: DeleteNotificationRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  clearNotifications(
+    request: ClearNotificationsRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  clearNotifications(
+    request: ClearNotificationsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  clearNotifications(
+    request: ClearNotificationsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const NotificationsClient = makeGenericClientConstructor(
+  NotificationsService,
+  "stream.app.v1.Notifications",
+) as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): NotificationsClient;
+  service: typeof NotificationsService;
+  serviceName: string;
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/admin.ts b/src/server/api/proto/app/v1/admin.ts
new file mode 100644
index 0000000..2735cc1
--- /dev/null
+++ b/src/server/api/proto/app/v1/admin.ts
@@ -0,0 +1,10660 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/admin.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientUnaryCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+import {
+  AdminAdTemplate,
+  AdminAgent,
+  AdminDashboard,
+  AdminDlqEntry,
+  AdminJob,
+  AdminPayment,
+  AdminPlan,
+  AdminPlayerConfig,
+  AdminPopupAd,
+  AdminUser,
+  AdminUserDetail,
+  AdminVideo,
+  MessageResponse,
+  PlanSubscription,
+} from "./common";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface GetAdminDashboardRequest {
+}
+
+export interface GetAdminDashboardResponse {
+  dashboard?: AdminDashboard | undefined;
+}
+
+export interface ListAdminUsersRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+  search?: string | undefined;
+  role?: string | undefined;
+}
+
+export interface ListAdminUsersResponse {
+  users?: AdminUser[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetAdminUserRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminUserResponse {
+  user?: AdminUserDetail | undefined;
+}
+
+export interface CreateAdminUserRequest {
+  email?: string | undefined;
+  username?: string | undefined;
+  password?: string | undefined;
+  role?: string | undefined;
+  planId?: string | undefined;
+}
+
+export interface CreateAdminUserResponse {
+  user?: AdminUser | undefined;
+}
+
+export interface UpdateAdminUserRequest {
+  id?: string | undefined;
+  email?: string | undefined;
+  username?: string | undefined;
+  password?: string | undefined;
+  role?: string | undefined;
+  planId?: string | undefined;
+}
+
+export interface UpdateAdminUserResponse {
+  user?: AdminUser | undefined;
+}
+
+export interface UpdateAdminUserReferralSettingsRequest {
+  id?: string | undefined;
+  refUsername?: string | undefined;
+  clearReferrer?: boolean | undefined;
+  referralEligible?: boolean | undefined;
+  referralRewardBps?: number | undefined;
+  clearReferralRewardBps?: boolean | undefined;
+}
+
+export interface UpdateAdminUserReferralSettingsResponse {
+  user?: AdminUserDetail | undefined;
+}
+
+export interface UpdateAdminUserRoleRequest {
+  id?: string | undefined;
+  role?: string | undefined;
+}
+
+export interface UpdateAdminUserRoleResponse {
+  message?: string | undefined;
+  role?: string | undefined;
+}
+
+export interface DeleteAdminUserRequest {
+  id?: string | undefined;
+}
+
+export interface ListAdminVideosRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+  search?: string | undefined;
+  userId?: string | undefined;
+  status?: string | undefined;
+}
+
+export interface ListAdminVideosResponse {
+  videos?: AdminVideo[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetAdminVideoRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminVideoResponse {
+  video?: AdminVideo | undefined;
+}
+
+export interface CreateAdminVideoRequest {
+  userId?: string | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+  url?: string | undefined;
+  size?: number | undefined;
+  duration?: number | undefined;
+  format?: string | undefined;
+  status?: string | undefined;
+  adTemplateId?: string | undefined;
+}
+
+export interface CreateAdminVideoResponse {
+  video?: AdminVideo | undefined;
+}
+
+export interface UpdateAdminVideoRequest {
+  id?: string | undefined;
+  userId?: string | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+  url?: string | undefined;
+  size?: number | undefined;
+  duration?: number | undefined;
+  format?: string | undefined;
+  status?: string | undefined;
+  adTemplateId?: string | undefined;
+}
+
+export interface UpdateAdminVideoResponse {
+  video?: AdminVideo | undefined;
+}
+
+export interface DeleteAdminVideoRequest {
+  id?: string | undefined;
+}
+
+export interface ListAdminPaymentsRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+  userId?: string | undefined;
+  status?: string | undefined;
+}
+
+export interface ListAdminPaymentsResponse {
+  payments?: AdminPayment[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetAdminPaymentRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminPaymentResponse {
+  payment?: AdminPayment | undefined;
+}
+
+export interface CreateAdminPaymentRequest {
+  userId?: string | undefined;
+  planId?: string | undefined;
+  termMonths?: number | undefined;
+  paymentMethod?: string | undefined;
+  topupAmount?: number | undefined;
+}
+
+export interface CreateAdminPaymentResponse {
+  payment?: AdminPayment | undefined;
+  subscription?: PlanSubscription | undefined;
+  walletBalance?: number | undefined;
+  invoiceId?: string | undefined;
+}
+
+export interface UpdateAdminPaymentRequest {
+  id?: string | undefined;
+  status?: string | undefined;
+}
+
+export interface UpdateAdminPaymentResponse {
+  payment?: AdminPayment | undefined;
+}
+
+export interface ListAdminPlansRequest {
+}
+
+export interface ListAdminPlansResponse {
+  plans?: AdminPlan[] | undefined;
+}
+
+export interface CreateAdminPlanRequest {
+  name?: string | undefined;
+  description?: string | undefined;
+  features?: string[] | undefined;
+  price?: number | undefined;
+  cycle?: string | undefined;
+  storageLimit?: number | undefined;
+  uploadLimit?: number | undefined;
+  isActive?: boolean | undefined;
+}
+
+export interface CreateAdminPlanResponse {
+  plan?: AdminPlan | undefined;
+}
+
+export interface UpdateAdminPlanRequest {
+  id?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  features?: string[] | undefined;
+  price?: number | undefined;
+  cycle?: string | undefined;
+  storageLimit?: number | undefined;
+  uploadLimit?: number | undefined;
+  isActive?: boolean | undefined;
+}
+
+export interface UpdateAdminPlanResponse {
+  plan?: AdminPlan | undefined;
+}
+
+export interface DeleteAdminPlanRequest {
+  id?: string | undefined;
+}
+
+export interface DeleteAdminPlanResponse {
+  message?: string | undefined;
+  mode?: string | undefined;
+}
+
+export interface ListAdminAdTemplatesRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+  userId?: string | undefined;
+  search?: string | undefined;
+}
+
+export interface ListAdminAdTemplatesResponse {
+  templates?: AdminAdTemplate[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetAdminAdTemplateRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminAdTemplateResponse {
+  template?: AdminAdTemplate | undefined;
+}
+
+export interface CreateAdminAdTemplateRequest {
+  userId?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  vastTagUrl?: string | undefined;
+  adFormat?: string | undefined;
+  duration?: number | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+}
+
+export interface CreateAdminAdTemplateResponse {
+  template?: AdminAdTemplate | undefined;
+}
+
+export interface UpdateAdminAdTemplateRequest {
+  id?: string | undefined;
+  userId?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  vastTagUrl?: string | undefined;
+  adFormat?: string | undefined;
+  duration?: number | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+}
+
+export interface UpdateAdminAdTemplateResponse {
+  template?: AdminAdTemplate | undefined;
+}
+
+export interface DeleteAdminAdTemplateRequest {
+  id?: string | undefined;
+}
+
+export interface ListAdminPopupAdsRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+  userId?: string | undefined;
+  search?: string | undefined;
+}
+
+export interface ListAdminPopupAdsResponse {
+  items?: AdminPopupAd[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetAdminPopupAdRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminPopupAdResponse {
+  item?: AdminPopupAd | undefined;
+}
+
+export interface CreateAdminPopupAdRequest {
+  userId?: string | undefined;
+  type?: string | undefined;
+  label?: string | undefined;
+  value?: string | undefined;
+  isActive?: boolean | undefined;
+  maxTriggersPerSession?: number | undefined;
+}
+
+export interface CreateAdminPopupAdResponse {
+  item?: AdminPopupAd | undefined;
+}
+
+export interface UpdateAdminPopupAdRequest {
+  id?: string | undefined;
+  userId?: string | undefined;
+  type?: string | undefined;
+  label?: string | undefined;
+  value?: string | undefined;
+  isActive?: boolean | undefined;
+  maxTriggersPerSession?: number | undefined;
+}
+
+export interface UpdateAdminPopupAdResponse {
+  item?: AdminPopupAd | undefined;
+}
+
+export interface DeleteAdminPopupAdRequest {
+  id?: string | undefined;
+}
+
+export interface ListAdminPlayerConfigsRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+  userId?: string | undefined;
+  search?: string | undefined;
+}
+
+export interface ListAdminPlayerConfigsResponse {
+  configs?: AdminPlayerConfig[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetAdminPlayerConfigRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminPlayerConfigResponse {
+  config?: AdminPlayerConfig | undefined;
+}
+
+export interface CreateAdminPlayerConfigRequest {
+  userId?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  encrytionM3u8?: boolean | undefined;
+  logoUrl?: string | undefined;
+}
+
+export interface CreateAdminPlayerConfigResponse {
+  config?: AdminPlayerConfig | undefined;
+}
+
+export interface UpdateAdminPlayerConfigRequest {
+  id?: string | undefined;
+  userId?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  encrytionM3u8?: boolean | undefined;
+  logoUrl?: string | undefined;
+}
+
+export interface UpdateAdminPlayerConfigResponse {
+  config?: AdminPlayerConfig | undefined;
+}
+
+export interface DeleteAdminPlayerConfigRequest {
+  id?: string | undefined;
+}
+
+export interface ListAdminJobsRequest {
+  cursor?: string | undefined;
+  pageSize?:
+    | number
+    | undefined;
+  /** Deprecated: use cursor for keyset pagination. */
+  offset?:
+    | number
+    | undefined;
+  /** Deprecated: use page_size for keyset pagination. */
+  limit?: number | undefined;
+  agentId?: string | undefined;
+}
+
+export interface ListAdminJobsResponse {
+  jobs?: AdminJob[] | undefined;
+  total?: number | undefined;
+  offset?: number | undefined;
+  limit?: number | undefined;
+  hasMore?: boolean | undefined;
+  nextCursor?: string | undefined;
+  pageSize?: number | undefined;
+}
+
+export interface GetAdminJobRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminJobResponse {
+  job?: AdminJob | undefined;
+}
+
+export interface GetAdminJobLogsRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminJobLogsResponse {
+  logs?: string | undefined;
+}
+
+export interface CreateAdminJobRequest {
+  command?: string | undefined;
+  image?: string | undefined;
+  env?: { [key: string]: string } | undefined;
+  priority?: number | undefined;
+  userId?: string | undefined;
+  name?: string | undefined;
+  timeLimit?: number | undefined;
+  videoId?: string | undefined;
+}
+
+export interface CreateAdminJobRequest_EnvEntry {
+  key: string;
+  value: string;
+}
+
+export interface CreateAdminJobResponse {
+  job?: AdminJob | undefined;
+}
+
+export interface CancelAdminJobRequest {
+  id?: string | undefined;
+}
+
+export interface CancelAdminJobResponse {
+  status?: string | undefined;
+  jobId?: string | undefined;
+}
+
+export interface RetryAdminJobRequest {
+  id?: string | undefined;
+}
+
+export interface RetryAdminJobResponse {
+  job?: AdminJob | undefined;
+}
+
+export interface ListAdminDlqJobsRequest {
+  offset?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface ListAdminDlqJobsResponse {
+  items?: AdminDlqEntry[] | undefined;
+  total?: number | undefined;
+  offset?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetAdminDlqJobRequest {
+  id?: string | undefined;
+}
+
+export interface GetAdminDlqJobResponse {
+  item?: AdminDlqEntry | undefined;
+}
+
+export interface RetryAdminDlqJobRequest {
+  id?: string | undefined;
+}
+
+export interface RetryAdminDlqJobResponse {
+  job?: AdminJob | undefined;
+}
+
+export interface RemoveAdminDlqJobRequest {
+  id?: string | undefined;
+}
+
+export interface RemoveAdminDlqJobResponse {
+  status?: string | undefined;
+  jobId?: string | undefined;
+}
+
+export interface ListAdminAgentsRequest {
+}
+
+export interface ListAdminAgentsResponse {
+  agents?: AdminAgent[] | undefined;
+}
+
+export interface RestartAdminAgentRequest {
+  id?: string | undefined;
+}
+
+export interface UpdateAdminAgentRequest {
+  id?: string | undefined;
+}
+
+export interface AdminAgentCommandResponse {
+  status?: string | undefined;
+}
+
+function createBaseGetAdminDashboardRequest(): GetAdminDashboardRequest {
+  return {};
+}
+
+export const GetAdminDashboardRequest: MessageFns<GetAdminDashboardRequest> = {
+  encode(_: GetAdminDashboardRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminDashboardRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminDashboardRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): GetAdminDashboardRequest {
+    return {};
+  },
+
+  toJSON(_: GetAdminDashboardRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminDashboardRequest>, I>>(base?: I): GetAdminDashboardRequest {
+    return GetAdminDashboardRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminDashboardRequest>, I>>(_: I): GetAdminDashboardRequest {
+    const message = createBaseGetAdminDashboardRequest();
+    return message;
+  },
+};
+
+function createBaseGetAdminDashboardResponse(): GetAdminDashboardResponse {
+  return { dashboard: undefined };
+}
+
+export const GetAdminDashboardResponse: MessageFns<GetAdminDashboardResponse> = {
+  encode(message: GetAdminDashboardResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.dashboard !== undefined) {
+      AdminDashboard.encode(message.dashboard, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminDashboardResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminDashboardResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.dashboard = AdminDashboard.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminDashboardResponse {
+    return { dashboard: isSet(object.dashboard) ? AdminDashboard.fromJSON(object.dashboard) : undefined };
+  },
+
+  toJSON(message: GetAdminDashboardResponse): unknown {
+    const obj: any = {};
+    if (message.dashboard !== undefined) {
+      obj.dashboard = AdminDashboard.toJSON(message.dashboard);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminDashboardResponse>, I>>(base?: I): GetAdminDashboardResponse {
+    return GetAdminDashboardResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminDashboardResponse>, I>>(object: I): GetAdminDashboardResponse {
+    const message = createBaseGetAdminDashboardResponse();
+    message.dashboard = (object.dashboard !== undefined && object.dashboard !== null)
+      ? AdminDashboard.fromPartial(object.dashboard)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminUsersRequest(): ListAdminUsersRequest {
+  return { page: 0, limit: 0, search: undefined, role: undefined };
+}
+
+export const ListAdminUsersRequest: MessageFns<ListAdminUsersRequest> = {
+  encode(message: ListAdminUsersRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.search !== undefined) {
+      writer.uint32(26).string(message.search);
+    }
+    if (message.role !== undefined) {
+      writer.uint32(34).string(message.role);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminUsersRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminUsersRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.search = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.role = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminUsersRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      search: isSet(object.search) ? globalThis.String(object.search) : undefined,
+      role: isSet(object.role) ? globalThis.String(object.role) : undefined,
+    };
+  },
+
+  toJSON(message: ListAdminUsersRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.search !== undefined) {
+      obj.search = message.search;
+    }
+    if (message.role !== undefined) {
+      obj.role = message.role;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminUsersRequest>, I>>(base?: I): ListAdminUsersRequest {
+    return ListAdminUsersRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminUsersRequest>, I>>(object: I): ListAdminUsersRequest {
+    const message = createBaseListAdminUsersRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.search = object.search ?? undefined;
+    message.role = object.role ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminUsersResponse(): ListAdminUsersResponse {
+  return { users: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListAdminUsersResponse: MessageFns<ListAdminUsersResponse> = {
+  encode(message: ListAdminUsersResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.users !== undefined && message.users.length !== 0) {
+      for (const v of message.users) {
+        AdminUser.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminUsersResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminUsersResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminUser.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.users!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminUsersResponse {
+    return {
+      users: globalThis.Array.isArray(object?.users) ? object.users.map((e: any) => AdminUser.fromJSON(e)) : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminUsersResponse): unknown {
+    const obj: any = {};
+    if (message.users?.length) {
+      obj.users = message.users.map((e) => AdminUser.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminUsersResponse>, I>>(base?: I): ListAdminUsersResponse {
+    return ListAdminUsersResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminUsersResponse>, I>>(object: I): ListAdminUsersResponse {
+    const message = createBaseListAdminUsersResponse();
+    message.users = object.users?.map((e) => AdminUser.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminUserRequest(): GetAdminUserRequest {
+  return { id: "" };
+}
+
+export const GetAdminUserRequest: MessageFns<GetAdminUserRequest> = {
+  encode(message: GetAdminUserRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminUserRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminUserRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminUserRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminUserRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminUserRequest>, I>>(base?: I): GetAdminUserRequest {
+    return GetAdminUserRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminUserRequest>, I>>(object: I): GetAdminUserRequest {
+    const message = createBaseGetAdminUserRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminUserResponse(): GetAdminUserResponse {
+  return { user: undefined };
+}
+
+export const GetAdminUserResponse: MessageFns<GetAdminUserResponse> = {
+  encode(message: GetAdminUserResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      AdminUserDetail.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminUserResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminUserResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = AdminUserDetail.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminUserResponse {
+    return { user: isSet(object.user) ? AdminUserDetail.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: GetAdminUserResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = AdminUserDetail.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminUserResponse>, I>>(base?: I): GetAdminUserResponse {
+    return GetAdminUserResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminUserResponse>, I>>(object: I): GetAdminUserResponse {
+    const message = createBaseGetAdminUserResponse();
+    message.user = (object.user !== undefined && object.user !== null)
+      ? AdminUserDetail.fromPartial(object.user)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminUserRequest(): CreateAdminUserRequest {
+  return { email: "", username: undefined, password: "", role: undefined, planId: undefined };
+}
+
+export const CreateAdminUserRequest: MessageFns<CreateAdminUserRequest> = {
+  encode(message: CreateAdminUserRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.email !== undefined && message.email !== "") {
+      writer.uint32(10).string(message.email);
+    }
+    if (message.username !== undefined) {
+      writer.uint32(18).string(message.username);
+    }
+    if (message.password !== undefined && message.password !== "") {
+      writer.uint32(26).string(message.password);
+    }
+    if (message.role !== undefined) {
+      writer.uint32(34).string(message.role);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(42).string(message.planId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminUserRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminUserRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.password = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.role = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminUserRequest {
+    return {
+      email: isSet(object.email) ? globalThis.String(object.email) : "",
+      username: isSet(object.username) ? globalThis.String(object.username) : undefined,
+      password: isSet(object.password) ? globalThis.String(object.password) : "",
+      role: isSet(object.role) ? globalThis.String(object.role) : undefined,
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminUserRequest): unknown {
+    const obj: any = {};
+    if (message.email !== undefined && message.email !== "") {
+      obj.email = message.email;
+    }
+    if (message.username !== undefined) {
+      obj.username = message.username;
+    }
+    if (message.password !== undefined && message.password !== "") {
+      obj.password = message.password;
+    }
+    if (message.role !== undefined) {
+      obj.role = message.role;
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminUserRequest>, I>>(base?: I): CreateAdminUserRequest {
+    return CreateAdminUserRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminUserRequest>, I>>(object: I): CreateAdminUserRequest {
+    const message = createBaseCreateAdminUserRequest();
+    message.email = object.email ?? "";
+    message.username = object.username ?? undefined;
+    message.password = object.password ?? "";
+    message.role = object.role ?? undefined;
+    message.planId = object.planId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminUserResponse(): CreateAdminUserResponse {
+  return { user: undefined };
+}
+
+export const CreateAdminUserResponse: MessageFns<CreateAdminUserResponse> = {
+  encode(message: CreateAdminUserResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      AdminUser.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminUserResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminUserResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = AdminUser.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminUserResponse {
+    return { user: isSet(object.user) ? AdminUser.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: CreateAdminUserResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = AdminUser.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminUserResponse>, I>>(base?: I): CreateAdminUserResponse {
+    return CreateAdminUserResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminUserResponse>, I>>(object: I): CreateAdminUserResponse {
+    const message = createBaseCreateAdminUserResponse();
+    message.user = (object.user !== undefined && object.user !== null) ? AdminUser.fromPartial(object.user) : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminUserRequest(): UpdateAdminUserRequest {
+  return { id: "", email: undefined, username: undefined, password: undefined, role: undefined, planId: undefined };
+}
+
+export const UpdateAdminUserRequest: MessageFns<UpdateAdminUserRequest> = {
+  encode(message: UpdateAdminUserRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.email !== undefined) {
+      writer.uint32(18).string(message.email);
+    }
+    if (message.username !== undefined) {
+      writer.uint32(26).string(message.username);
+    }
+    if (message.password !== undefined) {
+      writer.uint32(34).string(message.password);
+    }
+    if (message.role !== undefined) {
+      writer.uint32(42).string(message.role);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(50).string(message.planId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminUserRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminUserRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.password = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.role = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminUserRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      email: isSet(object.email) ? globalThis.String(object.email) : undefined,
+      username: isSet(object.username) ? globalThis.String(object.username) : undefined,
+      password: isSet(object.password) ? globalThis.String(object.password) : undefined,
+      role: isSet(object.role) ? globalThis.String(object.role) : undefined,
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdminUserRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.email !== undefined) {
+      obj.email = message.email;
+    }
+    if (message.username !== undefined) {
+      obj.username = message.username;
+    }
+    if (message.password !== undefined) {
+      obj.password = message.password;
+    }
+    if (message.role !== undefined) {
+      obj.role = message.role;
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminUserRequest>, I>>(base?: I): UpdateAdminUserRequest {
+    return UpdateAdminUserRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminUserRequest>, I>>(object: I): UpdateAdminUserRequest {
+    const message = createBaseUpdateAdminUserRequest();
+    message.id = object.id ?? "";
+    message.email = object.email ?? undefined;
+    message.username = object.username ?? undefined;
+    message.password = object.password ?? undefined;
+    message.role = object.role ?? undefined;
+    message.planId = object.planId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminUserResponse(): UpdateAdminUserResponse {
+  return { user: undefined };
+}
+
+export const UpdateAdminUserResponse: MessageFns<UpdateAdminUserResponse> = {
+  encode(message: UpdateAdminUserResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      AdminUser.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminUserResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminUserResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = AdminUser.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminUserResponse {
+    return { user: isSet(object.user) ? AdminUser.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: UpdateAdminUserResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = AdminUser.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminUserResponse>, I>>(base?: I): UpdateAdminUserResponse {
+    return UpdateAdminUserResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminUserResponse>, I>>(object: I): UpdateAdminUserResponse {
+    const message = createBaseUpdateAdminUserResponse();
+    message.user = (object.user !== undefined && object.user !== null) ? AdminUser.fromPartial(object.user) : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminUserReferralSettingsRequest(): UpdateAdminUserReferralSettingsRequest {
+  return {
+    id: "",
+    refUsername: undefined,
+    clearReferrer: undefined,
+    referralEligible: undefined,
+    referralRewardBps: undefined,
+    clearReferralRewardBps: undefined,
+  };
+}
+
+export const UpdateAdminUserReferralSettingsRequest: MessageFns<UpdateAdminUserReferralSettingsRequest> = {
+  encode(message: UpdateAdminUserReferralSettingsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.refUsername !== undefined) {
+      writer.uint32(18).string(message.refUsername);
+    }
+    if (message.clearReferrer !== undefined) {
+      writer.uint32(24).bool(message.clearReferrer);
+    }
+    if (message.referralEligible !== undefined) {
+      writer.uint32(32).bool(message.referralEligible);
+    }
+    if (message.referralRewardBps !== undefined) {
+      writer.uint32(40).int32(message.referralRewardBps);
+    }
+    if (message.clearReferralRewardBps !== undefined) {
+      writer.uint32(48).bool(message.clearReferralRewardBps);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminUserReferralSettingsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminUserReferralSettingsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.refUsername = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.clearReferrer = reader.bool();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.referralEligible = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.referralRewardBps = reader.int32();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.clearReferralRewardBps = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminUserReferralSettingsRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      refUsername: isSet(object.refUsername)
+        ? globalThis.String(object.refUsername)
+        : isSet(object.ref_username)
+        ? globalThis.String(object.ref_username)
+        : undefined,
+      clearReferrer: isSet(object.clearReferrer)
+        ? globalThis.Boolean(object.clearReferrer)
+        : isSet(object.clear_referrer)
+        ? globalThis.Boolean(object.clear_referrer)
+        : undefined,
+      referralEligible: isSet(object.referralEligible)
+        ? globalThis.Boolean(object.referralEligible)
+        : isSet(object.referral_eligible)
+        ? globalThis.Boolean(object.referral_eligible)
+        : undefined,
+      referralRewardBps: isSet(object.referralRewardBps)
+        ? globalThis.Number(object.referralRewardBps)
+        : isSet(object.referral_reward_bps)
+        ? globalThis.Number(object.referral_reward_bps)
+        : undefined,
+      clearReferralRewardBps: isSet(object.clearReferralRewardBps)
+        ? globalThis.Boolean(object.clearReferralRewardBps)
+        : isSet(object.clear_referral_reward_bps)
+        ? globalThis.Boolean(object.clear_referral_reward_bps)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdminUserReferralSettingsRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.refUsername !== undefined) {
+      obj.refUsername = message.refUsername;
+    }
+    if (message.clearReferrer !== undefined) {
+      obj.clearReferrer = message.clearReferrer;
+    }
+    if (message.referralEligible !== undefined) {
+      obj.referralEligible = message.referralEligible;
+    }
+    if (message.referralRewardBps !== undefined) {
+      obj.referralRewardBps = Math.round(message.referralRewardBps);
+    }
+    if (message.clearReferralRewardBps !== undefined) {
+      obj.clearReferralRewardBps = message.clearReferralRewardBps;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminUserReferralSettingsRequest>, I>>(
+    base?: I,
+  ): UpdateAdminUserReferralSettingsRequest {
+    return UpdateAdminUserReferralSettingsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminUserReferralSettingsRequest>, I>>(
+    object: I,
+  ): UpdateAdminUserReferralSettingsRequest {
+    const message = createBaseUpdateAdminUserReferralSettingsRequest();
+    message.id = object.id ?? "";
+    message.refUsername = object.refUsername ?? undefined;
+    message.clearReferrer = object.clearReferrer ?? undefined;
+    message.referralEligible = object.referralEligible ?? undefined;
+    message.referralRewardBps = object.referralRewardBps ?? undefined;
+    message.clearReferralRewardBps = object.clearReferralRewardBps ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminUserReferralSettingsResponse(): UpdateAdminUserReferralSettingsResponse {
+  return { user: undefined };
+}
+
+export const UpdateAdminUserReferralSettingsResponse: MessageFns<UpdateAdminUserReferralSettingsResponse> = {
+  encode(message: UpdateAdminUserReferralSettingsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      AdminUserDetail.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminUserReferralSettingsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminUserReferralSettingsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = AdminUserDetail.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminUserReferralSettingsResponse {
+    return { user: isSet(object.user) ? AdminUserDetail.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: UpdateAdminUserReferralSettingsResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = AdminUserDetail.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminUserReferralSettingsResponse>, I>>(
+    base?: I,
+  ): UpdateAdminUserReferralSettingsResponse {
+    return UpdateAdminUserReferralSettingsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminUserReferralSettingsResponse>, I>>(
+    object: I,
+  ): UpdateAdminUserReferralSettingsResponse {
+    const message = createBaseUpdateAdminUserReferralSettingsResponse();
+    message.user = (object.user !== undefined && object.user !== null)
+      ? AdminUserDetail.fromPartial(object.user)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminUserRoleRequest(): UpdateAdminUserRoleRequest {
+  return { id: "", role: "" };
+}
+
+export const UpdateAdminUserRoleRequest: MessageFns<UpdateAdminUserRoleRequest> = {
+  encode(message: UpdateAdminUserRoleRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.role !== undefined && message.role !== "") {
+      writer.uint32(18).string(message.role);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminUserRoleRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminUserRoleRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.role = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminUserRoleRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      role: isSet(object.role) ? globalThis.String(object.role) : "",
+    };
+  },
+
+  toJSON(message: UpdateAdminUserRoleRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.role !== undefined && message.role !== "") {
+      obj.role = message.role;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminUserRoleRequest>, I>>(base?: I): UpdateAdminUserRoleRequest {
+    return UpdateAdminUserRoleRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminUserRoleRequest>, I>>(object: I): UpdateAdminUserRoleRequest {
+    const message = createBaseUpdateAdminUserRoleRequest();
+    message.id = object.id ?? "";
+    message.role = object.role ?? "";
+    return message;
+  },
+};
+
+function createBaseUpdateAdminUserRoleResponse(): UpdateAdminUserRoleResponse {
+  return { message: "", role: "" };
+}
+
+export const UpdateAdminUserRoleResponse: MessageFns<UpdateAdminUserRoleResponse> = {
+  encode(message: UpdateAdminUserRoleResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.message !== undefined && message.message !== "") {
+      writer.uint32(10).string(message.message);
+    }
+    if (message.role !== undefined && message.role !== "") {
+      writer.uint32(18).string(message.role);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminUserRoleResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminUserRoleResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.role = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminUserRoleResponse {
+    return {
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+      role: isSet(object.role) ? globalThis.String(object.role) : "",
+    };
+  },
+
+  toJSON(message: UpdateAdminUserRoleResponse): unknown {
+    const obj: any = {};
+    if (message.message !== undefined && message.message !== "") {
+      obj.message = message.message;
+    }
+    if (message.role !== undefined && message.role !== "") {
+      obj.role = message.role;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminUserRoleResponse>, I>>(base?: I): UpdateAdminUserRoleResponse {
+    return UpdateAdminUserRoleResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminUserRoleResponse>, I>>(object: I): UpdateAdminUserRoleResponse {
+    const message = createBaseUpdateAdminUserRoleResponse();
+    message.message = object.message ?? "";
+    message.role = object.role ?? "";
+    return message;
+  },
+};
+
+function createBaseDeleteAdminUserRequest(): DeleteAdminUserRequest {
+  return { id: "" };
+}
+
+export const DeleteAdminUserRequest: MessageFns<DeleteAdminUserRequest> = {
+  encode(message: DeleteAdminUserRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdminUserRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdminUserRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdminUserRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteAdminUserRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdminUserRequest>, I>>(base?: I): DeleteAdminUserRequest {
+    return DeleteAdminUserRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdminUserRequest>, I>>(object: I): DeleteAdminUserRequest {
+    const message = createBaseDeleteAdminUserRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdminVideosRequest(): ListAdminVideosRequest {
+  return { page: 0, limit: 0, search: undefined, userId: undefined, status: undefined };
+}
+
+export const ListAdminVideosRequest: MessageFns<ListAdminVideosRequest> = {
+  encode(message: ListAdminVideosRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.search !== undefined) {
+      writer.uint32(26).string(message.search);
+    }
+    if (message.userId !== undefined) {
+      writer.uint32(34).string(message.userId);
+    }
+    if (message.status !== undefined) {
+      writer.uint32(42).string(message.status);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminVideosRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminVideosRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.search = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminVideosRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      search: isSet(object.search) ? globalThis.String(object.search) : undefined,
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : undefined,
+      status: isSet(object.status) ? globalThis.String(object.status) : undefined,
+    };
+  },
+
+  toJSON(message: ListAdminVideosRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.search !== undefined) {
+      obj.search = message.search;
+    }
+    if (message.userId !== undefined) {
+      obj.userId = message.userId;
+    }
+    if (message.status !== undefined) {
+      obj.status = message.status;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminVideosRequest>, I>>(base?: I): ListAdminVideosRequest {
+    return ListAdminVideosRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminVideosRequest>, I>>(object: I): ListAdminVideosRequest {
+    const message = createBaseListAdminVideosRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.search = object.search ?? undefined;
+    message.userId = object.userId ?? undefined;
+    message.status = object.status ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminVideosResponse(): ListAdminVideosResponse {
+  return { videos: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListAdminVideosResponse: MessageFns<ListAdminVideosResponse> = {
+  encode(message: ListAdminVideosResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.videos !== undefined && message.videos.length !== 0) {
+      for (const v of message.videos) {
+        AdminVideo.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminVideosResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminVideosResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminVideo.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.videos!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminVideosResponse {
+    return {
+      videos: globalThis.Array.isArray(object?.videos) ? object.videos.map((e: any) => AdminVideo.fromJSON(e)) : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminVideosResponse): unknown {
+    const obj: any = {};
+    if (message.videos?.length) {
+      obj.videos = message.videos.map((e) => AdminVideo.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminVideosResponse>, I>>(base?: I): ListAdminVideosResponse {
+    return ListAdminVideosResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminVideosResponse>, I>>(object: I): ListAdminVideosResponse {
+    const message = createBaseListAdminVideosResponse();
+    message.videos = object.videos?.map((e) => AdminVideo.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminVideoRequest(): GetAdminVideoRequest {
+  return { id: "" };
+}
+
+export const GetAdminVideoRequest: MessageFns<GetAdminVideoRequest> = {
+  encode(message: GetAdminVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminVideoRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminVideoRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminVideoRequest>, I>>(base?: I): GetAdminVideoRequest {
+    return GetAdminVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminVideoRequest>, I>>(object: I): GetAdminVideoRequest {
+    const message = createBaseGetAdminVideoRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminVideoResponse(): GetAdminVideoResponse {
+  return { video: undefined };
+}
+
+export const GetAdminVideoResponse: MessageFns<GetAdminVideoResponse> = {
+  encode(message: GetAdminVideoResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.video !== undefined) {
+      AdminVideo.encode(message.video, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminVideoResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminVideoResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.video = AdminVideo.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminVideoResponse {
+    return { video: isSet(object.video) ? AdminVideo.fromJSON(object.video) : undefined };
+  },
+
+  toJSON(message: GetAdminVideoResponse): unknown {
+    const obj: any = {};
+    if (message.video !== undefined) {
+      obj.video = AdminVideo.toJSON(message.video);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminVideoResponse>, I>>(base?: I): GetAdminVideoResponse {
+    return GetAdminVideoResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminVideoResponse>, I>>(object: I): GetAdminVideoResponse {
+    const message = createBaseGetAdminVideoResponse();
+    message.video = (object.video !== undefined && object.video !== null)
+      ? AdminVideo.fromPartial(object.video)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminVideoRequest(): CreateAdminVideoRequest {
+  return {
+    userId: "",
+    title: "",
+    description: undefined,
+    url: "",
+    size: 0,
+    duration: 0,
+    format: undefined,
+    status: undefined,
+    adTemplateId: undefined,
+  };
+}
+
+export const CreateAdminVideoRequest: MessageFns<CreateAdminVideoRequest> = {
+  encode(message: CreateAdminVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(10).string(message.userId);
+    }
+    if (message.title !== undefined && message.title !== "") {
+      writer.uint32(18).string(message.title);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.url !== undefined && message.url !== "") {
+      writer.uint32(34).string(message.url);
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      writer.uint32(40).int64(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      writer.uint32(48).int32(message.duration);
+    }
+    if (message.format !== undefined) {
+      writer.uint32(58).string(message.format);
+    }
+    if (message.status !== undefined) {
+      writer.uint32(66).string(message.status);
+    }
+    if (message.adTemplateId !== undefined) {
+      writer.uint32(74).string(message.adTemplateId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.title = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.url = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.size = longToNumber(reader.int64());
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.format = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.adTemplateId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminVideoRequest {
+    return {
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      title: isSet(object.title) ? globalThis.String(object.title) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      url: isSet(object.url) ? globalThis.String(object.url) : "",
+      size: isSet(object.size) ? globalThis.Number(object.size) : 0,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : 0,
+      format: isSet(object.format) ? globalThis.String(object.format) : undefined,
+      status: isSet(object.status) ? globalThis.String(object.status) : undefined,
+      adTemplateId: isSet(object.adTemplateId)
+        ? globalThis.String(object.adTemplateId)
+        : isSet(object.ad_template_id)
+        ? globalThis.String(object.ad_template_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminVideoRequest): unknown {
+    const obj: any = {};
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.title !== undefined && message.title !== "") {
+      obj.title = message.title;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.url !== undefined && message.url !== "") {
+      obj.url = message.url;
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      obj.size = Math.round(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.format !== undefined) {
+      obj.format = message.format;
+    }
+    if (message.status !== undefined) {
+      obj.status = message.status;
+    }
+    if (message.adTemplateId !== undefined) {
+      obj.adTemplateId = message.adTemplateId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminVideoRequest>, I>>(base?: I): CreateAdminVideoRequest {
+    return CreateAdminVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminVideoRequest>, I>>(object: I): CreateAdminVideoRequest {
+    const message = createBaseCreateAdminVideoRequest();
+    message.userId = object.userId ?? "";
+    message.title = object.title ?? "";
+    message.description = object.description ?? undefined;
+    message.url = object.url ?? "";
+    message.size = object.size ?? 0;
+    message.duration = object.duration ?? 0;
+    message.format = object.format ?? undefined;
+    message.status = object.status ?? undefined;
+    message.adTemplateId = object.adTemplateId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminVideoResponse(): CreateAdminVideoResponse {
+  return { video: undefined };
+}
+
+export const CreateAdminVideoResponse: MessageFns<CreateAdminVideoResponse> = {
+  encode(message: CreateAdminVideoResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.video !== undefined) {
+      AdminVideo.encode(message.video, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminVideoResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminVideoResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.video = AdminVideo.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminVideoResponse {
+    return { video: isSet(object.video) ? AdminVideo.fromJSON(object.video) : undefined };
+  },
+
+  toJSON(message: CreateAdminVideoResponse): unknown {
+    const obj: any = {};
+    if (message.video !== undefined) {
+      obj.video = AdminVideo.toJSON(message.video);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminVideoResponse>, I>>(base?: I): CreateAdminVideoResponse {
+    return CreateAdminVideoResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminVideoResponse>, I>>(object: I): CreateAdminVideoResponse {
+    const message = createBaseCreateAdminVideoResponse();
+    message.video = (object.video !== undefined && object.video !== null)
+      ? AdminVideo.fromPartial(object.video)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminVideoRequest(): UpdateAdminVideoRequest {
+  return {
+    id: "",
+    userId: "",
+    title: "",
+    description: undefined,
+    url: "",
+    size: 0,
+    duration: 0,
+    format: undefined,
+    status: undefined,
+    adTemplateId: undefined,
+  };
+}
+
+export const UpdateAdminVideoRequest: MessageFns<UpdateAdminVideoRequest> = {
+  encode(message: UpdateAdminVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.title !== undefined && message.title !== "") {
+      writer.uint32(26).string(message.title);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(34).string(message.description);
+    }
+    if (message.url !== undefined && message.url !== "") {
+      writer.uint32(42).string(message.url);
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      writer.uint32(48).int64(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      writer.uint32(56).int32(message.duration);
+    }
+    if (message.format !== undefined) {
+      writer.uint32(66).string(message.format);
+    }
+    if (message.status !== undefined) {
+      writer.uint32(74).string(message.status);
+    }
+    if (message.adTemplateId !== undefined) {
+      writer.uint32(82).string(message.adTemplateId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.title = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.url = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.size = longToNumber(reader.int64());
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.format = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.adTemplateId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminVideoRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      title: isSet(object.title) ? globalThis.String(object.title) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      url: isSet(object.url) ? globalThis.String(object.url) : "",
+      size: isSet(object.size) ? globalThis.Number(object.size) : 0,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : 0,
+      format: isSet(object.format) ? globalThis.String(object.format) : undefined,
+      status: isSet(object.status) ? globalThis.String(object.status) : undefined,
+      adTemplateId: isSet(object.adTemplateId)
+        ? globalThis.String(object.adTemplateId)
+        : isSet(object.ad_template_id)
+        ? globalThis.String(object.ad_template_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdminVideoRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.title !== undefined && message.title !== "") {
+      obj.title = message.title;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.url !== undefined && message.url !== "") {
+      obj.url = message.url;
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      obj.size = Math.round(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.format !== undefined) {
+      obj.format = message.format;
+    }
+    if (message.status !== undefined) {
+      obj.status = message.status;
+    }
+    if (message.adTemplateId !== undefined) {
+      obj.adTemplateId = message.adTemplateId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminVideoRequest>, I>>(base?: I): UpdateAdminVideoRequest {
+    return UpdateAdminVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminVideoRequest>, I>>(object: I): UpdateAdminVideoRequest {
+    const message = createBaseUpdateAdminVideoRequest();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.title = object.title ?? "";
+    message.description = object.description ?? undefined;
+    message.url = object.url ?? "";
+    message.size = object.size ?? 0;
+    message.duration = object.duration ?? 0;
+    message.format = object.format ?? undefined;
+    message.status = object.status ?? undefined;
+    message.adTemplateId = object.adTemplateId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminVideoResponse(): UpdateAdminVideoResponse {
+  return { video: undefined };
+}
+
+export const UpdateAdminVideoResponse: MessageFns<UpdateAdminVideoResponse> = {
+  encode(message: UpdateAdminVideoResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.video !== undefined) {
+      AdminVideo.encode(message.video, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminVideoResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminVideoResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.video = AdminVideo.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminVideoResponse {
+    return { video: isSet(object.video) ? AdminVideo.fromJSON(object.video) : undefined };
+  },
+
+  toJSON(message: UpdateAdminVideoResponse): unknown {
+    const obj: any = {};
+    if (message.video !== undefined) {
+      obj.video = AdminVideo.toJSON(message.video);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminVideoResponse>, I>>(base?: I): UpdateAdminVideoResponse {
+    return UpdateAdminVideoResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminVideoResponse>, I>>(object: I): UpdateAdminVideoResponse {
+    const message = createBaseUpdateAdminVideoResponse();
+    message.video = (object.video !== undefined && object.video !== null)
+      ? AdminVideo.fromPartial(object.video)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteAdminVideoRequest(): DeleteAdminVideoRequest {
+  return { id: "" };
+}
+
+export const DeleteAdminVideoRequest: MessageFns<DeleteAdminVideoRequest> = {
+  encode(message: DeleteAdminVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdminVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdminVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdminVideoRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteAdminVideoRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdminVideoRequest>, I>>(base?: I): DeleteAdminVideoRequest {
+    return DeleteAdminVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdminVideoRequest>, I>>(object: I): DeleteAdminVideoRequest {
+    const message = createBaseDeleteAdminVideoRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdminPaymentsRequest(): ListAdminPaymentsRequest {
+  return { page: 0, limit: 0, userId: undefined, status: undefined };
+}
+
+export const ListAdminPaymentsRequest: MessageFns<ListAdminPaymentsRequest> = {
+  encode(message: ListAdminPaymentsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.userId !== undefined) {
+      writer.uint32(26).string(message.userId);
+    }
+    if (message.status !== undefined) {
+      writer.uint32(34).string(message.status);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPaymentsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPaymentsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminPaymentsRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : undefined,
+      status: isSet(object.status) ? globalThis.String(object.status) : undefined,
+    };
+  },
+
+  toJSON(message: ListAdminPaymentsRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.userId !== undefined) {
+      obj.userId = message.userId;
+    }
+    if (message.status !== undefined) {
+      obj.status = message.status;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPaymentsRequest>, I>>(base?: I): ListAdminPaymentsRequest {
+    return ListAdminPaymentsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPaymentsRequest>, I>>(object: I): ListAdminPaymentsRequest {
+    const message = createBaseListAdminPaymentsRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.userId = object.userId ?? undefined;
+    message.status = object.status ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminPaymentsResponse(): ListAdminPaymentsResponse {
+  return { payments: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListAdminPaymentsResponse: MessageFns<ListAdminPaymentsResponse> = {
+  encode(message: ListAdminPaymentsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.payments !== undefined && message.payments.length !== 0) {
+      for (const v of message.payments) {
+        AdminPayment.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPaymentsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPaymentsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminPayment.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.payments!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminPaymentsResponse {
+    return {
+      payments: globalThis.Array.isArray(object?.payments)
+        ? object.payments.map((e: any) => AdminPayment.fromJSON(e))
+        : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminPaymentsResponse): unknown {
+    const obj: any = {};
+    if (message.payments?.length) {
+      obj.payments = message.payments.map((e) => AdminPayment.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPaymentsResponse>, I>>(base?: I): ListAdminPaymentsResponse {
+    return ListAdminPaymentsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPaymentsResponse>, I>>(object: I): ListAdminPaymentsResponse {
+    const message = createBaseListAdminPaymentsResponse();
+    message.payments = object.payments?.map((e) => AdminPayment.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminPaymentRequest(): GetAdminPaymentRequest {
+  return { id: "" };
+}
+
+export const GetAdminPaymentRequest: MessageFns<GetAdminPaymentRequest> = {
+  encode(message: GetAdminPaymentRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminPaymentRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminPaymentRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminPaymentRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminPaymentRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminPaymentRequest>, I>>(base?: I): GetAdminPaymentRequest {
+    return GetAdminPaymentRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminPaymentRequest>, I>>(object: I): GetAdminPaymentRequest {
+    const message = createBaseGetAdminPaymentRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminPaymentResponse(): GetAdminPaymentResponse {
+  return { payment: undefined };
+}
+
+export const GetAdminPaymentResponse: MessageFns<GetAdminPaymentResponse> = {
+  encode(message: GetAdminPaymentResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.payment !== undefined) {
+      AdminPayment.encode(message.payment, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminPaymentResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminPaymentResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.payment = AdminPayment.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminPaymentResponse {
+    return { payment: isSet(object.payment) ? AdminPayment.fromJSON(object.payment) : undefined };
+  },
+
+  toJSON(message: GetAdminPaymentResponse): unknown {
+    const obj: any = {};
+    if (message.payment !== undefined) {
+      obj.payment = AdminPayment.toJSON(message.payment);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminPaymentResponse>, I>>(base?: I): GetAdminPaymentResponse {
+    return GetAdminPaymentResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminPaymentResponse>, I>>(object: I): GetAdminPaymentResponse {
+    const message = createBaseGetAdminPaymentResponse();
+    message.payment = (object.payment !== undefined && object.payment !== null)
+      ? AdminPayment.fromPartial(object.payment)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminPaymentRequest(): CreateAdminPaymentRequest {
+  return { userId: "", planId: "", termMonths: 0, paymentMethod: "", topupAmount: undefined };
+}
+
+export const CreateAdminPaymentRequest: MessageFns<CreateAdminPaymentRequest> = {
+  encode(message: CreateAdminPaymentRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(10).string(message.userId);
+    }
+    if (message.planId !== undefined && message.planId !== "") {
+      writer.uint32(18).string(message.planId);
+    }
+    if (message.termMonths !== undefined && message.termMonths !== 0) {
+      writer.uint32(24).int32(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined && message.paymentMethod !== "") {
+      writer.uint32(34).string(message.paymentMethod);
+    }
+    if (message.topupAmount !== undefined) {
+      writer.uint32(41).double(message.topupAmount);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPaymentRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPaymentRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.termMonths = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.paymentMethod = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 41) {
+            break;
+          }
+
+          message.topupAmount = reader.double();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPaymentRequest {
+    return {
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : "",
+      termMonths: isSet(object.termMonths)
+        ? globalThis.Number(object.termMonths)
+        : isSet(object.term_months)
+        ? globalThis.Number(object.term_months)
+        : 0,
+      paymentMethod: isSet(object.paymentMethod)
+        ? globalThis.String(object.paymentMethod)
+        : isSet(object.payment_method)
+        ? globalThis.String(object.payment_method)
+        : "",
+      topupAmount: isSet(object.topupAmount)
+        ? globalThis.Number(object.topupAmount)
+        : isSet(object.topup_amount)
+        ? globalThis.Number(object.topup_amount)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminPaymentRequest): unknown {
+    const obj: any = {};
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.planId !== undefined && message.planId !== "") {
+      obj.planId = message.planId;
+    }
+    if (message.termMonths !== undefined && message.termMonths !== 0) {
+      obj.termMonths = Math.round(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined && message.paymentMethod !== "") {
+      obj.paymentMethod = message.paymentMethod;
+    }
+    if (message.topupAmount !== undefined) {
+      obj.topupAmount = message.topupAmount;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPaymentRequest>, I>>(base?: I): CreateAdminPaymentRequest {
+    return CreateAdminPaymentRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPaymentRequest>, I>>(object: I): CreateAdminPaymentRequest {
+    const message = createBaseCreateAdminPaymentRequest();
+    message.userId = object.userId ?? "";
+    message.planId = object.planId ?? "";
+    message.termMonths = object.termMonths ?? 0;
+    message.paymentMethod = object.paymentMethod ?? "";
+    message.topupAmount = object.topupAmount ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminPaymentResponse(): CreateAdminPaymentResponse {
+  return { payment: undefined, subscription: undefined, walletBalance: 0, invoiceId: "" };
+}
+
+export const CreateAdminPaymentResponse: MessageFns<CreateAdminPaymentResponse> = {
+  encode(message: CreateAdminPaymentResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.payment !== undefined) {
+      AdminPayment.encode(message.payment, writer.uint32(10).fork()).join();
+    }
+    if (message.subscription !== undefined) {
+      PlanSubscription.encode(message.subscription, writer.uint32(18).fork()).join();
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      writer.uint32(25).double(message.walletBalance);
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      writer.uint32(34).string(message.invoiceId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPaymentResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPaymentResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.payment = AdminPayment.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.subscription = PlanSubscription.decode(reader, reader.uint32());
+          continue;
+        }
+        case 3: {
+          if (tag !== 25) {
+            break;
+          }
+
+          message.walletBalance = reader.double();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.invoiceId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPaymentResponse {
+    return {
+      payment: isSet(object.payment) ? AdminPayment.fromJSON(object.payment) : undefined,
+      subscription: isSet(object.subscription) ? PlanSubscription.fromJSON(object.subscription) : undefined,
+      walletBalance: isSet(object.walletBalance)
+        ? globalThis.Number(object.walletBalance)
+        : isSet(object.wallet_balance)
+        ? globalThis.Number(object.wallet_balance)
+        : 0,
+      invoiceId: isSet(object.invoiceId)
+        ? globalThis.String(object.invoiceId)
+        : isSet(object.invoice_id)
+        ? globalThis.String(object.invoice_id)
+        : "",
+    };
+  },
+
+  toJSON(message: CreateAdminPaymentResponse): unknown {
+    const obj: any = {};
+    if (message.payment !== undefined) {
+      obj.payment = AdminPayment.toJSON(message.payment);
+    }
+    if (message.subscription !== undefined) {
+      obj.subscription = PlanSubscription.toJSON(message.subscription);
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      obj.walletBalance = message.walletBalance;
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      obj.invoiceId = message.invoiceId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPaymentResponse>, I>>(base?: I): CreateAdminPaymentResponse {
+    return CreateAdminPaymentResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPaymentResponse>, I>>(object: I): CreateAdminPaymentResponse {
+    const message = createBaseCreateAdminPaymentResponse();
+    message.payment = (object.payment !== undefined && object.payment !== null)
+      ? AdminPayment.fromPartial(object.payment)
+      : undefined;
+    message.subscription = (object.subscription !== undefined && object.subscription !== null)
+      ? PlanSubscription.fromPartial(object.subscription)
+      : undefined;
+    message.walletBalance = object.walletBalance ?? 0;
+    message.invoiceId = object.invoiceId ?? "";
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPaymentRequest(): UpdateAdminPaymentRequest {
+  return { id: "", status: "" };
+}
+
+export const UpdateAdminPaymentRequest: MessageFns<UpdateAdminPaymentRequest> = {
+  encode(message: UpdateAdminPaymentRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(18).string(message.status);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPaymentRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPaymentRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPaymentRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+    };
+  },
+
+  toJSON(message: UpdateAdminPaymentRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPaymentRequest>, I>>(base?: I): UpdateAdminPaymentRequest {
+    return UpdateAdminPaymentRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPaymentRequest>, I>>(object: I): UpdateAdminPaymentRequest {
+    const message = createBaseUpdateAdminPaymentRequest();
+    message.id = object.id ?? "";
+    message.status = object.status ?? "";
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPaymentResponse(): UpdateAdminPaymentResponse {
+  return { payment: undefined };
+}
+
+export const UpdateAdminPaymentResponse: MessageFns<UpdateAdminPaymentResponse> = {
+  encode(message: UpdateAdminPaymentResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.payment !== undefined) {
+      AdminPayment.encode(message.payment, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPaymentResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPaymentResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.payment = AdminPayment.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPaymentResponse {
+    return { payment: isSet(object.payment) ? AdminPayment.fromJSON(object.payment) : undefined };
+  },
+
+  toJSON(message: UpdateAdminPaymentResponse): unknown {
+    const obj: any = {};
+    if (message.payment !== undefined) {
+      obj.payment = AdminPayment.toJSON(message.payment);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPaymentResponse>, I>>(base?: I): UpdateAdminPaymentResponse {
+    return UpdateAdminPaymentResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPaymentResponse>, I>>(object: I): UpdateAdminPaymentResponse {
+    const message = createBaseUpdateAdminPaymentResponse();
+    message.payment = (object.payment !== undefined && object.payment !== null)
+      ? AdminPayment.fromPartial(object.payment)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminPlansRequest(): ListAdminPlansRequest {
+  return {};
+}
+
+export const ListAdminPlansRequest: MessageFns<ListAdminPlansRequest> = {
+  encode(_: ListAdminPlansRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPlansRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPlansRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ListAdminPlansRequest {
+    return {};
+  },
+
+  toJSON(_: ListAdminPlansRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPlansRequest>, I>>(base?: I): ListAdminPlansRequest {
+    return ListAdminPlansRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPlansRequest>, I>>(_: I): ListAdminPlansRequest {
+    const message = createBaseListAdminPlansRequest();
+    return message;
+  },
+};
+
+function createBaseListAdminPlansResponse(): ListAdminPlansResponse {
+  return { plans: [] };
+}
+
+export const ListAdminPlansResponse: MessageFns<ListAdminPlansResponse> = {
+  encode(message: ListAdminPlansResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.plans !== undefined && message.plans.length !== 0) {
+      for (const v of message.plans) {
+        AdminPlan.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPlansResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPlansResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminPlan.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.plans!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminPlansResponse {
+    return {
+      plans: globalThis.Array.isArray(object?.plans) ? object.plans.map((e: any) => AdminPlan.fromJSON(e)) : [],
+    };
+  },
+
+  toJSON(message: ListAdminPlansResponse): unknown {
+    const obj: any = {};
+    if (message.plans?.length) {
+      obj.plans = message.plans.map((e) => AdminPlan.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPlansResponse>, I>>(base?: I): ListAdminPlansResponse {
+    return ListAdminPlansResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPlansResponse>, I>>(object: I): ListAdminPlansResponse {
+    const message = createBaseListAdminPlansResponse();
+    message.plans = object.plans?.map((e) => AdminPlan.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseCreateAdminPlanRequest(): CreateAdminPlanRequest {
+  return {
+    name: "",
+    description: undefined,
+    features: [],
+    price: 0,
+    cycle: "",
+    storageLimit: 0,
+    uploadLimit: 0,
+    isActive: undefined,
+  };
+}
+
+export const CreateAdminPlanRequest: MessageFns<CreateAdminPlanRequest> = {
+  encode(message: CreateAdminPlanRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(10).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(18).string(message.description);
+    }
+    if (message.features !== undefined && message.features.length !== 0) {
+      for (const v of message.features) {
+        writer.uint32(26).string(v!);
+      }
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      writer.uint32(33).double(message.price);
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      writer.uint32(42).string(message.cycle);
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      writer.uint32(48).int64(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      writer.uint32(56).int32(message.uploadLimit);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(64).bool(message.isActive);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPlanRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPlanRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          const el = reader.string();
+          if (el !== undefined) {
+            message.features!.push(el);
+          }
+          continue;
+        }
+        case 4: {
+          if (tag !== 33) {
+            break;
+          }
+
+          message.price = reader.double();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.cycle = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.storageLimit = longToNumber(reader.int64());
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.uploadLimit = reader.int32();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPlanRequest {
+    return {
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      features: globalThis.Array.isArray(object?.features) ? object.features.map((e: any) => globalThis.String(e)) : [],
+      price: isSet(object.price) ? globalThis.Number(object.price) : 0,
+      cycle: isSet(object.cycle) ? globalThis.String(object.cycle) : "",
+      storageLimit: isSet(object.storageLimit)
+        ? globalThis.Number(object.storageLimit)
+        : isSet(object.storage_limit)
+        ? globalThis.Number(object.storage_limit)
+        : 0,
+      uploadLimit: isSet(object.uploadLimit)
+        ? globalThis.Number(object.uploadLimit)
+        : isSet(object.upload_limit)
+        ? globalThis.Number(object.upload_limit)
+        : 0,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminPlanRequest): unknown {
+    const obj: any = {};
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.features?.length) {
+      obj.features = message.features;
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      obj.price = message.price;
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      obj.cycle = message.cycle;
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      obj.storageLimit = Math.round(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      obj.uploadLimit = Math.round(message.uploadLimit);
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPlanRequest>, I>>(base?: I): CreateAdminPlanRequest {
+    return CreateAdminPlanRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPlanRequest>, I>>(object: I): CreateAdminPlanRequest {
+    const message = createBaseCreateAdminPlanRequest();
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.features = object.features?.map((e) => e) || [];
+    message.price = object.price ?? 0;
+    message.cycle = object.cycle ?? "";
+    message.storageLimit = object.storageLimit ?? 0;
+    message.uploadLimit = object.uploadLimit ?? 0;
+    message.isActive = object.isActive ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminPlanResponse(): CreateAdminPlanResponse {
+  return { plan: undefined };
+}
+
+export const CreateAdminPlanResponse: MessageFns<CreateAdminPlanResponse> = {
+  encode(message: CreateAdminPlanResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.plan !== undefined) {
+      AdminPlan.encode(message.plan, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPlanResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPlanResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.plan = AdminPlan.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPlanResponse {
+    return { plan: isSet(object.plan) ? AdminPlan.fromJSON(object.plan) : undefined };
+  },
+
+  toJSON(message: CreateAdminPlanResponse): unknown {
+    const obj: any = {};
+    if (message.plan !== undefined) {
+      obj.plan = AdminPlan.toJSON(message.plan);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPlanResponse>, I>>(base?: I): CreateAdminPlanResponse {
+    return CreateAdminPlanResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPlanResponse>, I>>(object: I): CreateAdminPlanResponse {
+    const message = createBaseCreateAdminPlanResponse();
+    message.plan = (object.plan !== undefined && object.plan !== null) ? AdminPlan.fromPartial(object.plan) : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPlanRequest(): UpdateAdminPlanRequest {
+  return {
+    id: "",
+    name: "",
+    description: undefined,
+    features: [],
+    price: 0,
+    cycle: "",
+    storageLimit: 0,
+    uploadLimit: 0,
+    isActive: undefined,
+  };
+}
+
+export const UpdateAdminPlanRequest: MessageFns<UpdateAdminPlanRequest> = {
+  encode(message: UpdateAdminPlanRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.features !== undefined && message.features.length !== 0) {
+      for (const v of message.features) {
+        writer.uint32(34).string(v!);
+      }
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      writer.uint32(41).double(message.price);
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      writer.uint32(50).string(message.cycle);
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      writer.uint32(56).int64(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      writer.uint32(64).int32(message.uploadLimit);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(72).bool(message.isActive);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPlanRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPlanRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          const el = reader.string();
+          if (el !== undefined) {
+            message.features!.push(el);
+          }
+          continue;
+        }
+        case 5: {
+          if (tag !== 41) {
+            break;
+          }
+
+          message.price = reader.double();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.cycle = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.storageLimit = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.uploadLimit = reader.int32();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPlanRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      features: globalThis.Array.isArray(object?.features) ? object.features.map((e: any) => globalThis.String(e)) : [],
+      price: isSet(object.price) ? globalThis.Number(object.price) : 0,
+      cycle: isSet(object.cycle) ? globalThis.String(object.cycle) : "",
+      storageLimit: isSet(object.storageLimit)
+        ? globalThis.Number(object.storageLimit)
+        : isSet(object.storage_limit)
+        ? globalThis.Number(object.storage_limit)
+        : 0,
+      uploadLimit: isSet(object.uploadLimit)
+        ? globalThis.Number(object.uploadLimit)
+        : isSet(object.upload_limit)
+        ? globalThis.Number(object.upload_limit)
+        : 0,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdminPlanRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.features?.length) {
+      obj.features = message.features;
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      obj.price = message.price;
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      obj.cycle = message.cycle;
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      obj.storageLimit = Math.round(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      obj.uploadLimit = Math.round(message.uploadLimit);
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPlanRequest>, I>>(base?: I): UpdateAdminPlanRequest {
+    return UpdateAdminPlanRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPlanRequest>, I>>(object: I): UpdateAdminPlanRequest {
+    const message = createBaseUpdateAdminPlanRequest();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.features = object.features?.map((e) => e) || [];
+    message.price = object.price ?? 0;
+    message.cycle = object.cycle ?? "";
+    message.storageLimit = object.storageLimit ?? 0;
+    message.uploadLimit = object.uploadLimit ?? 0;
+    message.isActive = object.isActive ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPlanResponse(): UpdateAdminPlanResponse {
+  return { plan: undefined };
+}
+
+export const UpdateAdminPlanResponse: MessageFns<UpdateAdminPlanResponse> = {
+  encode(message: UpdateAdminPlanResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.plan !== undefined) {
+      AdminPlan.encode(message.plan, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPlanResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPlanResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.plan = AdminPlan.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPlanResponse {
+    return { plan: isSet(object.plan) ? AdminPlan.fromJSON(object.plan) : undefined };
+  },
+
+  toJSON(message: UpdateAdminPlanResponse): unknown {
+    const obj: any = {};
+    if (message.plan !== undefined) {
+      obj.plan = AdminPlan.toJSON(message.plan);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPlanResponse>, I>>(base?: I): UpdateAdminPlanResponse {
+    return UpdateAdminPlanResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPlanResponse>, I>>(object: I): UpdateAdminPlanResponse {
+    const message = createBaseUpdateAdminPlanResponse();
+    message.plan = (object.plan !== undefined && object.plan !== null) ? AdminPlan.fromPartial(object.plan) : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteAdminPlanRequest(): DeleteAdminPlanRequest {
+  return { id: "" };
+}
+
+export const DeleteAdminPlanRequest: MessageFns<DeleteAdminPlanRequest> = {
+  encode(message: DeleteAdminPlanRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdminPlanRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdminPlanRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdminPlanRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteAdminPlanRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdminPlanRequest>, I>>(base?: I): DeleteAdminPlanRequest {
+    return DeleteAdminPlanRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdminPlanRequest>, I>>(object: I): DeleteAdminPlanRequest {
+    const message = createBaseDeleteAdminPlanRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseDeleteAdminPlanResponse(): DeleteAdminPlanResponse {
+  return { message: "", mode: "" };
+}
+
+export const DeleteAdminPlanResponse: MessageFns<DeleteAdminPlanResponse> = {
+  encode(message: DeleteAdminPlanResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.message !== undefined && message.message !== "") {
+      writer.uint32(10).string(message.message);
+    }
+    if (message.mode !== undefined && message.mode !== "") {
+      writer.uint32(18).string(message.mode);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdminPlanResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdminPlanResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.mode = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdminPlanResponse {
+    return {
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+      mode: isSet(object.mode) ? globalThis.String(object.mode) : "",
+    };
+  },
+
+  toJSON(message: DeleteAdminPlanResponse): unknown {
+    const obj: any = {};
+    if (message.message !== undefined && message.message !== "") {
+      obj.message = message.message;
+    }
+    if (message.mode !== undefined && message.mode !== "") {
+      obj.mode = message.mode;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdminPlanResponse>, I>>(base?: I): DeleteAdminPlanResponse {
+    return DeleteAdminPlanResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdminPlanResponse>, I>>(object: I): DeleteAdminPlanResponse {
+    const message = createBaseDeleteAdminPlanResponse();
+    message.message = object.message ?? "";
+    message.mode = object.mode ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdminAdTemplatesRequest(): ListAdminAdTemplatesRequest {
+  return { page: 0, limit: 0, userId: undefined, search: undefined };
+}
+
+export const ListAdminAdTemplatesRequest: MessageFns<ListAdminAdTemplatesRequest> = {
+  encode(message: ListAdminAdTemplatesRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.userId !== undefined) {
+      writer.uint32(26).string(message.userId);
+    }
+    if (message.search !== undefined) {
+      writer.uint32(34).string(message.search);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminAdTemplatesRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminAdTemplatesRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.search = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminAdTemplatesRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : undefined,
+      search: isSet(object.search) ? globalThis.String(object.search) : undefined,
+    };
+  },
+
+  toJSON(message: ListAdminAdTemplatesRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.userId !== undefined) {
+      obj.userId = message.userId;
+    }
+    if (message.search !== undefined) {
+      obj.search = message.search;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminAdTemplatesRequest>, I>>(base?: I): ListAdminAdTemplatesRequest {
+    return ListAdminAdTemplatesRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminAdTemplatesRequest>, I>>(object: I): ListAdminAdTemplatesRequest {
+    const message = createBaseListAdminAdTemplatesRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.userId = object.userId ?? undefined;
+    message.search = object.search ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminAdTemplatesResponse(): ListAdminAdTemplatesResponse {
+  return { templates: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListAdminAdTemplatesResponse: MessageFns<ListAdminAdTemplatesResponse> = {
+  encode(message: ListAdminAdTemplatesResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.templates !== undefined && message.templates.length !== 0) {
+      for (const v of message.templates) {
+        AdminAdTemplate.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminAdTemplatesResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminAdTemplatesResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminAdTemplate.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.templates!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminAdTemplatesResponse {
+    return {
+      templates: globalThis.Array.isArray(object?.templates)
+        ? object.templates.map((e: any) => AdminAdTemplate.fromJSON(e))
+        : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminAdTemplatesResponse): unknown {
+    const obj: any = {};
+    if (message.templates?.length) {
+      obj.templates = message.templates.map((e) => AdminAdTemplate.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminAdTemplatesResponse>, I>>(base?: I): ListAdminAdTemplatesResponse {
+    return ListAdminAdTemplatesResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminAdTemplatesResponse>, I>>(object: I): ListAdminAdTemplatesResponse {
+    const message = createBaseListAdminAdTemplatesResponse();
+    message.templates = object.templates?.map((e) => AdminAdTemplate.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminAdTemplateRequest(): GetAdminAdTemplateRequest {
+  return { id: "" };
+}
+
+export const GetAdminAdTemplateRequest: MessageFns<GetAdminAdTemplateRequest> = {
+  encode(message: GetAdminAdTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminAdTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminAdTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminAdTemplateRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminAdTemplateRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminAdTemplateRequest>, I>>(base?: I): GetAdminAdTemplateRequest {
+    return GetAdminAdTemplateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminAdTemplateRequest>, I>>(object: I): GetAdminAdTemplateRequest {
+    const message = createBaseGetAdminAdTemplateRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminAdTemplateResponse(): GetAdminAdTemplateResponse {
+  return { template: undefined };
+}
+
+export const GetAdminAdTemplateResponse: MessageFns<GetAdminAdTemplateResponse> = {
+  encode(message: GetAdminAdTemplateResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.template !== undefined) {
+      AdminAdTemplate.encode(message.template, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminAdTemplateResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminAdTemplateResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.template = AdminAdTemplate.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminAdTemplateResponse {
+    return { template: isSet(object.template) ? AdminAdTemplate.fromJSON(object.template) : undefined };
+  },
+
+  toJSON(message: GetAdminAdTemplateResponse): unknown {
+    const obj: any = {};
+    if (message.template !== undefined) {
+      obj.template = AdminAdTemplate.toJSON(message.template);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminAdTemplateResponse>, I>>(base?: I): GetAdminAdTemplateResponse {
+    return GetAdminAdTemplateResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminAdTemplateResponse>, I>>(object: I): GetAdminAdTemplateResponse {
+    const message = createBaseGetAdminAdTemplateResponse();
+    message.template = (object.template !== undefined && object.template !== null)
+      ? AdminAdTemplate.fromPartial(object.template)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminAdTemplateRequest(): CreateAdminAdTemplateRequest {
+  return {
+    userId: "",
+    name: "",
+    description: undefined,
+    vastTagUrl: "",
+    adFormat: undefined,
+    duration: undefined,
+    isActive: undefined,
+    isDefault: undefined,
+  };
+}
+
+export const CreateAdminAdTemplateRequest: MessageFns<CreateAdminAdTemplateRequest> = {
+  encode(message: CreateAdminAdTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(10).string(message.userId);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      writer.uint32(34).string(message.vastTagUrl);
+    }
+    if (message.adFormat !== undefined) {
+      writer.uint32(42).string(message.adFormat);
+    }
+    if (message.duration !== undefined) {
+      writer.uint32(48).int64(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(56).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(64).bool(message.isDefault);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminAdTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminAdTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.vastTagUrl = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.adFormat = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.duration = longToNumber(reader.int64());
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminAdTemplateRequest {
+    return {
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      vastTagUrl: isSet(object.vastTagUrl)
+        ? globalThis.String(object.vastTagUrl)
+        : isSet(object.vast_tag_url)
+        ? globalThis.String(object.vast_tag_url)
+        : "",
+      adFormat: isSet(object.adFormat)
+        ? globalThis.String(object.adFormat)
+        : isSet(object.ad_format)
+        ? globalThis.String(object.ad_format)
+        : undefined,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : undefined,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminAdTemplateRequest): unknown {
+    const obj: any = {};
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      obj.vastTagUrl = message.vastTagUrl;
+    }
+    if (message.adFormat !== undefined) {
+      obj.adFormat = message.adFormat;
+    }
+    if (message.duration !== undefined) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminAdTemplateRequest>, I>>(base?: I): CreateAdminAdTemplateRequest {
+    return CreateAdminAdTemplateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminAdTemplateRequest>, I>>(object: I): CreateAdminAdTemplateRequest {
+    const message = createBaseCreateAdminAdTemplateRequest();
+    message.userId = object.userId ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.vastTagUrl = object.vastTagUrl ?? "";
+    message.adFormat = object.adFormat ?? undefined;
+    message.duration = object.duration ?? undefined;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminAdTemplateResponse(): CreateAdminAdTemplateResponse {
+  return { template: undefined };
+}
+
+export const CreateAdminAdTemplateResponse: MessageFns<CreateAdminAdTemplateResponse> = {
+  encode(message: CreateAdminAdTemplateResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.template !== undefined) {
+      AdminAdTemplate.encode(message.template, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminAdTemplateResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminAdTemplateResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.template = AdminAdTemplate.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminAdTemplateResponse {
+    return { template: isSet(object.template) ? AdminAdTemplate.fromJSON(object.template) : undefined };
+  },
+
+  toJSON(message: CreateAdminAdTemplateResponse): unknown {
+    const obj: any = {};
+    if (message.template !== undefined) {
+      obj.template = AdminAdTemplate.toJSON(message.template);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminAdTemplateResponse>, I>>(base?: I): CreateAdminAdTemplateResponse {
+    return CreateAdminAdTemplateResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminAdTemplateResponse>, I>>(
+    object: I,
+  ): CreateAdminAdTemplateResponse {
+    const message = createBaseCreateAdminAdTemplateResponse();
+    message.template = (object.template !== undefined && object.template !== null)
+      ? AdminAdTemplate.fromPartial(object.template)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminAdTemplateRequest(): UpdateAdminAdTemplateRequest {
+  return {
+    id: "",
+    userId: "",
+    name: "",
+    description: undefined,
+    vastTagUrl: "",
+    adFormat: undefined,
+    duration: undefined,
+    isActive: undefined,
+    isDefault: undefined,
+  };
+}
+
+export const UpdateAdminAdTemplateRequest: MessageFns<UpdateAdminAdTemplateRequest> = {
+  encode(message: UpdateAdminAdTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(26).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(34).string(message.description);
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      writer.uint32(42).string(message.vastTagUrl);
+    }
+    if (message.adFormat !== undefined) {
+      writer.uint32(50).string(message.adFormat);
+    }
+    if (message.duration !== undefined) {
+      writer.uint32(56).int64(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(64).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(72).bool(message.isDefault);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminAdTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminAdTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.vastTagUrl = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.adFormat = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.duration = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminAdTemplateRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      vastTagUrl: isSet(object.vastTagUrl)
+        ? globalThis.String(object.vastTagUrl)
+        : isSet(object.vast_tag_url)
+        ? globalThis.String(object.vast_tag_url)
+        : "",
+      adFormat: isSet(object.adFormat)
+        ? globalThis.String(object.adFormat)
+        : isSet(object.ad_format)
+        ? globalThis.String(object.ad_format)
+        : undefined,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : undefined,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdminAdTemplateRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      obj.vastTagUrl = message.vastTagUrl;
+    }
+    if (message.adFormat !== undefined) {
+      obj.adFormat = message.adFormat;
+    }
+    if (message.duration !== undefined) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminAdTemplateRequest>, I>>(base?: I): UpdateAdminAdTemplateRequest {
+    return UpdateAdminAdTemplateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminAdTemplateRequest>, I>>(object: I): UpdateAdminAdTemplateRequest {
+    const message = createBaseUpdateAdminAdTemplateRequest();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.vastTagUrl = object.vastTagUrl ?? "";
+    message.adFormat = object.adFormat ?? undefined;
+    message.duration = object.duration ?? undefined;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminAdTemplateResponse(): UpdateAdminAdTemplateResponse {
+  return { template: undefined };
+}
+
+export const UpdateAdminAdTemplateResponse: MessageFns<UpdateAdminAdTemplateResponse> = {
+  encode(message: UpdateAdminAdTemplateResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.template !== undefined) {
+      AdminAdTemplate.encode(message.template, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminAdTemplateResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminAdTemplateResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.template = AdminAdTemplate.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminAdTemplateResponse {
+    return { template: isSet(object.template) ? AdminAdTemplate.fromJSON(object.template) : undefined };
+  },
+
+  toJSON(message: UpdateAdminAdTemplateResponse): unknown {
+    const obj: any = {};
+    if (message.template !== undefined) {
+      obj.template = AdminAdTemplate.toJSON(message.template);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminAdTemplateResponse>, I>>(base?: I): UpdateAdminAdTemplateResponse {
+    return UpdateAdminAdTemplateResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminAdTemplateResponse>, I>>(
+    object: I,
+  ): UpdateAdminAdTemplateResponse {
+    const message = createBaseUpdateAdminAdTemplateResponse();
+    message.template = (object.template !== undefined && object.template !== null)
+      ? AdminAdTemplate.fromPartial(object.template)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteAdminAdTemplateRequest(): DeleteAdminAdTemplateRequest {
+  return { id: "" };
+}
+
+export const DeleteAdminAdTemplateRequest: MessageFns<DeleteAdminAdTemplateRequest> = {
+  encode(message: DeleteAdminAdTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdminAdTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdminAdTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdminAdTemplateRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteAdminAdTemplateRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdminAdTemplateRequest>, I>>(base?: I): DeleteAdminAdTemplateRequest {
+    return DeleteAdminAdTemplateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdminAdTemplateRequest>, I>>(object: I): DeleteAdminAdTemplateRequest {
+    const message = createBaseDeleteAdminAdTemplateRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdminPopupAdsRequest(): ListAdminPopupAdsRequest {
+  return { page: 0, limit: 0, userId: undefined, search: undefined };
+}
+
+export const ListAdminPopupAdsRequest: MessageFns<ListAdminPopupAdsRequest> = {
+  encode(message: ListAdminPopupAdsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.userId !== undefined) {
+      writer.uint32(26).string(message.userId);
+    }
+    if (message.search !== undefined) {
+      writer.uint32(34).string(message.search);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPopupAdsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPopupAdsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.search = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminPopupAdsRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : undefined,
+      search: isSet(object.search) ? globalThis.String(object.search) : undefined,
+    };
+  },
+
+  toJSON(message: ListAdminPopupAdsRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.userId !== undefined) {
+      obj.userId = message.userId;
+    }
+    if (message.search !== undefined) {
+      obj.search = message.search;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPopupAdsRequest>, I>>(base?: I): ListAdminPopupAdsRequest {
+    return ListAdminPopupAdsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPopupAdsRequest>, I>>(object: I): ListAdminPopupAdsRequest {
+    const message = createBaseListAdminPopupAdsRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.userId = object.userId ?? undefined;
+    message.search = object.search ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminPopupAdsResponse(): ListAdminPopupAdsResponse {
+  return { items: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListAdminPopupAdsResponse: MessageFns<ListAdminPopupAdsResponse> = {
+  encode(message: ListAdminPopupAdsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.items !== undefined && message.items.length !== 0) {
+      for (const v of message.items) {
+        AdminPopupAd.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPopupAdsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPopupAdsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminPopupAd.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.items!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminPopupAdsResponse {
+    return {
+      items: globalThis.Array.isArray(object?.items) ? object.items.map((e: any) => AdminPopupAd.fromJSON(e)) : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminPopupAdsResponse): unknown {
+    const obj: any = {};
+    if (message.items?.length) {
+      obj.items = message.items.map((e) => AdminPopupAd.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPopupAdsResponse>, I>>(base?: I): ListAdminPopupAdsResponse {
+    return ListAdminPopupAdsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPopupAdsResponse>, I>>(object: I): ListAdminPopupAdsResponse {
+    const message = createBaseListAdminPopupAdsResponse();
+    message.items = object.items?.map((e) => AdminPopupAd.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminPopupAdRequest(): GetAdminPopupAdRequest {
+  return { id: "" };
+}
+
+export const GetAdminPopupAdRequest: MessageFns<GetAdminPopupAdRequest> = {
+  encode(message: GetAdminPopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminPopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminPopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminPopupAdRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminPopupAdRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminPopupAdRequest>, I>>(base?: I): GetAdminPopupAdRequest {
+    return GetAdminPopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminPopupAdRequest>, I>>(object: I): GetAdminPopupAdRequest {
+    const message = createBaseGetAdminPopupAdRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminPopupAdResponse(): GetAdminPopupAdResponse {
+  return { item: undefined };
+}
+
+export const GetAdminPopupAdResponse: MessageFns<GetAdminPopupAdResponse> = {
+  encode(message: GetAdminPopupAdResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.item !== undefined) {
+      AdminPopupAd.encode(message.item, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminPopupAdResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminPopupAdResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.item = AdminPopupAd.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminPopupAdResponse {
+    return { item: isSet(object.item) ? AdminPopupAd.fromJSON(object.item) : undefined };
+  },
+
+  toJSON(message: GetAdminPopupAdResponse): unknown {
+    const obj: any = {};
+    if (message.item !== undefined) {
+      obj.item = AdminPopupAd.toJSON(message.item);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminPopupAdResponse>, I>>(base?: I): GetAdminPopupAdResponse {
+    return GetAdminPopupAdResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminPopupAdResponse>, I>>(object: I): GetAdminPopupAdResponse {
+    const message = createBaseGetAdminPopupAdResponse();
+    message.item = (object.item !== undefined && object.item !== null)
+      ? AdminPopupAd.fromPartial(object.item)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminPopupAdRequest(): CreateAdminPopupAdRequest {
+  return { userId: "", type: "", label: "", value: "", isActive: undefined, maxTriggersPerSession: undefined };
+}
+
+export const CreateAdminPopupAdRequest: MessageFns<CreateAdminPopupAdRequest> = {
+  encode(message: CreateAdminPopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(10).string(message.userId);
+    }
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(18).string(message.type);
+    }
+    if (message.label !== undefined && message.label !== "") {
+      writer.uint32(26).string(message.label);
+    }
+    if (message.value !== undefined && message.value !== "") {
+      writer.uint32(34).string(message.value);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(40).bool(message.isActive);
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      writer.uint32(48).int32(message.maxTriggersPerSession);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.label = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.maxTriggersPerSession = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPopupAdRequest {
+    return {
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      label: isSet(object.label) ? globalThis.String(object.label) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      maxTriggersPerSession: isSet(object.maxTriggersPerSession)
+        ? globalThis.Number(object.maxTriggersPerSession)
+        : isSet(object.max_triggers_per_session)
+        ? globalThis.Number(object.max_triggers_per_session)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminPopupAdRequest): unknown {
+    const obj: any = {};
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.label !== undefined && message.label !== "") {
+      obj.label = message.label;
+    }
+    if (message.value !== undefined && message.value !== "") {
+      obj.value = message.value;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      obj.maxTriggersPerSession = Math.round(message.maxTriggersPerSession);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPopupAdRequest>, I>>(base?: I): CreateAdminPopupAdRequest {
+    return CreateAdminPopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPopupAdRequest>, I>>(object: I): CreateAdminPopupAdRequest {
+    const message = createBaseCreateAdminPopupAdRequest();
+    message.userId = object.userId ?? "";
+    message.type = object.type ?? "";
+    message.label = object.label ?? "";
+    message.value = object.value ?? "";
+    message.isActive = object.isActive ?? undefined;
+    message.maxTriggersPerSession = object.maxTriggersPerSession ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminPopupAdResponse(): CreateAdminPopupAdResponse {
+  return { item: undefined };
+}
+
+export const CreateAdminPopupAdResponse: MessageFns<CreateAdminPopupAdResponse> = {
+  encode(message: CreateAdminPopupAdResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.item !== undefined) {
+      AdminPopupAd.encode(message.item, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPopupAdResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPopupAdResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.item = AdminPopupAd.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPopupAdResponse {
+    return { item: isSet(object.item) ? AdminPopupAd.fromJSON(object.item) : undefined };
+  },
+
+  toJSON(message: CreateAdminPopupAdResponse): unknown {
+    const obj: any = {};
+    if (message.item !== undefined) {
+      obj.item = AdminPopupAd.toJSON(message.item);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPopupAdResponse>, I>>(base?: I): CreateAdminPopupAdResponse {
+    return CreateAdminPopupAdResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPopupAdResponse>, I>>(object: I): CreateAdminPopupAdResponse {
+    const message = createBaseCreateAdminPopupAdResponse();
+    message.item = (object.item !== undefined && object.item !== null)
+      ? AdminPopupAd.fromPartial(object.item)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPopupAdRequest(): UpdateAdminPopupAdRequest {
+  return { id: "", userId: "", type: "", label: "", value: "", isActive: undefined, maxTriggersPerSession: undefined };
+}
+
+export const UpdateAdminPopupAdRequest: MessageFns<UpdateAdminPopupAdRequest> = {
+  encode(message: UpdateAdminPopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(26).string(message.type);
+    }
+    if (message.label !== undefined && message.label !== "") {
+      writer.uint32(34).string(message.label);
+    }
+    if (message.value !== undefined && message.value !== "") {
+      writer.uint32(42).string(message.value);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(48).bool(message.isActive);
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      writer.uint32(56).int32(message.maxTriggersPerSession);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.label = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.maxTriggersPerSession = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPopupAdRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      label: isSet(object.label) ? globalThis.String(object.label) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      maxTriggersPerSession: isSet(object.maxTriggersPerSession)
+        ? globalThis.Number(object.maxTriggersPerSession)
+        : isSet(object.max_triggers_per_session)
+        ? globalThis.Number(object.max_triggers_per_session)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdminPopupAdRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.label !== undefined && message.label !== "") {
+      obj.label = message.label;
+    }
+    if (message.value !== undefined && message.value !== "") {
+      obj.value = message.value;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      obj.maxTriggersPerSession = Math.round(message.maxTriggersPerSession);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPopupAdRequest>, I>>(base?: I): UpdateAdminPopupAdRequest {
+    return UpdateAdminPopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPopupAdRequest>, I>>(object: I): UpdateAdminPopupAdRequest {
+    const message = createBaseUpdateAdminPopupAdRequest();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.type = object.type ?? "";
+    message.label = object.label ?? "";
+    message.value = object.value ?? "";
+    message.isActive = object.isActive ?? undefined;
+    message.maxTriggersPerSession = object.maxTriggersPerSession ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPopupAdResponse(): UpdateAdminPopupAdResponse {
+  return { item: undefined };
+}
+
+export const UpdateAdminPopupAdResponse: MessageFns<UpdateAdminPopupAdResponse> = {
+  encode(message: UpdateAdminPopupAdResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.item !== undefined) {
+      AdminPopupAd.encode(message.item, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPopupAdResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPopupAdResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.item = AdminPopupAd.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPopupAdResponse {
+    return { item: isSet(object.item) ? AdminPopupAd.fromJSON(object.item) : undefined };
+  },
+
+  toJSON(message: UpdateAdminPopupAdResponse): unknown {
+    const obj: any = {};
+    if (message.item !== undefined) {
+      obj.item = AdminPopupAd.toJSON(message.item);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPopupAdResponse>, I>>(base?: I): UpdateAdminPopupAdResponse {
+    return UpdateAdminPopupAdResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPopupAdResponse>, I>>(object: I): UpdateAdminPopupAdResponse {
+    const message = createBaseUpdateAdminPopupAdResponse();
+    message.item = (object.item !== undefined && object.item !== null)
+      ? AdminPopupAd.fromPartial(object.item)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteAdminPopupAdRequest(): DeleteAdminPopupAdRequest {
+  return { id: "" };
+}
+
+export const DeleteAdminPopupAdRequest: MessageFns<DeleteAdminPopupAdRequest> = {
+  encode(message: DeleteAdminPopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdminPopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdminPopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdminPopupAdRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteAdminPopupAdRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdminPopupAdRequest>, I>>(base?: I): DeleteAdminPopupAdRequest {
+    return DeleteAdminPopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdminPopupAdRequest>, I>>(object: I): DeleteAdminPopupAdRequest {
+    const message = createBaseDeleteAdminPopupAdRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdminPlayerConfigsRequest(): ListAdminPlayerConfigsRequest {
+  return { page: 0, limit: 0, userId: undefined, search: undefined };
+}
+
+export const ListAdminPlayerConfigsRequest: MessageFns<ListAdminPlayerConfigsRequest> = {
+  encode(message: ListAdminPlayerConfigsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.userId !== undefined) {
+      writer.uint32(26).string(message.userId);
+    }
+    if (message.search !== undefined) {
+      writer.uint32(34).string(message.search);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPlayerConfigsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPlayerConfigsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.search = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminPlayerConfigsRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : undefined,
+      search: isSet(object.search) ? globalThis.String(object.search) : undefined,
+    };
+  },
+
+  toJSON(message: ListAdminPlayerConfigsRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.userId !== undefined) {
+      obj.userId = message.userId;
+    }
+    if (message.search !== undefined) {
+      obj.search = message.search;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPlayerConfigsRequest>, I>>(base?: I): ListAdminPlayerConfigsRequest {
+    return ListAdminPlayerConfigsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPlayerConfigsRequest>, I>>(
+    object: I,
+  ): ListAdminPlayerConfigsRequest {
+    const message = createBaseListAdminPlayerConfigsRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.userId = object.userId ?? undefined;
+    message.search = object.search ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminPlayerConfigsResponse(): ListAdminPlayerConfigsResponse {
+  return { configs: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListAdminPlayerConfigsResponse: MessageFns<ListAdminPlayerConfigsResponse> = {
+  encode(message: ListAdminPlayerConfigsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.configs !== undefined && message.configs.length !== 0) {
+      for (const v of message.configs) {
+        AdminPlayerConfig.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminPlayerConfigsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminPlayerConfigsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminPlayerConfig.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.configs!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminPlayerConfigsResponse {
+    return {
+      configs: globalThis.Array.isArray(object?.configs)
+        ? object.configs.map((e: any) => AdminPlayerConfig.fromJSON(e))
+        : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminPlayerConfigsResponse): unknown {
+    const obj: any = {};
+    if (message.configs?.length) {
+      obj.configs = message.configs.map((e) => AdminPlayerConfig.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminPlayerConfigsResponse>, I>>(base?: I): ListAdminPlayerConfigsResponse {
+    return ListAdminPlayerConfigsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminPlayerConfigsResponse>, I>>(
+    object: I,
+  ): ListAdminPlayerConfigsResponse {
+    const message = createBaseListAdminPlayerConfigsResponse();
+    message.configs = object.configs?.map((e) => AdminPlayerConfig.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminPlayerConfigRequest(): GetAdminPlayerConfigRequest {
+  return { id: "" };
+}
+
+export const GetAdminPlayerConfigRequest: MessageFns<GetAdminPlayerConfigRequest> = {
+  encode(message: GetAdminPlayerConfigRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminPlayerConfigRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminPlayerConfigRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminPlayerConfigRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminPlayerConfigRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminPlayerConfigRequest>, I>>(base?: I): GetAdminPlayerConfigRequest {
+    return GetAdminPlayerConfigRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminPlayerConfigRequest>, I>>(object: I): GetAdminPlayerConfigRequest {
+    const message = createBaseGetAdminPlayerConfigRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminPlayerConfigResponse(): GetAdminPlayerConfigResponse {
+  return { config: undefined };
+}
+
+export const GetAdminPlayerConfigResponse: MessageFns<GetAdminPlayerConfigResponse> = {
+  encode(message: GetAdminPlayerConfigResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.config !== undefined) {
+      AdminPlayerConfig.encode(message.config, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminPlayerConfigResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminPlayerConfigResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.config = AdminPlayerConfig.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminPlayerConfigResponse {
+    return { config: isSet(object.config) ? AdminPlayerConfig.fromJSON(object.config) : undefined };
+  },
+
+  toJSON(message: GetAdminPlayerConfigResponse): unknown {
+    const obj: any = {};
+    if (message.config !== undefined) {
+      obj.config = AdminPlayerConfig.toJSON(message.config);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminPlayerConfigResponse>, I>>(base?: I): GetAdminPlayerConfigResponse {
+    return GetAdminPlayerConfigResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminPlayerConfigResponse>, I>>(object: I): GetAdminPlayerConfigResponse {
+    const message = createBaseGetAdminPlayerConfigResponse();
+    message.config = (object.config !== undefined && object.config !== null)
+      ? AdminPlayerConfig.fromPartial(object.config)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminPlayerConfigRequest(): CreateAdminPlayerConfigRequest {
+  return {
+    userId: "",
+    name: "",
+    description: undefined,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: false,
+    pip: false,
+    airplay: false,
+    chromecast: false,
+    isActive: undefined,
+    isDefault: undefined,
+    encrytionM3u8: undefined,
+    logoUrl: undefined,
+  };
+}
+
+export const CreateAdminPlayerConfigRequest: MessageFns<CreateAdminPlayerConfigRequest> = {
+  encode(message: CreateAdminPlayerConfigRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(10).string(message.userId);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      writer.uint32(32).bool(message.autoplay);
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      writer.uint32(40).bool(message.loop);
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      writer.uint32(48).bool(message.muted);
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      writer.uint32(56).bool(message.showControls);
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      writer.uint32(64).bool(message.pip);
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      writer.uint32(72).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      writer.uint32(80).bool(message.chromecast);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(88).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(96).bool(message.isDefault);
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      writer.uint32(104).bool(message.encrytionM3u8);
+    }
+    if (message.logoUrl !== undefined) {
+      writer.uint32(114).string(message.logoUrl);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPlayerConfigRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPlayerConfigRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 13: {
+          if (tag !== 104) {
+            break;
+          }
+
+          message.encrytionM3u8 = reader.bool();
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.logoUrl = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPlayerConfigRequest {
+    return {
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : false,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : false,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : false,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : false,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : false,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : false,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : false,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+      encrytionM3u8: isSet(object.encrytionM3u8)
+        ? globalThis.Boolean(object.encrytionM3u8)
+        : isSet(object.encrytion_m3u8)
+        ? globalThis.Boolean(object.encrytion_m3u8)
+        : undefined,
+      logoUrl: isSet(object.logoUrl)
+        ? globalThis.String(object.logoUrl)
+        : isSet(object.logo_url)
+        ? globalThis.String(object.logo_url)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminPlayerConfigRequest): unknown {
+    const obj: any = {};
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      obj.encrytionM3u8 = message.encrytionM3u8;
+    }
+    if (message.logoUrl !== undefined) {
+      obj.logoUrl = message.logoUrl;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPlayerConfigRequest>, I>>(base?: I): CreateAdminPlayerConfigRequest {
+    return CreateAdminPlayerConfigRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPlayerConfigRequest>, I>>(
+    object: I,
+  ): CreateAdminPlayerConfigRequest {
+    const message = createBaseCreateAdminPlayerConfigRequest();
+    message.userId = object.userId ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.autoplay = object.autoplay ?? false;
+    message.loop = object.loop ?? false;
+    message.muted = object.muted ?? false;
+    message.showControls = object.showControls ?? false;
+    message.pip = object.pip ?? false;
+    message.airplay = object.airplay ?? false;
+    message.chromecast = object.chromecast ?? false;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    message.encrytionM3u8 = object.encrytionM3u8 ?? undefined;
+    message.logoUrl = object.logoUrl ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminPlayerConfigResponse(): CreateAdminPlayerConfigResponse {
+  return { config: undefined };
+}
+
+export const CreateAdminPlayerConfigResponse: MessageFns<CreateAdminPlayerConfigResponse> = {
+  encode(message: CreateAdminPlayerConfigResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.config !== undefined) {
+      AdminPlayerConfig.encode(message.config, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminPlayerConfigResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminPlayerConfigResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.config = AdminPlayerConfig.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminPlayerConfigResponse {
+    return { config: isSet(object.config) ? AdminPlayerConfig.fromJSON(object.config) : undefined };
+  },
+
+  toJSON(message: CreateAdminPlayerConfigResponse): unknown {
+    const obj: any = {};
+    if (message.config !== undefined) {
+      obj.config = AdminPlayerConfig.toJSON(message.config);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminPlayerConfigResponse>, I>>(base?: I): CreateAdminPlayerConfigResponse {
+    return CreateAdminPlayerConfigResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminPlayerConfigResponse>, I>>(
+    object: I,
+  ): CreateAdminPlayerConfigResponse {
+    const message = createBaseCreateAdminPlayerConfigResponse();
+    message.config = (object.config !== undefined && object.config !== null)
+      ? AdminPlayerConfig.fromPartial(object.config)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPlayerConfigRequest(): UpdateAdminPlayerConfigRequest {
+  return {
+    id: "",
+    userId: "",
+    name: "",
+    description: undefined,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: false,
+    pip: false,
+    airplay: false,
+    chromecast: false,
+    isActive: undefined,
+    isDefault: undefined,
+    encrytionM3u8: undefined,
+    logoUrl: undefined,
+  };
+}
+
+export const UpdateAdminPlayerConfigRequest: MessageFns<UpdateAdminPlayerConfigRequest> = {
+  encode(message: UpdateAdminPlayerConfigRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(26).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(34).string(message.description);
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      writer.uint32(40).bool(message.autoplay);
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      writer.uint32(48).bool(message.loop);
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      writer.uint32(56).bool(message.muted);
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      writer.uint32(64).bool(message.showControls);
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      writer.uint32(72).bool(message.pip);
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      writer.uint32(80).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      writer.uint32(88).bool(message.chromecast);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(96).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(104).bool(message.isDefault);
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      writer.uint32(112).bool(message.encrytionM3u8);
+    }
+    if (message.logoUrl !== undefined) {
+      writer.uint32(122).string(message.logoUrl);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPlayerConfigRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPlayerConfigRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 13: {
+          if (tag !== 104) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 14: {
+          if (tag !== 112) {
+            break;
+          }
+
+          message.encrytionM3u8 = reader.bool();
+          continue;
+        }
+        case 15: {
+          if (tag !== 122) {
+            break;
+          }
+
+          message.logoUrl = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPlayerConfigRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : false,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : false,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : false,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : false,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : false,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : false,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : false,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+      encrytionM3u8: isSet(object.encrytionM3u8)
+        ? globalThis.Boolean(object.encrytionM3u8)
+        : isSet(object.encrytion_m3u8)
+        ? globalThis.Boolean(object.encrytion_m3u8)
+        : undefined,
+      logoUrl: isSet(object.logoUrl)
+        ? globalThis.String(object.logoUrl)
+        : isSet(object.logo_url)
+        ? globalThis.String(object.logo_url)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdminPlayerConfigRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      obj.encrytionM3u8 = message.encrytionM3u8;
+    }
+    if (message.logoUrl !== undefined) {
+      obj.logoUrl = message.logoUrl;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPlayerConfigRequest>, I>>(base?: I): UpdateAdminPlayerConfigRequest {
+    return UpdateAdminPlayerConfigRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPlayerConfigRequest>, I>>(
+    object: I,
+  ): UpdateAdminPlayerConfigRequest {
+    const message = createBaseUpdateAdminPlayerConfigRequest();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.autoplay = object.autoplay ?? false;
+    message.loop = object.loop ?? false;
+    message.muted = object.muted ?? false;
+    message.showControls = object.showControls ?? false;
+    message.pip = object.pip ?? false;
+    message.airplay = object.airplay ?? false;
+    message.chromecast = object.chromecast ?? false;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    message.encrytionM3u8 = object.encrytionM3u8 ?? undefined;
+    message.logoUrl = object.logoUrl ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdminPlayerConfigResponse(): UpdateAdminPlayerConfigResponse {
+  return { config: undefined };
+}
+
+export const UpdateAdminPlayerConfigResponse: MessageFns<UpdateAdminPlayerConfigResponse> = {
+  encode(message: UpdateAdminPlayerConfigResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.config !== undefined) {
+      AdminPlayerConfig.encode(message.config, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminPlayerConfigResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminPlayerConfigResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.config = AdminPlayerConfig.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminPlayerConfigResponse {
+    return { config: isSet(object.config) ? AdminPlayerConfig.fromJSON(object.config) : undefined };
+  },
+
+  toJSON(message: UpdateAdminPlayerConfigResponse): unknown {
+    const obj: any = {};
+    if (message.config !== undefined) {
+      obj.config = AdminPlayerConfig.toJSON(message.config);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminPlayerConfigResponse>, I>>(base?: I): UpdateAdminPlayerConfigResponse {
+    return UpdateAdminPlayerConfigResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminPlayerConfigResponse>, I>>(
+    object: I,
+  ): UpdateAdminPlayerConfigResponse {
+    const message = createBaseUpdateAdminPlayerConfigResponse();
+    message.config = (object.config !== undefined && object.config !== null)
+      ? AdminPlayerConfig.fromPartial(object.config)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteAdminPlayerConfigRequest(): DeleteAdminPlayerConfigRequest {
+  return { id: "" };
+}
+
+export const DeleteAdminPlayerConfigRequest: MessageFns<DeleteAdminPlayerConfigRequest> = {
+  encode(message: DeleteAdminPlayerConfigRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdminPlayerConfigRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdminPlayerConfigRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdminPlayerConfigRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteAdminPlayerConfigRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdminPlayerConfigRequest>, I>>(base?: I): DeleteAdminPlayerConfigRequest {
+    return DeleteAdminPlayerConfigRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdminPlayerConfigRequest>, I>>(
+    object: I,
+  ): DeleteAdminPlayerConfigRequest {
+    const message = createBaseDeleteAdminPlayerConfigRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdminJobsRequest(): ListAdminJobsRequest {
+  return { cursor: undefined, pageSize: 0, offset: 0, limit: 0, agentId: undefined };
+}
+
+export const ListAdminJobsRequest: MessageFns<ListAdminJobsRequest> = {
+  encode(message: ListAdminJobsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.cursor !== undefined) {
+      writer.uint32(34).string(message.cursor);
+    }
+    if (message.pageSize !== undefined && message.pageSize !== 0) {
+      writer.uint32(40).int32(message.pageSize);
+    }
+    if (message.offset !== undefined && message.offset !== 0) {
+      writer.uint32(8).int32(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.agentId !== undefined) {
+      writer.uint32(26).string(message.agentId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminJobsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminJobsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.cursor = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.pageSize = reader.int32();
+          continue;
+        }
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.offset = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.agentId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminJobsRequest {
+    return {
+      cursor: isSet(object.cursor) ? globalThis.String(object.cursor) : undefined,
+      pageSize: isSet(object.pageSize)
+        ? globalThis.Number(object.pageSize)
+        : isSet(object.page_size)
+        ? globalThis.Number(object.page_size)
+        : 0,
+      offset: isSet(object.offset) ? globalThis.Number(object.offset) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      agentId: isSet(object.agentId)
+        ? globalThis.String(object.agentId)
+        : isSet(object.agent_id)
+        ? globalThis.String(object.agent_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: ListAdminJobsRequest): unknown {
+    const obj: any = {};
+    if (message.cursor !== undefined) {
+      obj.cursor = message.cursor;
+    }
+    if (message.pageSize !== undefined && message.pageSize !== 0) {
+      obj.pageSize = Math.round(message.pageSize);
+    }
+    if (message.offset !== undefined && message.offset !== 0) {
+      obj.offset = Math.round(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.agentId !== undefined) {
+      obj.agentId = message.agentId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminJobsRequest>, I>>(base?: I): ListAdminJobsRequest {
+    return ListAdminJobsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminJobsRequest>, I>>(object: I): ListAdminJobsRequest {
+    const message = createBaseListAdminJobsRequest();
+    message.cursor = object.cursor ?? undefined;
+    message.pageSize = object.pageSize ?? 0;
+    message.offset = object.offset ?? 0;
+    message.limit = object.limit ?? 0;
+    message.agentId = object.agentId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminJobsResponse(): ListAdminJobsResponse {
+  return { jobs: [], total: 0, offset: 0, limit: 0, hasMore: false, nextCursor: undefined, pageSize: 0 };
+}
+
+export const ListAdminJobsResponse: MessageFns<ListAdminJobsResponse> = {
+  encode(message: ListAdminJobsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.jobs !== undefined && message.jobs.length !== 0) {
+      for (const v of message.jobs) {
+        AdminJob.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.offset !== undefined && message.offset !== 0) {
+      writer.uint32(24).int32(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    if (message.hasMore !== undefined && message.hasMore !== false) {
+      writer.uint32(40).bool(message.hasMore);
+    }
+    if (message.nextCursor !== undefined) {
+      writer.uint32(50).string(message.nextCursor);
+    }
+    if (message.pageSize !== undefined && message.pageSize !== 0) {
+      writer.uint32(56).int32(message.pageSize);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminJobsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminJobsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminJob.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.jobs!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.offset = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.hasMore = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.nextCursor = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.pageSize = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminJobsResponse {
+    return {
+      jobs: globalThis.Array.isArray(object?.jobs) ? object.jobs.map((e: any) => AdminJob.fromJSON(e)) : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      offset: isSet(object.offset) ? globalThis.Number(object.offset) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      hasMore: isSet(object.hasMore)
+        ? globalThis.Boolean(object.hasMore)
+        : isSet(object.has_more)
+        ? globalThis.Boolean(object.has_more)
+        : false,
+      nextCursor: isSet(object.nextCursor)
+        ? globalThis.String(object.nextCursor)
+        : isSet(object.next_cursor)
+        ? globalThis.String(object.next_cursor)
+        : undefined,
+      pageSize: isSet(object.pageSize)
+        ? globalThis.Number(object.pageSize)
+        : isSet(object.page_size)
+        ? globalThis.Number(object.page_size)
+        : 0,
+    };
+  },
+
+  toJSON(message: ListAdminJobsResponse): unknown {
+    const obj: any = {};
+    if (message.jobs?.length) {
+      obj.jobs = message.jobs.map((e) => AdminJob.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.offset !== undefined && message.offset !== 0) {
+      obj.offset = Math.round(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.hasMore !== undefined && message.hasMore !== false) {
+      obj.hasMore = message.hasMore;
+    }
+    if (message.nextCursor !== undefined) {
+      obj.nextCursor = message.nextCursor;
+    }
+    if (message.pageSize !== undefined && message.pageSize !== 0) {
+      obj.pageSize = Math.round(message.pageSize);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminJobsResponse>, I>>(base?: I): ListAdminJobsResponse {
+    return ListAdminJobsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminJobsResponse>, I>>(object: I): ListAdminJobsResponse {
+    const message = createBaseListAdminJobsResponse();
+    message.jobs = object.jobs?.map((e) => AdminJob.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.offset = object.offset ?? 0;
+    message.limit = object.limit ?? 0;
+    message.hasMore = object.hasMore ?? false;
+    message.nextCursor = object.nextCursor ?? undefined;
+    message.pageSize = object.pageSize ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminJobRequest(): GetAdminJobRequest {
+  return { id: "" };
+}
+
+export const GetAdminJobRequest: MessageFns<GetAdminJobRequest> = {
+  encode(message: GetAdminJobRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminJobRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminJobRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminJobRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminJobRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminJobRequest>, I>>(base?: I): GetAdminJobRequest {
+    return GetAdminJobRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminJobRequest>, I>>(object: I): GetAdminJobRequest {
+    const message = createBaseGetAdminJobRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminJobResponse(): GetAdminJobResponse {
+  return { job: undefined };
+}
+
+export const GetAdminJobResponse: MessageFns<GetAdminJobResponse> = {
+  encode(message: GetAdminJobResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.job !== undefined) {
+      AdminJob.encode(message.job, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminJobResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminJobResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.job = AdminJob.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminJobResponse {
+    return { job: isSet(object.job) ? AdminJob.fromJSON(object.job) : undefined };
+  },
+
+  toJSON(message: GetAdminJobResponse): unknown {
+    const obj: any = {};
+    if (message.job !== undefined) {
+      obj.job = AdminJob.toJSON(message.job);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminJobResponse>, I>>(base?: I): GetAdminJobResponse {
+    return GetAdminJobResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminJobResponse>, I>>(object: I): GetAdminJobResponse {
+    const message = createBaseGetAdminJobResponse();
+    message.job = (object.job !== undefined && object.job !== null) ? AdminJob.fromPartial(object.job) : undefined;
+    return message;
+  },
+};
+
+function createBaseGetAdminJobLogsRequest(): GetAdminJobLogsRequest {
+  return { id: "" };
+}
+
+export const GetAdminJobLogsRequest: MessageFns<GetAdminJobLogsRequest> = {
+  encode(message: GetAdminJobLogsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminJobLogsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminJobLogsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminJobLogsRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminJobLogsRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminJobLogsRequest>, I>>(base?: I): GetAdminJobLogsRequest {
+    return GetAdminJobLogsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminJobLogsRequest>, I>>(object: I): GetAdminJobLogsRequest {
+    const message = createBaseGetAdminJobLogsRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminJobLogsResponse(): GetAdminJobLogsResponse {
+  return { logs: "" };
+}
+
+export const GetAdminJobLogsResponse: MessageFns<GetAdminJobLogsResponse> = {
+  encode(message: GetAdminJobLogsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.logs !== undefined && message.logs !== "") {
+      writer.uint32(10).string(message.logs);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminJobLogsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminJobLogsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.logs = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminJobLogsResponse {
+    return { logs: isSet(object.logs) ? globalThis.String(object.logs) : "" };
+  },
+
+  toJSON(message: GetAdminJobLogsResponse): unknown {
+    const obj: any = {};
+    if (message.logs !== undefined && message.logs !== "") {
+      obj.logs = message.logs;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminJobLogsResponse>, I>>(base?: I): GetAdminJobLogsResponse {
+    return GetAdminJobLogsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminJobLogsResponse>, I>>(object: I): GetAdminJobLogsResponse {
+    const message = createBaseGetAdminJobLogsResponse();
+    message.logs = object.logs ?? "";
+    return message;
+  },
+};
+
+function createBaseCreateAdminJobRequest(): CreateAdminJobRequest {
+  return {
+    command: "",
+    image: undefined,
+    env: {},
+    priority: 0,
+    userId: undefined,
+    name: undefined,
+    timeLimit: 0,
+    videoId: undefined,
+  };
+}
+
+export const CreateAdminJobRequest: MessageFns<CreateAdminJobRequest> = {
+  encode(message: CreateAdminJobRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.command !== undefined && message.command !== "") {
+      writer.uint32(10).string(message.command);
+    }
+    if (message.image !== undefined) {
+      writer.uint32(18).string(message.image);
+    }
+    globalThis.Object.entries(message.env || {}).forEach(([key, value]: [string, string]) => {
+      CreateAdminJobRequest_EnvEntry.encode({ key: key as any, value }, writer.uint32(26).fork()).join();
+    });
+    if (message.priority !== undefined && message.priority !== 0) {
+      writer.uint32(32).int32(message.priority);
+    }
+    if (message.userId !== undefined) {
+      writer.uint32(42).string(message.userId);
+    }
+    if (message.name !== undefined) {
+      writer.uint32(50).string(message.name);
+    }
+    if (message.timeLimit !== undefined && message.timeLimit !== 0) {
+      writer.uint32(56).int64(message.timeLimit);
+    }
+    if (message.videoId !== undefined) {
+      writer.uint32(66).string(message.videoId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminJobRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminJobRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.command = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.image = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          const entry3 = CreateAdminJobRequest_EnvEntry.decode(reader, reader.uint32());
+          if (entry3.value !== undefined) {
+            message.env![entry3.key] = entry3.value;
+          }
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.priority = reader.int32();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.timeLimit = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.videoId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminJobRequest {
+    return {
+      command: isSet(object.command) ? globalThis.String(object.command) : "",
+      image: isSet(object.image) ? globalThis.String(object.image) : undefined,
+      env: isObject(object.env)
+        ? (globalThis.Object.entries(object.env) as [string, any][]).reduce(
+          (acc: { [key: string]: string }, [key, value]: [string, any]) => {
+            acc[key] = globalThis.String(value);
+            return acc;
+          },
+          {},
+        )
+        : {},
+      priority: isSet(object.priority) ? globalThis.Number(object.priority) : 0,
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : undefined,
+      name: isSet(object.name) ? globalThis.String(object.name) : undefined,
+      timeLimit: isSet(object.timeLimit)
+        ? globalThis.Number(object.timeLimit)
+        : isSet(object.time_limit)
+        ? globalThis.Number(object.time_limit)
+        : 0,
+      videoId: isSet(object.videoId)
+        ? globalThis.String(object.videoId)
+        : isSet(object.video_id)
+        ? globalThis.String(object.video_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdminJobRequest): unknown {
+    const obj: any = {};
+    if (message.command !== undefined && message.command !== "") {
+      obj.command = message.command;
+    }
+    if (message.image !== undefined) {
+      obj.image = message.image;
+    }
+    if (message.env) {
+      const entries = globalThis.Object.entries(message.env) as [string, string][];
+      if (entries.length > 0) {
+        obj.env = {};
+        entries.forEach(([k, v]) => {
+          obj.env[k] = v;
+        });
+      }
+    }
+    if (message.priority !== undefined && message.priority !== 0) {
+      obj.priority = Math.round(message.priority);
+    }
+    if (message.userId !== undefined) {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined) {
+      obj.name = message.name;
+    }
+    if (message.timeLimit !== undefined && message.timeLimit !== 0) {
+      obj.timeLimit = Math.round(message.timeLimit);
+    }
+    if (message.videoId !== undefined) {
+      obj.videoId = message.videoId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminJobRequest>, I>>(base?: I): CreateAdminJobRequest {
+    return CreateAdminJobRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminJobRequest>, I>>(object: I): CreateAdminJobRequest {
+    const message = createBaseCreateAdminJobRequest();
+    message.command = object.command ?? "";
+    message.image = object.image ?? undefined;
+    message.env = (globalThis.Object.entries(object.env ?? {}) as [string, string][]).reduce(
+      (acc: { [key: string]: string }, [key, value]: [string, string]) => {
+        if (value !== undefined) {
+          acc[key] = globalThis.String(value);
+        }
+        return acc;
+      },
+      {},
+    );
+    message.priority = object.priority ?? 0;
+    message.userId = object.userId ?? undefined;
+    message.name = object.name ?? undefined;
+    message.timeLimit = object.timeLimit ?? 0;
+    message.videoId = object.videoId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdminJobRequest_EnvEntry(): CreateAdminJobRequest_EnvEntry {
+  return { key: "", value: "" };
+}
+
+export const CreateAdminJobRequest_EnvEntry: MessageFns<CreateAdminJobRequest_EnvEntry> = {
+  encode(message: CreateAdminJobRequest_EnvEntry, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.key !== "") {
+      writer.uint32(10).string(message.key);
+    }
+    if (message.value !== "") {
+      writer.uint32(18).string(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminJobRequest_EnvEntry {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminJobRequest_EnvEntry();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.key = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminJobRequest_EnvEntry {
+    return {
+      key: isSet(object.key) ? globalThis.String(object.key) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+    };
+  },
+
+  toJSON(message: CreateAdminJobRequest_EnvEntry): unknown {
+    const obj: any = {};
+    if (message.key !== "") {
+      obj.key = message.key;
+    }
+    if (message.value !== "") {
+      obj.value = message.value;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminJobRequest_EnvEntry>, I>>(base?: I): CreateAdminJobRequest_EnvEntry {
+    return CreateAdminJobRequest_EnvEntry.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminJobRequest_EnvEntry>, I>>(
+    object: I,
+  ): CreateAdminJobRequest_EnvEntry {
+    const message = createBaseCreateAdminJobRequest_EnvEntry();
+    message.key = object.key ?? "";
+    message.value = object.value ?? "";
+    return message;
+  },
+};
+
+function createBaseCreateAdminJobResponse(): CreateAdminJobResponse {
+  return { job: undefined };
+}
+
+export const CreateAdminJobResponse: MessageFns<CreateAdminJobResponse> = {
+  encode(message: CreateAdminJobResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.job !== undefined) {
+      AdminJob.encode(message.job, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdminJobResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdminJobResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.job = AdminJob.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdminJobResponse {
+    return { job: isSet(object.job) ? AdminJob.fromJSON(object.job) : undefined };
+  },
+
+  toJSON(message: CreateAdminJobResponse): unknown {
+    const obj: any = {};
+    if (message.job !== undefined) {
+      obj.job = AdminJob.toJSON(message.job);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdminJobResponse>, I>>(base?: I): CreateAdminJobResponse {
+    return CreateAdminJobResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdminJobResponse>, I>>(object: I): CreateAdminJobResponse {
+    const message = createBaseCreateAdminJobResponse();
+    message.job = (object.job !== undefined && object.job !== null) ? AdminJob.fromPartial(object.job) : undefined;
+    return message;
+  },
+};
+
+function createBaseCancelAdminJobRequest(): CancelAdminJobRequest {
+  return { id: "" };
+}
+
+export const CancelAdminJobRequest: MessageFns<CancelAdminJobRequest> = {
+  encode(message: CancelAdminJobRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CancelAdminJobRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCancelAdminJobRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CancelAdminJobRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: CancelAdminJobRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CancelAdminJobRequest>, I>>(base?: I): CancelAdminJobRequest {
+    return CancelAdminJobRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CancelAdminJobRequest>, I>>(object: I): CancelAdminJobRequest {
+    const message = createBaseCancelAdminJobRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseCancelAdminJobResponse(): CancelAdminJobResponse {
+  return { status: "", jobId: "" };
+}
+
+export const CancelAdminJobResponse: MessageFns<CancelAdminJobResponse> = {
+  encode(message: CancelAdminJobResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(10).string(message.status);
+    }
+    if (message.jobId !== undefined && message.jobId !== "") {
+      writer.uint32(18).string(message.jobId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CancelAdminJobResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCancelAdminJobResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.jobId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CancelAdminJobResponse {
+    return {
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      jobId: isSet(object.jobId)
+        ? globalThis.String(object.jobId)
+        : isSet(object.job_id)
+        ? globalThis.String(object.job_id)
+        : "",
+    };
+  },
+
+  toJSON(message: CancelAdminJobResponse): unknown {
+    const obj: any = {};
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.jobId !== undefined && message.jobId !== "") {
+      obj.jobId = message.jobId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CancelAdminJobResponse>, I>>(base?: I): CancelAdminJobResponse {
+    return CancelAdminJobResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CancelAdminJobResponse>, I>>(object: I): CancelAdminJobResponse {
+    const message = createBaseCancelAdminJobResponse();
+    message.status = object.status ?? "";
+    message.jobId = object.jobId ?? "";
+    return message;
+  },
+};
+
+function createBaseRetryAdminJobRequest(): RetryAdminJobRequest {
+  return { id: "" };
+}
+
+export const RetryAdminJobRequest: MessageFns<RetryAdminJobRequest> = {
+  encode(message: RetryAdminJobRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RetryAdminJobRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRetryAdminJobRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RetryAdminJobRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: RetryAdminJobRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RetryAdminJobRequest>, I>>(base?: I): RetryAdminJobRequest {
+    return RetryAdminJobRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RetryAdminJobRequest>, I>>(object: I): RetryAdminJobRequest {
+    const message = createBaseRetryAdminJobRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseRetryAdminJobResponse(): RetryAdminJobResponse {
+  return { job: undefined };
+}
+
+export const RetryAdminJobResponse: MessageFns<RetryAdminJobResponse> = {
+  encode(message: RetryAdminJobResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.job !== undefined) {
+      AdminJob.encode(message.job, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RetryAdminJobResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRetryAdminJobResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.job = AdminJob.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RetryAdminJobResponse {
+    return { job: isSet(object.job) ? AdminJob.fromJSON(object.job) : undefined };
+  },
+
+  toJSON(message: RetryAdminJobResponse): unknown {
+    const obj: any = {};
+    if (message.job !== undefined) {
+      obj.job = AdminJob.toJSON(message.job);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RetryAdminJobResponse>, I>>(base?: I): RetryAdminJobResponse {
+    return RetryAdminJobResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RetryAdminJobResponse>, I>>(object: I): RetryAdminJobResponse {
+    const message = createBaseRetryAdminJobResponse();
+    message.job = (object.job !== undefined && object.job !== null) ? AdminJob.fromPartial(object.job) : undefined;
+    return message;
+  },
+};
+
+function createBaseListAdminDlqJobsRequest(): ListAdminDlqJobsRequest {
+  return { offset: 0, limit: 0 };
+}
+
+export const ListAdminDlqJobsRequest: MessageFns<ListAdminDlqJobsRequest> = {
+  encode(message: ListAdminDlqJobsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.offset !== undefined && message.offset !== 0) {
+      writer.uint32(8).int32(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminDlqJobsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminDlqJobsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.offset = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminDlqJobsRequest {
+    return {
+      offset: isSet(object.offset) ? globalThis.Number(object.offset) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminDlqJobsRequest): unknown {
+    const obj: any = {};
+    if (message.offset !== undefined && message.offset !== 0) {
+      obj.offset = Math.round(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminDlqJobsRequest>, I>>(base?: I): ListAdminDlqJobsRequest {
+    return ListAdminDlqJobsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminDlqJobsRequest>, I>>(object: I): ListAdminDlqJobsRequest {
+    const message = createBaseListAdminDlqJobsRequest();
+    message.offset = object.offset ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseListAdminDlqJobsResponse(): ListAdminDlqJobsResponse {
+  return { items: [], total: 0, offset: 0, limit: 0 };
+}
+
+export const ListAdminDlqJobsResponse: MessageFns<ListAdminDlqJobsResponse> = {
+  encode(message: ListAdminDlqJobsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.items !== undefined && message.items.length !== 0) {
+      for (const v of message.items) {
+        AdminDlqEntry.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.offset !== undefined && message.offset !== 0) {
+      writer.uint32(24).int32(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminDlqJobsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminDlqJobsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminDlqEntry.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.items!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.offset = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminDlqJobsResponse {
+    return {
+      items: globalThis.Array.isArray(object?.items) ? object.items.map((e: any) => AdminDlqEntry.fromJSON(e)) : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      offset: isSet(object.offset) ? globalThis.Number(object.offset) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListAdminDlqJobsResponse): unknown {
+    const obj: any = {};
+    if (message.items?.length) {
+      obj.items = message.items.map((e) => AdminDlqEntry.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.offset !== undefined && message.offset !== 0) {
+      obj.offset = Math.round(message.offset);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminDlqJobsResponse>, I>>(base?: I): ListAdminDlqJobsResponse {
+    return ListAdminDlqJobsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminDlqJobsResponse>, I>>(object: I): ListAdminDlqJobsResponse {
+    const message = createBaseListAdminDlqJobsResponse();
+    message.items = object.items?.map((e) => AdminDlqEntry.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.offset = object.offset ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetAdminDlqJobRequest(): GetAdminDlqJobRequest {
+  return { id: "" };
+}
+
+export const GetAdminDlqJobRequest: MessageFns<GetAdminDlqJobRequest> = {
+  encode(message: GetAdminDlqJobRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminDlqJobRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminDlqJobRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminDlqJobRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetAdminDlqJobRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminDlqJobRequest>, I>>(base?: I): GetAdminDlqJobRequest {
+    return GetAdminDlqJobRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminDlqJobRequest>, I>>(object: I): GetAdminDlqJobRequest {
+    const message = createBaseGetAdminDlqJobRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetAdminDlqJobResponse(): GetAdminDlqJobResponse {
+  return { item: undefined };
+}
+
+export const GetAdminDlqJobResponse: MessageFns<GetAdminDlqJobResponse> = {
+  encode(message: GetAdminDlqJobResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.item !== undefined) {
+      AdminDlqEntry.encode(message.item, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetAdminDlqJobResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetAdminDlqJobResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.item = AdminDlqEntry.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetAdminDlqJobResponse {
+    return { item: isSet(object.item) ? AdminDlqEntry.fromJSON(object.item) : undefined };
+  },
+
+  toJSON(message: GetAdminDlqJobResponse): unknown {
+    const obj: any = {};
+    if (message.item !== undefined) {
+      obj.item = AdminDlqEntry.toJSON(message.item);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetAdminDlqJobResponse>, I>>(base?: I): GetAdminDlqJobResponse {
+    return GetAdminDlqJobResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetAdminDlqJobResponse>, I>>(object: I): GetAdminDlqJobResponse {
+    const message = createBaseGetAdminDlqJobResponse();
+    message.item = (object.item !== undefined && object.item !== null)
+      ? AdminDlqEntry.fromPartial(object.item)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseRetryAdminDlqJobRequest(): RetryAdminDlqJobRequest {
+  return { id: "" };
+}
+
+export const RetryAdminDlqJobRequest: MessageFns<RetryAdminDlqJobRequest> = {
+  encode(message: RetryAdminDlqJobRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RetryAdminDlqJobRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRetryAdminDlqJobRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RetryAdminDlqJobRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: RetryAdminDlqJobRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RetryAdminDlqJobRequest>, I>>(base?: I): RetryAdminDlqJobRequest {
+    return RetryAdminDlqJobRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RetryAdminDlqJobRequest>, I>>(object: I): RetryAdminDlqJobRequest {
+    const message = createBaseRetryAdminDlqJobRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseRetryAdminDlqJobResponse(): RetryAdminDlqJobResponse {
+  return { job: undefined };
+}
+
+export const RetryAdminDlqJobResponse: MessageFns<RetryAdminDlqJobResponse> = {
+  encode(message: RetryAdminDlqJobResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.job !== undefined) {
+      AdminJob.encode(message.job, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RetryAdminDlqJobResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRetryAdminDlqJobResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.job = AdminJob.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RetryAdminDlqJobResponse {
+    return { job: isSet(object.job) ? AdminJob.fromJSON(object.job) : undefined };
+  },
+
+  toJSON(message: RetryAdminDlqJobResponse): unknown {
+    const obj: any = {};
+    if (message.job !== undefined) {
+      obj.job = AdminJob.toJSON(message.job);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RetryAdminDlqJobResponse>, I>>(base?: I): RetryAdminDlqJobResponse {
+    return RetryAdminDlqJobResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RetryAdminDlqJobResponse>, I>>(object: I): RetryAdminDlqJobResponse {
+    const message = createBaseRetryAdminDlqJobResponse();
+    message.job = (object.job !== undefined && object.job !== null) ? AdminJob.fromPartial(object.job) : undefined;
+    return message;
+  },
+};
+
+function createBaseRemoveAdminDlqJobRequest(): RemoveAdminDlqJobRequest {
+  return { id: "" };
+}
+
+export const RemoveAdminDlqJobRequest: MessageFns<RemoveAdminDlqJobRequest> = {
+  encode(message: RemoveAdminDlqJobRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RemoveAdminDlqJobRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRemoveAdminDlqJobRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RemoveAdminDlqJobRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: RemoveAdminDlqJobRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RemoveAdminDlqJobRequest>, I>>(base?: I): RemoveAdminDlqJobRequest {
+    return RemoveAdminDlqJobRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RemoveAdminDlqJobRequest>, I>>(object: I): RemoveAdminDlqJobRequest {
+    const message = createBaseRemoveAdminDlqJobRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseRemoveAdminDlqJobResponse(): RemoveAdminDlqJobResponse {
+  return { status: "", jobId: "" };
+}
+
+export const RemoveAdminDlqJobResponse: MessageFns<RemoveAdminDlqJobResponse> = {
+  encode(message: RemoveAdminDlqJobResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(10).string(message.status);
+    }
+    if (message.jobId !== undefined && message.jobId !== "") {
+      writer.uint32(18).string(message.jobId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RemoveAdminDlqJobResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRemoveAdminDlqJobResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.jobId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RemoveAdminDlqJobResponse {
+    return {
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      jobId: isSet(object.jobId)
+        ? globalThis.String(object.jobId)
+        : isSet(object.job_id)
+        ? globalThis.String(object.job_id)
+        : "",
+    };
+  },
+
+  toJSON(message: RemoveAdminDlqJobResponse): unknown {
+    const obj: any = {};
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.jobId !== undefined && message.jobId !== "") {
+      obj.jobId = message.jobId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RemoveAdminDlqJobResponse>, I>>(base?: I): RemoveAdminDlqJobResponse {
+    return RemoveAdminDlqJobResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RemoveAdminDlqJobResponse>, I>>(object: I): RemoveAdminDlqJobResponse {
+    const message = createBaseRemoveAdminDlqJobResponse();
+    message.status = object.status ?? "";
+    message.jobId = object.jobId ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdminAgentsRequest(): ListAdminAgentsRequest {
+  return {};
+}
+
+export const ListAdminAgentsRequest: MessageFns<ListAdminAgentsRequest> = {
+  encode(_: ListAdminAgentsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminAgentsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminAgentsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ListAdminAgentsRequest {
+    return {};
+  },
+
+  toJSON(_: ListAdminAgentsRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminAgentsRequest>, I>>(base?: I): ListAdminAgentsRequest {
+    return ListAdminAgentsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminAgentsRequest>, I>>(_: I): ListAdminAgentsRequest {
+    const message = createBaseListAdminAgentsRequest();
+    return message;
+  },
+};
+
+function createBaseListAdminAgentsResponse(): ListAdminAgentsResponse {
+  return { agents: [] };
+}
+
+export const ListAdminAgentsResponse: MessageFns<ListAdminAgentsResponse> = {
+  encode(message: ListAdminAgentsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.agents !== undefined && message.agents.length !== 0) {
+      for (const v of message.agents) {
+        AdminAgent.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdminAgentsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdminAgentsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdminAgent.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.agents!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdminAgentsResponse {
+    return {
+      agents: globalThis.Array.isArray(object?.agents) ? object.agents.map((e: any) => AdminAgent.fromJSON(e)) : [],
+    };
+  },
+
+  toJSON(message: ListAdminAgentsResponse): unknown {
+    const obj: any = {};
+    if (message.agents?.length) {
+      obj.agents = message.agents.map((e) => AdminAgent.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdminAgentsResponse>, I>>(base?: I): ListAdminAgentsResponse {
+    return ListAdminAgentsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdminAgentsResponse>, I>>(object: I): ListAdminAgentsResponse {
+    const message = createBaseListAdminAgentsResponse();
+    message.agents = object.agents?.map((e) => AdminAgent.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseRestartAdminAgentRequest(): RestartAdminAgentRequest {
+  return { id: "" };
+}
+
+export const RestartAdminAgentRequest: MessageFns<RestartAdminAgentRequest> = {
+  encode(message: RestartAdminAgentRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RestartAdminAgentRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRestartAdminAgentRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RestartAdminAgentRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: RestartAdminAgentRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RestartAdminAgentRequest>, I>>(base?: I): RestartAdminAgentRequest {
+    return RestartAdminAgentRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RestartAdminAgentRequest>, I>>(object: I): RestartAdminAgentRequest {
+    const message = createBaseRestartAdminAgentRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseUpdateAdminAgentRequest(): UpdateAdminAgentRequest {
+  return { id: "" };
+}
+
+export const UpdateAdminAgentRequest: MessageFns<UpdateAdminAgentRequest> = {
+  encode(message: UpdateAdminAgentRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdminAgentRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdminAgentRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdminAgentRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: UpdateAdminAgentRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdminAgentRequest>, I>>(base?: I): UpdateAdminAgentRequest {
+    return UpdateAdminAgentRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdminAgentRequest>, I>>(object: I): UpdateAdminAgentRequest {
+    const message = createBaseUpdateAdminAgentRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseAdminAgentCommandResponse(): AdminAgentCommandResponse {
+  return { status: "" };
+}
+
+export const AdminAgentCommandResponse: MessageFns<AdminAgentCommandResponse> = {
+  encode(message: AdminAgentCommandResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(10).string(message.status);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminAgentCommandResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminAgentCommandResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminAgentCommandResponse {
+    return { status: isSet(object.status) ? globalThis.String(object.status) : "" };
+  },
+
+  toJSON(message: AdminAgentCommandResponse): unknown {
+    const obj: any = {};
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminAgentCommandResponse>, I>>(base?: I): AdminAgentCommandResponse {
+    return AdminAgentCommandResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminAgentCommandResponse>, I>>(object: I): AdminAgentCommandResponse {
+    const message = createBaseAdminAgentCommandResponse();
+    message.status = object.status ?? "";
+    return message;
+  },
+};
+
+export type AdminService = typeof AdminService;
+export const AdminService = {
+  getAdminDashboard: {
+    path: "/stream.app.v1.Admin/GetAdminDashboard",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminDashboardRequest): Buffer =>
+      Buffer.from(GetAdminDashboardRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminDashboardRequest => GetAdminDashboardRequest.decode(value),
+    responseSerialize: (value: GetAdminDashboardResponse): Buffer =>
+      Buffer.from(GetAdminDashboardResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminDashboardResponse => GetAdminDashboardResponse.decode(value),
+  },
+  listAdminUsers: {
+    path: "/stream.app.v1.Admin/ListAdminUsers",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminUsersRequest): Buffer =>
+      Buffer.from(ListAdminUsersRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminUsersRequest => ListAdminUsersRequest.decode(value),
+    responseSerialize: (value: ListAdminUsersResponse): Buffer =>
+      Buffer.from(ListAdminUsersResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminUsersResponse => ListAdminUsersResponse.decode(value),
+  },
+  getAdminUser: {
+    path: "/stream.app.v1.Admin/GetAdminUser",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminUserRequest): Buffer => Buffer.from(GetAdminUserRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminUserRequest => GetAdminUserRequest.decode(value),
+    responseSerialize: (value: GetAdminUserResponse): Buffer =>
+      Buffer.from(GetAdminUserResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminUserResponse => GetAdminUserResponse.decode(value),
+  },
+  createAdminUser: {
+    path: "/stream.app.v1.Admin/CreateAdminUser",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminUserRequest): Buffer =>
+      Buffer.from(CreateAdminUserRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminUserRequest => CreateAdminUserRequest.decode(value),
+    responseSerialize: (value: CreateAdminUserResponse): Buffer =>
+      Buffer.from(CreateAdminUserResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminUserResponse => CreateAdminUserResponse.decode(value),
+  },
+  updateAdminUser: {
+    path: "/stream.app.v1.Admin/UpdateAdminUser",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminUserRequest): Buffer =>
+      Buffer.from(UpdateAdminUserRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminUserRequest => UpdateAdminUserRequest.decode(value),
+    responseSerialize: (value: UpdateAdminUserResponse): Buffer =>
+      Buffer.from(UpdateAdminUserResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminUserResponse => UpdateAdminUserResponse.decode(value),
+  },
+  updateAdminUserReferralSettings: {
+    path: "/stream.app.v1.Admin/UpdateAdminUserReferralSettings",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminUserReferralSettingsRequest): Buffer =>
+      Buffer.from(UpdateAdminUserReferralSettingsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminUserReferralSettingsRequest =>
+      UpdateAdminUserReferralSettingsRequest.decode(value),
+    responseSerialize: (value: UpdateAdminUserReferralSettingsResponse): Buffer =>
+      Buffer.from(UpdateAdminUserReferralSettingsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminUserReferralSettingsResponse =>
+      UpdateAdminUserReferralSettingsResponse.decode(value),
+  },
+  updateAdminUserRole: {
+    path: "/stream.app.v1.Admin/UpdateAdminUserRole",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminUserRoleRequest): Buffer =>
+      Buffer.from(UpdateAdminUserRoleRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminUserRoleRequest => UpdateAdminUserRoleRequest.decode(value),
+    responseSerialize: (value: UpdateAdminUserRoleResponse): Buffer =>
+      Buffer.from(UpdateAdminUserRoleResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminUserRoleResponse => UpdateAdminUserRoleResponse.decode(value),
+  },
+  deleteAdminUser: {
+    path: "/stream.app.v1.Admin/DeleteAdminUser",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteAdminUserRequest): Buffer =>
+      Buffer.from(DeleteAdminUserRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteAdminUserRequest => DeleteAdminUserRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  listAdminVideos: {
+    path: "/stream.app.v1.Admin/ListAdminVideos",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminVideosRequest): Buffer =>
+      Buffer.from(ListAdminVideosRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminVideosRequest => ListAdminVideosRequest.decode(value),
+    responseSerialize: (value: ListAdminVideosResponse): Buffer =>
+      Buffer.from(ListAdminVideosResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminVideosResponse => ListAdminVideosResponse.decode(value),
+  },
+  getAdminVideo: {
+    path: "/stream.app.v1.Admin/GetAdminVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminVideoRequest): Buffer => Buffer.from(GetAdminVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminVideoRequest => GetAdminVideoRequest.decode(value),
+    responseSerialize: (value: GetAdminVideoResponse): Buffer =>
+      Buffer.from(GetAdminVideoResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminVideoResponse => GetAdminVideoResponse.decode(value),
+  },
+  createAdminVideo: {
+    path: "/stream.app.v1.Admin/CreateAdminVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminVideoRequest): Buffer =>
+      Buffer.from(CreateAdminVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminVideoRequest => CreateAdminVideoRequest.decode(value),
+    responseSerialize: (value: CreateAdminVideoResponse): Buffer =>
+      Buffer.from(CreateAdminVideoResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminVideoResponse => CreateAdminVideoResponse.decode(value),
+  },
+  updateAdminVideo: {
+    path: "/stream.app.v1.Admin/UpdateAdminVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminVideoRequest): Buffer =>
+      Buffer.from(UpdateAdminVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminVideoRequest => UpdateAdminVideoRequest.decode(value),
+    responseSerialize: (value: UpdateAdminVideoResponse): Buffer =>
+      Buffer.from(UpdateAdminVideoResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminVideoResponse => UpdateAdminVideoResponse.decode(value),
+  },
+  deleteAdminVideo: {
+    path: "/stream.app.v1.Admin/DeleteAdminVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteAdminVideoRequest): Buffer =>
+      Buffer.from(DeleteAdminVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteAdminVideoRequest => DeleteAdminVideoRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  listAdminPayments: {
+    path: "/stream.app.v1.Admin/ListAdminPayments",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminPaymentsRequest): Buffer =>
+      Buffer.from(ListAdminPaymentsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminPaymentsRequest => ListAdminPaymentsRequest.decode(value),
+    responseSerialize: (value: ListAdminPaymentsResponse): Buffer =>
+      Buffer.from(ListAdminPaymentsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminPaymentsResponse => ListAdminPaymentsResponse.decode(value),
+  },
+  getAdminPayment: {
+    path: "/stream.app.v1.Admin/GetAdminPayment",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminPaymentRequest): Buffer =>
+      Buffer.from(GetAdminPaymentRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminPaymentRequest => GetAdminPaymentRequest.decode(value),
+    responseSerialize: (value: GetAdminPaymentResponse): Buffer =>
+      Buffer.from(GetAdminPaymentResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminPaymentResponse => GetAdminPaymentResponse.decode(value),
+  },
+  createAdminPayment: {
+    path: "/stream.app.v1.Admin/CreateAdminPayment",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminPaymentRequest): Buffer =>
+      Buffer.from(CreateAdminPaymentRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminPaymentRequest => CreateAdminPaymentRequest.decode(value),
+    responseSerialize: (value: CreateAdminPaymentResponse): Buffer =>
+      Buffer.from(CreateAdminPaymentResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminPaymentResponse => CreateAdminPaymentResponse.decode(value),
+  },
+  updateAdminPayment: {
+    path: "/stream.app.v1.Admin/UpdateAdminPayment",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminPaymentRequest): Buffer =>
+      Buffer.from(UpdateAdminPaymentRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminPaymentRequest => UpdateAdminPaymentRequest.decode(value),
+    responseSerialize: (value: UpdateAdminPaymentResponse): Buffer =>
+      Buffer.from(UpdateAdminPaymentResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminPaymentResponse => UpdateAdminPaymentResponse.decode(value),
+  },
+  listAdminPlans: {
+    path: "/stream.app.v1.Admin/ListAdminPlans",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminPlansRequest): Buffer =>
+      Buffer.from(ListAdminPlansRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminPlansRequest => ListAdminPlansRequest.decode(value),
+    responseSerialize: (value: ListAdminPlansResponse): Buffer =>
+      Buffer.from(ListAdminPlansResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminPlansResponse => ListAdminPlansResponse.decode(value),
+  },
+  createAdminPlan: {
+    path: "/stream.app.v1.Admin/CreateAdminPlan",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminPlanRequest): Buffer =>
+      Buffer.from(CreateAdminPlanRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminPlanRequest => CreateAdminPlanRequest.decode(value),
+    responseSerialize: (value: CreateAdminPlanResponse): Buffer =>
+      Buffer.from(CreateAdminPlanResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminPlanResponse => CreateAdminPlanResponse.decode(value),
+  },
+  updateAdminPlan: {
+    path: "/stream.app.v1.Admin/UpdateAdminPlan",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminPlanRequest): Buffer =>
+      Buffer.from(UpdateAdminPlanRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminPlanRequest => UpdateAdminPlanRequest.decode(value),
+    responseSerialize: (value: UpdateAdminPlanResponse): Buffer =>
+      Buffer.from(UpdateAdminPlanResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminPlanResponse => UpdateAdminPlanResponse.decode(value),
+  },
+  deleteAdminPlan: {
+    path: "/stream.app.v1.Admin/DeleteAdminPlan",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteAdminPlanRequest): Buffer =>
+      Buffer.from(DeleteAdminPlanRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteAdminPlanRequest => DeleteAdminPlanRequest.decode(value),
+    responseSerialize: (value: DeleteAdminPlanResponse): Buffer =>
+      Buffer.from(DeleteAdminPlanResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): DeleteAdminPlanResponse => DeleteAdminPlanResponse.decode(value),
+  },
+  listAdminAdTemplates: {
+    path: "/stream.app.v1.Admin/ListAdminAdTemplates",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminAdTemplatesRequest): Buffer =>
+      Buffer.from(ListAdminAdTemplatesRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminAdTemplatesRequest => ListAdminAdTemplatesRequest.decode(value),
+    responseSerialize: (value: ListAdminAdTemplatesResponse): Buffer =>
+      Buffer.from(ListAdminAdTemplatesResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminAdTemplatesResponse => ListAdminAdTemplatesResponse.decode(value),
+  },
+  getAdminAdTemplate: {
+    path: "/stream.app.v1.Admin/GetAdminAdTemplate",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminAdTemplateRequest): Buffer =>
+      Buffer.from(GetAdminAdTemplateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminAdTemplateRequest => GetAdminAdTemplateRequest.decode(value),
+    responseSerialize: (value: GetAdminAdTemplateResponse): Buffer =>
+      Buffer.from(GetAdminAdTemplateResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminAdTemplateResponse => GetAdminAdTemplateResponse.decode(value),
+  },
+  createAdminAdTemplate: {
+    path: "/stream.app.v1.Admin/CreateAdminAdTemplate",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminAdTemplateRequest): Buffer =>
+      Buffer.from(CreateAdminAdTemplateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminAdTemplateRequest => CreateAdminAdTemplateRequest.decode(value),
+    responseSerialize: (value: CreateAdminAdTemplateResponse): Buffer =>
+      Buffer.from(CreateAdminAdTemplateResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminAdTemplateResponse => CreateAdminAdTemplateResponse.decode(value),
+  },
+  updateAdminAdTemplate: {
+    path: "/stream.app.v1.Admin/UpdateAdminAdTemplate",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminAdTemplateRequest): Buffer =>
+      Buffer.from(UpdateAdminAdTemplateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminAdTemplateRequest => UpdateAdminAdTemplateRequest.decode(value),
+    responseSerialize: (value: UpdateAdminAdTemplateResponse): Buffer =>
+      Buffer.from(UpdateAdminAdTemplateResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminAdTemplateResponse => UpdateAdminAdTemplateResponse.decode(value),
+  },
+  deleteAdminAdTemplate: {
+    path: "/stream.app.v1.Admin/DeleteAdminAdTemplate",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteAdminAdTemplateRequest): Buffer =>
+      Buffer.from(DeleteAdminAdTemplateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteAdminAdTemplateRequest => DeleteAdminAdTemplateRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  listAdminPopupAds: {
+    path: "/stream.app.v1.Admin/ListAdminPopupAds",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminPopupAdsRequest): Buffer =>
+      Buffer.from(ListAdminPopupAdsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminPopupAdsRequest => ListAdminPopupAdsRequest.decode(value),
+    responseSerialize: (value: ListAdminPopupAdsResponse): Buffer =>
+      Buffer.from(ListAdminPopupAdsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminPopupAdsResponse => ListAdminPopupAdsResponse.decode(value),
+  },
+  getAdminPopupAd: {
+    path: "/stream.app.v1.Admin/GetAdminPopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminPopupAdRequest): Buffer =>
+      Buffer.from(GetAdminPopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminPopupAdRequest => GetAdminPopupAdRequest.decode(value),
+    responseSerialize: (value: GetAdminPopupAdResponse): Buffer =>
+      Buffer.from(GetAdminPopupAdResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminPopupAdResponse => GetAdminPopupAdResponse.decode(value),
+  },
+  createAdminPopupAd: {
+    path: "/stream.app.v1.Admin/CreateAdminPopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminPopupAdRequest): Buffer =>
+      Buffer.from(CreateAdminPopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminPopupAdRequest => CreateAdminPopupAdRequest.decode(value),
+    responseSerialize: (value: CreateAdminPopupAdResponse): Buffer =>
+      Buffer.from(CreateAdminPopupAdResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminPopupAdResponse => CreateAdminPopupAdResponse.decode(value),
+  },
+  updateAdminPopupAd: {
+    path: "/stream.app.v1.Admin/UpdateAdminPopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminPopupAdRequest): Buffer =>
+      Buffer.from(UpdateAdminPopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminPopupAdRequest => UpdateAdminPopupAdRequest.decode(value),
+    responseSerialize: (value: UpdateAdminPopupAdResponse): Buffer =>
+      Buffer.from(UpdateAdminPopupAdResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminPopupAdResponse => UpdateAdminPopupAdResponse.decode(value),
+  },
+  deleteAdminPopupAd: {
+    path: "/stream.app.v1.Admin/DeleteAdminPopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteAdminPopupAdRequest): Buffer =>
+      Buffer.from(DeleteAdminPopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteAdminPopupAdRequest => DeleteAdminPopupAdRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  listAdminPlayerConfigs: {
+    path: "/stream.app.v1.Admin/ListAdminPlayerConfigs",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminPlayerConfigsRequest): Buffer =>
+      Buffer.from(ListAdminPlayerConfigsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminPlayerConfigsRequest => ListAdminPlayerConfigsRequest.decode(value),
+    responseSerialize: (value: ListAdminPlayerConfigsResponse): Buffer =>
+      Buffer.from(ListAdminPlayerConfigsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminPlayerConfigsResponse =>
+      ListAdminPlayerConfigsResponse.decode(value),
+  },
+  getAdminPlayerConfig: {
+    path: "/stream.app.v1.Admin/GetAdminPlayerConfig",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminPlayerConfigRequest): Buffer =>
+      Buffer.from(GetAdminPlayerConfigRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminPlayerConfigRequest => GetAdminPlayerConfigRequest.decode(value),
+    responseSerialize: (value: GetAdminPlayerConfigResponse): Buffer =>
+      Buffer.from(GetAdminPlayerConfigResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminPlayerConfigResponse => GetAdminPlayerConfigResponse.decode(value),
+  },
+  createAdminPlayerConfig: {
+    path: "/stream.app.v1.Admin/CreateAdminPlayerConfig",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminPlayerConfigRequest): Buffer =>
+      Buffer.from(CreateAdminPlayerConfigRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminPlayerConfigRequest => CreateAdminPlayerConfigRequest.decode(value),
+    responseSerialize: (value: CreateAdminPlayerConfigResponse): Buffer =>
+      Buffer.from(CreateAdminPlayerConfigResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminPlayerConfigResponse =>
+      CreateAdminPlayerConfigResponse.decode(value),
+  },
+  updateAdminPlayerConfig: {
+    path: "/stream.app.v1.Admin/UpdateAdminPlayerConfig",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminPlayerConfigRequest): Buffer =>
+      Buffer.from(UpdateAdminPlayerConfigRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminPlayerConfigRequest => UpdateAdminPlayerConfigRequest.decode(value),
+    responseSerialize: (value: UpdateAdminPlayerConfigResponse): Buffer =>
+      Buffer.from(UpdateAdminPlayerConfigResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdminPlayerConfigResponse =>
+      UpdateAdminPlayerConfigResponse.decode(value),
+  },
+  deleteAdminPlayerConfig: {
+    path: "/stream.app.v1.Admin/DeleteAdminPlayerConfig",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteAdminPlayerConfigRequest): Buffer =>
+      Buffer.from(DeleteAdminPlayerConfigRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteAdminPlayerConfigRequest => DeleteAdminPlayerConfigRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  listAdminJobs: {
+    path: "/stream.app.v1.Admin/ListAdminJobs",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminJobsRequest): Buffer => Buffer.from(ListAdminJobsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminJobsRequest => ListAdminJobsRequest.decode(value),
+    responseSerialize: (value: ListAdminJobsResponse): Buffer =>
+      Buffer.from(ListAdminJobsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminJobsResponse => ListAdminJobsResponse.decode(value),
+  },
+  getAdminJob: {
+    path: "/stream.app.v1.Admin/GetAdminJob",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminJobRequest): Buffer => Buffer.from(GetAdminJobRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminJobRequest => GetAdminJobRequest.decode(value),
+    responseSerialize: (value: GetAdminJobResponse): Buffer => Buffer.from(GetAdminJobResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminJobResponse => GetAdminJobResponse.decode(value),
+  },
+  getAdminJobLogs: {
+    path: "/stream.app.v1.Admin/GetAdminJobLogs",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminJobLogsRequest): Buffer =>
+      Buffer.from(GetAdminJobLogsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminJobLogsRequest => GetAdminJobLogsRequest.decode(value),
+    responseSerialize: (value: GetAdminJobLogsResponse): Buffer =>
+      Buffer.from(GetAdminJobLogsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminJobLogsResponse => GetAdminJobLogsResponse.decode(value),
+  },
+  createAdminJob: {
+    path: "/stream.app.v1.Admin/CreateAdminJob",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdminJobRequest): Buffer =>
+      Buffer.from(CreateAdminJobRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdminJobRequest => CreateAdminJobRequest.decode(value),
+    responseSerialize: (value: CreateAdminJobResponse): Buffer =>
+      Buffer.from(CreateAdminJobResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdminJobResponse => CreateAdminJobResponse.decode(value),
+  },
+  cancelAdminJob: {
+    path: "/stream.app.v1.Admin/CancelAdminJob",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CancelAdminJobRequest): Buffer =>
+      Buffer.from(CancelAdminJobRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CancelAdminJobRequest => CancelAdminJobRequest.decode(value),
+    responseSerialize: (value: CancelAdminJobResponse): Buffer =>
+      Buffer.from(CancelAdminJobResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CancelAdminJobResponse => CancelAdminJobResponse.decode(value),
+  },
+  retryAdminJob: {
+    path: "/stream.app.v1.Admin/RetryAdminJob",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: RetryAdminJobRequest): Buffer => Buffer.from(RetryAdminJobRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): RetryAdminJobRequest => RetryAdminJobRequest.decode(value),
+    responseSerialize: (value: RetryAdminJobResponse): Buffer =>
+      Buffer.from(RetryAdminJobResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): RetryAdminJobResponse => RetryAdminJobResponse.decode(value),
+  },
+  listAdminDlqJobs: {
+    path: "/stream.app.v1.Admin/ListAdminDlqJobs",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminDlqJobsRequest): Buffer =>
+      Buffer.from(ListAdminDlqJobsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminDlqJobsRequest => ListAdminDlqJobsRequest.decode(value),
+    responseSerialize: (value: ListAdminDlqJobsResponse): Buffer =>
+      Buffer.from(ListAdminDlqJobsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminDlqJobsResponse => ListAdminDlqJobsResponse.decode(value),
+  },
+  getAdminDlqJob: {
+    path: "/stream.app.v1.Admin/GetAdminDlqJob",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetAdminDlqJobRequest): Buffer =>
+      Buffer.from(GetAdminDlqJobRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetAdminDlqJobRequest => GetAdminDlqJobRequest.decode(value),
+    responseSerialize: (value: GetAdminDlqJobResponse): Buffer =>
+      Buffer.from(GetAdminDlqJobResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetAdminDlqJobResponse => GetAdminDlqJobResponse.decode(value),
+  },
+  retryAdminDlqJob: {
+    path: "/stream.app.v1.Admin/RetryAdminDlqJob",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: RetryAdminDlqJobRequest): Buffer =>
+      Buffer.from(RetryAdminDlqJobRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): RetryAdminDlqJobRequest => RetryAdminDlqJobRequest.decode(value),
+    responseSerialize: (value: RetryAdminDlqJobResponse): Buffer =>
+      Buffer.from(RetryAdminDlqJobResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): RetryAdminDlqJobResponse => RetryAdminDlqJobResponse.decode(value),
+  },
+  removeAdminDlqJob: {
+    path: "/stream.app.v1.Admin/RemoveAdminDlqJob",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: RemoveAdminDlqJobRequest): Buffer =>
+      Buffer.from(RemoveAdminDlqJobRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): RemoveAdminDlqJobRequest => RemoveAdminDlqJobRequest.decode(value),
+    responseSerialize: (value: RemoveAdminDlqJobResponse): Buffer =>
+      Buffer.from(RemoveAdminDlqJobResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): RemoveAdminDlqJobResponse => RemoveAdminDlqJobResponse.decode(value),
+  },
+  listAdminAgents: {
+    path: "/stream.app.v1.Admin/ListAdminAgents",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdminAgentsRequest): Buffer =>
+      Buffer.from(ListAdminAgentsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdminAgentsRequest => ListAdminAgentsRequest.decode(value),
+    responseSerialize: (value: ListAdminAgentsResponse): Buffer =>
+      Buffer.from(ListAdminAgentsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdminAgentsResponse => ListAdminAgentsResponse.decode(value),
+  },
+  restartAdminAgent: {
+    path: "/stream.app.v1.Admin/RestartAdminAgent",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: RestartAdminAgentRequest): Buffer =>
+      Buffer.from(RestartAdminAgentRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): RestartAdminAgentRequest => RestartAdminAgentRequest.decode(value),
+    responseSerialize: (value: AdminAgentCommandResponse): Buffer =>
+      Buffer.from(AdminAgentCommandResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): AdminAgentCommandResponse => AdminAgentCommandResponse.decode(value),
+  },
+  updateAdminAgent: {
+    path: "/stream.app.v1.Admin/UpdateAdminAgent",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdminAgentRequest): Buffer =>
+      Buffer.from(UpdateAdminAgentRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdminAgentRequest => UpdateAdminAgentRequest.decode(value),
+    responseSerialize: (value: AdminAgentCommandResponse): Buffer =>
+      Buffer.from(AdminAgentCommandResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): AdminAgentCommandResponse => AdminAgentCommandResponse.decode(value),
+  },
+} as const;
+
+export interface AdminServer extends UntypedServiceImplementation {
+  getAdminDashboard: handleUnaryCall<GetAdminDashboardRequest, GetAdminDashboardResponse>;
+  listAdminUsers: handleUnaryCall<ListAdminUsersRequest, ListAdminUsersResponse>;
+  getAdminUser: handleUnaryCall<GetAdminUserRequest, GetAdminUserResponse>;
+  createAdminUser: handleUnaryCall<CreateAdminUserRequest, CreateAdminUserResponse>;
+  updateAdminUser: handleUnaryCall<UpdateAdminUserRequest, UpdateAdminUserResponse>;
+  updateAdminUserReferralSettings: handleUnaryCall<
+    UpdateAdminUserReferralSettingsRequest,
+    UpdateAdminUserReferralSettingsResponse
+  >;
+  updateAdminUserRole: handleUnaryCall<UpdateAdminUserRoleRequest, UpdateAdminUserRoleResponse>;
+  deleteAdminUser: handleUnaryCall<DeleteAdminUserRequest, MessageResponse>;
+  listAdminVideos: handleUnaryCall<ListAdminVideosRequest, ListAdminVideosResponse>;
+  getAdminVideo: handleUnaryCall<GetAdminVideoRequest, GetAdminVideoResponse>;
+  createAdminVideo: handleUnaryCall<CreateAdminVideoRequest, CreateAdminVideoResponse>;
+  updateAdminVideo: handleUnaryCall<UpdateAdminVideoRequest, UpdateAdminVideoResponse>;
+  deleteAdminVideo: handleUnaryCall<DeleteAdminVideoRequest, MessageResponse>;
+  listAdminPayments: handleUnaryCall<ListAdminPaymentsRequest, ListAdminPaymentsResponse>;
+  getAdminPayment: handleUnaryCall<GetAdminPaymentRequest, GetAdminPaymentResponse>;
+  createAdminPayment: handleUnaryCall<CreateAdminPaymentRequest, CreateAdminPaymentResponse>;
+  updateAdminPayment: handleUnaryCall<UpdateAdminPaymentRequest, UpdateAdminPaymentResponse>;
+  listAdminPlans: handleUnaryCall<ListAdminPlansRequest, ListAdminPlansResponse>;
+  createAdminPlan: handleUnaryCall<CreateAdminPlanRequest, CreateAdminPlanResponse>;
+  updateAdminPlan: handleUnaryCall<UpdateAdminPlanRequest, UpdateAdminPlanResponse>;
+  deleteAdminPlan: handleUnaryCall<DeleteAdminPlanRequest, DeleteAdminPlanResponse>;
+  listAdminAdTemplates: handleUnaryCall<ListAdminAdTemplatesRequest, ListAdminAdTemplatesResponse>;
+  getAdminAdTemplate: handleUnaryCall<GetAdminAdTemplateRequest, GetAdminAdTemplateResponse>;
+  createAdminAdTemplate: handleUnaryCall<CreateAdminAdTemplateRequest, CreateAdminAdTemplateResponse>;
+  updateAdminAdTemplate: handleUnaryCall<UpdateAdminAdTemplateRequest, UpdateAdminAdTemplateResponse>;
+  deleteAdminAdTemplate: handleUnaryCall<DeleteAdminAdTemplateRequest, MessageResponse>;
+  listAdminPopupAds: handleUnaryCall<ListAdminPopupAdsRequest, ListAdminPopupAdsResponse>;
+  getAdminPopupAd: handleUnaryCall<GetAdminPopupAdRequest, GetAdminPopupAdResponse>;
+  createAdminPopupAd: handleUnaryCall<CreateAdminPopupAdRequest, CreateAdminPopupAdResponse>;
+  updateAdminPopupAd: handleUnaryCall<UpdateAdminPopupAdRequest, UpdateAdminPopupAdResponse>;
+  deleteAdminPopupAd: handleUnaryCall<DeleteAdminPopupAdRequest, MessageResponse>;
+  listAdminPlayerConfigs: handleUnaryCall<ListAdminPlayerConfigsRequest, ListAdminPlayerConfigsResponse>;
+  getAdminPlayerConfig: handleUnaryCall<GetAdminPlayerConfigRequest, GetAdminPlayerConfigResponse>;
+  createAdminPlayerConfig: handleUnaryCall<CreateAdminPlayerConfigRequest, CreateAdminPlayerConfigResponse>;
+  updateAdminPlayerConfig: handleUnaryCall<UpdateAdminPlayerConfigRequest, UpdateAdminPlayerConfigResponse>;
+  deleteAdminPlayerConfig: handleUnaryCall<DeleteAdminPlayerConfigRequest, MessageResponse>;
+  listAdminJobs: handleUnaryCall<ListAdminJobsRequest, ListAdminJobsResponse>;
+  getAdminJob: handleUnaryCall<GetAdminJobRequest, GetAdminJobResponse>;
+  getAdminJobLogs: handleUnaryCall<GetAdminJobLogsRequest, GetAdminJobLogsResponse>;
+  createAdminJob: handleUnaryCall<CreateAdminJobRequest, CreateAdminJobResponse>;
+  cancelAdminJob: handleUnaryCall<CancelAdminJobRequest, CancelAdminJobResponse>;
+  retryAdminJob: handleUnaryCall<RetryAdminJobRequest, RetryAdminJobResponse>;
+  listAdminDlqJobs: handleUnaryCall<ListAdminDlqJobsRequest, ListAdminDlqJobsResponse>;
+  getAdminDlqJob: handleUnaryCall<GetAdminDlqJobRequest, GetAdminDlqJobResponse>;
+  retryAdminDlqJob: handleUnaryCall<RetryAdminDlqJobRequest, RetryAdminDlqJobResponse>;
+  removeAdminDlqJob: handleUnaryCall<RemoveAdminDlqJobRequest, RemoveAdminDlqJobResponse>;
+  listAdminAgents: handleUnaryCall<ListAdminAgentsRequest, ListAdminAgentsResponse>;
+  restartAdminAgent: handleUnaryCall<RestartAdminAgentRequest, AdminAgentCommandResponse>;
+  updateAdminAgent: handleUnaryCall<UpdateAdminAgentRequest, AdminAgentCommandResponse>;
+}
+
+export interface AdminClient extends Client {
+  getAdminDashboard(
+    request: GetAdminDashboardRequest,
+    callback: (error: ServiceError | null, response: GetAdminDashboardResponse) => void,
+  ): ClientUnaryCall;
+  getAdminDashboard(
+    request: GetAdminDashboardRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminDashboardResponse) => void,
+  ): ClientUnaryCall;
+  getAdminDashboard(
+    request: GetAdminDashboardRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminDashboardResponse) => void,
+  ): ClientUnaryCall;
+  listAdminUsers(
+    request: ListAdminUsersRequest,
+    callback: (error: ServiceError | null, response: ListAdminUsersResponse) => void,
+  ): ClientUnaryCall;
+  listAdminUsers(
+    request: ListAdminUsersRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminUsersResponse) => void,
+  ): ClientUnaryCall;
+  listAdminUsers(
+    request: ListAdminUsersRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminUsersResponse) => void,
+  ): ClientUnaryCall;
+  getAdminUser(
+    request: GetAdminUserRequest,
+    callback: (error: ServiceError | null, response: GetAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  getAdminUser(
+    request: GetAdminUserRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  getAdminUser(
+    request: GetAdminUserRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  createAdminUser(
+    request: CreateAdminUserRequest,
+    callback: (error: ServiceError | null, response: CreateAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  createAdminUser(
+    request: CreateAdminUserRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  createAdminUser(
+    request: CreateAdminUserRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUser(
+    request: UpdateAdminUserRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUser(
+    request: UpdateAdminUserRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUser(
+    request: UpdateAdminUserRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminUserResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUserReferralSettings(
+    request: UpdateAdminUserReferralSettingsRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminUserReferralSettingsResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUserReferralSettings(
+    request: UpdateAdminUserReferralSettingsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminUserReferralSettingsResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUserReferralSettings(
+    request: UpdateAdminUserReferralSettingsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminUserReferralSettingsResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUserRole(
+    request: UpdateAdminUserRoleRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminUserRoleResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUserRole(
+    request: UpdateAdminUserRoleRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminUserRoleResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminUserRole(
+    request: UpdateAdminUserRoleRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminUserRoleResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminUser(
+    request: DeleteAdminUserRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminUser(
+    request: DeleteAdminUserRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminUser(
+    request: DeleteAdminUserRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  listAdminVideos(
+    request: ListAdminVideosRequest,
+    callback: (error: ServiceError | null, response: ListAdminVideosResponse) => void,
+  ): ClientUnaryCall;
+  listAdminVideos(
+    request: ListAdminVideosRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminVideosResponse) => void,
+  ): ClientUnaryCall;
+  listAdminVideos(
+    request: ListAdminVideosRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminVideosResponse) => void,
+  ): ClientUnaryCall;
+  getAdminVideo(
+    request: GetAdminVideoRequest,
+    callback: (error: ServiceError | null, response: GetAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  getAdminVideo(
+    request: GetAdminVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  getAdminVideo(
+    request: GetAdminVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  createAdminVideo(
+    request: CreateAdminVideoRequest,
+    callback: (error: ServiceError | null, response: CreateAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  createAdminVideo(
+    request: CreateAdminVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  createAdminVideo(
+    request: CreateAdminVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminVideo(
+    request: UpdateAdminVideoRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminVideo(
+    request: UpdateAdminVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminVideo(
+    request: UpdateAdminVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminVideoResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminVideo(
+    request: DeleteAdminVideoRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminVideo(
+    request: DeleteAdminVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminVideo(
+    request: DeleteAdminVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPayments(
+    request: ListAdminPaymentsRequest,
+    callback: (error: ServiceError | null, response: ListAdminPaymentsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPayments(
+    request: ListAdminPaymentsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminPaymentsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPayments(
+    request: ListAdminPaymentsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminPaymentsResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPayment(
+    request: GetAdminPaymentRequest,
+    callback: (error: ServiceError | null, response: GetAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPayment(
+    request: GetAdminPaymentRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPayment(
+    request: GetAdminPaymentRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPayment(
+    request: CreateAdminPaymentRequest,
+    callback: (error: ServiceError | null, response: CreateAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPayment(
+    request: CreateAdminPaymentRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPayment(
+    request: CreateAdminPaymentRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPayment(
+    request: UpdateAdminPaymentRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPayment(
+    request: UpdateAdminPaymentRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPayment(
+    request: UpdateAdminPaymentRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminPaymentResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPlans(
+    request: ListAdminPlansRequest,
+    callback: (error: ServiceError | null, response: ListAdminPlansResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPlans(
+    request: ListAdminPlansRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminPlansResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPlans(
+    request: ListAdminPlansRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminPlansResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPlan(
+    request: CreateAdminPlanRequest,
+    callback: (error: ServiceError | null, response: CreateAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPlan(
+    request: CreateAdminPlanRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPlan(
+    request: CreateAdminPlanRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPlan(
+    request: UpdateAdminPlanRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPlan(
+    request: UpdateAdminPlanRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPlan(
+    request: UpdateAdminPlanRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPlan(
+    request: DeleteAdminPlanRequest,
+    callback: (error: ServiceError | null, response: DeleteAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPlan(
+    request: DeleteAdminPlanRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: DeleteAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPlan(
+    request: DeleteAdminPlanRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: DeleteAdminPlanResponse) => void,
+  ): ClientUnaryCall;
+  listAdminAdTemplates(
+    request: ListAdminAdTemplatesRequest,
+    callback: (error: ServiceError | null, response: ListAdminAdTemplatesResponse) => void,
+  ): ClientUnaryCall;
+  listAdminAdTemplates(
+    request: ListAdminAdTemplatesRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminAdTemplatesResponse) => void,
+  ): ClientUnaryCall;
+  listAdminAdTemplates(
+    request: ListAdminAdTemplatesRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminAdTemplatesResponse) => void,
+  ): ClientUnaryCall;
+  getAdminAdTemplate(
+    request: GetAdminAdTemplateRequest,
+    callback: (error: ServiceError | null, response: GetAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  getAdminAdTemplate(
+    request: GetAdminAdTemplateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  getAdminAdTemplate(
+    request: GetAdminAdTemplateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  createAdminAdTemplate(
+    request: CreateAdminAdTemplateRequest,
+    callback: (error: ServiceError | null, response: CreateAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  createAdminAdTemplate(
+    request: CreateAdminAdTemplateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  createAdminAdTemplate(
+    request: CreateAdminAdTemplateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminAdTemplate(
+    request: UpdateAdminAdTemplateRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminAdTemplate(
+    request: UpdateAdminAdTemplateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminAdTemplate(
+    request: UpdateAdminAdTemplateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminAdTemplate(
+    request: DeleteAdminAdTemplateRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminAdTemplate(
+    request: DeleteAdminAdTemplateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminAdTemplate(
+    request: DeleteAdminAdTemplateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPopupAds(
+    request: ListAdminPopupAdsRequest,
+    callback: (error: ServiceError | null, response: ListAdminPopupAdsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPopupAds(
+    request: ListAdminPopupAdsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminPopupAdsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPopupAds(
+    request: ListAdminPopupAdsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminPopupAdsResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPopupAd(
+    request: GetAdminPopupAdRequest,
+    callback: (error: ServiceError | null, response: GetAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPopupAd(
+    request: GetAdminPopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPopupAd(
+    request: GetAdminPopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPopupAd(
+    request: CreateAdminPopupAdRequest,
+    callback: (error: ServiceError | null, response: CreateAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPopupAd(
+    request: CreateAdminPopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPopupAd(
+    request: CreateAdminPopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPopupAd(
+    request: UpdateAdminPopupAdRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPopupAd(
+    request: UpdateAdminPopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPopupAd(
+    request: UpdateAdminPopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminPopupAdResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPopupAd(
+    request: DeleteAdminPopupAdRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPopupAd(
+    request: DeleteAdminPopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPopupAd(
+    request: DeleteAdminPopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPlayerConfigs(
+    request: ListAdminPlayerConfigsRequest,
+    callback: (error: ServiceError | null, response: ListAdminPlayerConfigsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPlayerConfigs(
+    request: ListAdminPlayerConfigsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminPlayerConfigsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminPlayerConfigs(
+    request: ListAdminPlayerConfigsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminPlayerConfigsResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPlayerConfig(
+    request: GetAdminPlayerConfigRequest,
+    callback: (error: ServiceError | null, response: GetAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPlayerConfig(
+    request: GetAdminPlayerConfigRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  getAdminPlayerConfig(
+    request: GetAdminPlayerConfigRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPlayerConfig(
+    request: CreateAdminPlayerConfigRequest,
+    callback: (error: ServiceError | null, response: CreateAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPlayerConfig(
+    request: CreateAdminPlayerConfigRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  createAdminPlayerConfig(
+    request: CreateAdminPlayerConfigRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPlayerConfig(
+    request: UpdateAdminPlayerConfigRequest,
+    callback: (error: ServiceError | null, response: UpdateAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPlayerConfig(
+    request: UpdateAdminPlayerConfigRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminPlayerConfig(
+    request: UpdateAdminPlayerConfigRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdminPlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPlayerConfig(
+    request: DeleteAdminPlayerConfigRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPlayerConfig(
+    request: DeleteAdminPlayerConfigRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdminPlayerConfig(
+    request: DeleteAdminPlayerConfigRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  listAdminJobs(
+    request: ListAdminJobsRequest,
+    callback: (error: ServiceError | null, response: ListAdminJobsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminJobs(
+    request: ListAdminJobsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminJobsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminJobs(
+    request: ListAdminJobsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminJobsResponse) => void,
+  ): ClientUnaryCall;
+  getAdminJob(
+    request: GetAdminJobRequest,
+    callback: (error: ServiceError | null, response: GetAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  getAdminJob(
+    request: GetAdminJobRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  getAdminJob(
+    request: GetAdminJobRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  getAdminJobLogs(
+    request: GetAdminJobLogsRequest,
+    callback: (error: ServiceError | null, response: GetAdminJobLogsResponse) => void,
+  ): ClientUnaryCall;
+  getAdminJobLogs(
+    request: GetAdminJobLogsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminJobLogsResponse) => void,
+  ): ClientUnaryCall;
+  getAdminJobLogs(
+    request: GetAdminJobLogsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminJobLogsResponse) => void,
+  ): ClientUnaryCall;
+  createAdminJob(
+    request: CreateAdminJobRequest,
+    callback: (error: ServiceError | null, response: CreateAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  createAdminJob(
+    request: CreateAdminJobRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  createAdminJob(
+    request: CreateAdminJobRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  cancelAdminJob(
+    request: CancelAdminJobRequest,
+    callback: (error: ServiceError | null, response: CancelAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  cancelAdminJob(
+    request: CancelAdminJobRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CancelAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  cancelAdminJob(
+    request: CancelAdminJobRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CancelAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  retryAdminJob(
+    request: RetryAdminJobRequest,
+    callback: (error: ServiceError | null, response: RetryAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  retryAdminJob(
+    request: RetryAdminJobRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: RetryAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  retryAdminJob(
+    request: RetryAdminJobRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: RetryAdminJobResponse) => void,
+  ): ClientUnaryCall;
+  listAdminDlqJobs(
+    request: ListAdminDlqJobsRequest,
+    callback: (error: ServiceError | null, response: ListAdminDlqJobsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminDlqJobs(
+    request: ListAdminDlqJobsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminDlqJobsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminDlqJobs(
+    request: ListAdminDlqJobsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminDlqJobsResponse) => void,
+  ): ClientUnaryCall;
+  getAdminDlqJob(
+    request: GetAdminDlqJobRequest,
+    callback: (error: ServiceError | null, response: GetAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  getAdminDlqJob(
+    request: GetAdminDlqJobRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  getAdminDlqJob(
+    request: GetAdminDlqJobRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  retryAdminDlqJob(
+    request: RetryAdminDlqJobRequest,
+    callback: (error: ServiceError | null, response: RetryAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  retryAdminDlqJob(
+    request: RetryAdminDlqJobRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: RetryAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  retryAdminDlqJob(
+    request: RetryAdminDlqJobRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: RetryAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  removeAdminDlqJob(
+    request: RemoveAdminDlqJobRequest,
+    callback: (error: ServiceError | null, response: RemoveAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  removeAdminDlqJob(
+    request: RemoveAdminDlqJobRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: RemoveAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  removeAdminDlqJob(
+    request: RemoveAdminDlqJobRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: RemoveAdminDlqJobResponse) => void,
+  ): ClientUnaryCall;
+  listAdminAgents(
+    request: ListAdminAgentsRequest,
+    callback: (error: ServiceError | null, response: ListAdminAgentsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminAgents(
+    request: ListAdminAgentsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdminAgentsResponse) => void,
+  ): ClientUnaryCall;
+  listAdminAgents(
+    request: ListAdminAgentsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdminAgentsResponse) => void,
+  ): ClientUnaryCall;
+  restartAdminAgent(
+    request: RestartAdminAgentRequest,
+    callback: (error: ServiceError | null, response: AdminAgentCommandResponse) => void,
+  ): ClientUnaryCall;
+  restartAdminAgent(
+    request: RestartAdminAgentRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: AdminAgentCommandResponse) => void,
+  ): ClientUnaryCall;
+  restartAdminAgent(
+    request: RestartAdminAgentRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: AdminAgentCommandResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminAgent(
+    request: UpdateAdminAgentRequest,
+    callback: (error: ServiceError | null, response: AdminAgentCommandResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminAgent(
+    request: UpdateAdminAgentRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: AdminAgentCommandResponse) => void,
+  ): ClientUnaryCall;
+  updateAdminAgent(
+    request: UpdateAdminAgentRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: AdminAgentCommandResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const AdminClient = makeGenericClientConstructor(AdminService, "stream.app.v1.Admin") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): AdminClient;
+  service: typeof AdminService;
+  serviceName: string;
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isObject(value: any): boolean {
+  return typeof value === "object" && value !== null;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/auth.ts b/src/server/api/proto/app/v1/auth.ts
new file mode 100644
index 0000000..cbb10d4
--- /dev/null
+++ b/src/server/api/proto/app/v1/auth.ts
@@ -0,0 +1,1131 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/auth.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientUnaryCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+import { MessageResponse, User } from "./common";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface LoginRequest {
+  email?: string | undefined;
+  password?: string | undefined;
+}
+
+export interface LoginResponse {
+  user?: User | undefined;
+}
+
+export interface RegisterRequest {
+  username?: string | undefined;
+  email?: string | undefined;
+  password?: string | undefined;
+  refUsername?: string | undefined;
+}
+
+export interface RegisterResponse {
+  user?: User | undefined;
+}
+
+export interface LogoutRequest {
+}
+
+export interface ChangePasswordRequest {
+  currentPassword?: string | undefined;
+  newPassword?: string | undefined;
+}
+
+export interface ForgotPasswordRequest {
+  email?: string | undefined;
+}
+
+export interface ResetPasswordRequest {
+  token?: string | undefined;
+  newPassword?: string | undefined;
+}
+
+export interface GetGoogleLoginUrlRequest {
+}
+
+export interface GetGoogleLoginUrlResponse {
+  url?: string | undefined;
+}
+
+export interface CompleteGoogleLoginRequest {
+  code?: string | undefined;
+  refUsername?: string | undefined;
+}
+
+export interface CompleteGoogleLoginResponse {
+  user?: User | undefined;
+}
+
+function createBaseLoginRequest(): LoginRequest {
+  return { email: "", password: "" };
+}
+
+export const LoginRequest: MessageFns<LoginRequest> = {
+  encode(message: LoginRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.email !== undefined && message.email !== "") {
+      writer.uint32(10).string(message.email);
+    }
+    if (message.password !== undefined && message.password !== "") {
+      writer.uint32(18).string(message.password);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LoginRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLoginRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.password = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LoginRequest {
+    return {
+      email: isSet(object.email) ? globalThis.String(object.email) : "",
+      password: isSet(object.password) ? globalThis.String(object.password) : "",
+    };
+  },
+
+  toJSON(message: LoginRequest): unknown {
+    const obj: any = {};
+    if (message.email !== undefined && message.email !== "") {
+      obj.email = message.email;
+    }
+    if (message.password !== undefined && message.password !== "") {
+      obj.password = message.password;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LoginRequest>, I>>(base?: I): LoginRequest {
+    return LoginRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LoginRequest>, I>>(object: I): LoginRequest {
+    const message = createBaseLoginRequest();
+    message.email = object.email ?? "";
+    message.password = object.password ?? "";
+    return message;
+  },
+};
+
+function createBaseLoginResponse(): LoginResponse {
+  return { user: undefined };
+}
+
+export const LoginResponse: MessageFns<LoginResponse> = {
+  encode(message: LoginResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      User.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LoginResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLoginResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = User.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LoginResponse {
+    return { user: isSet(object.user) ? User.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: LoginResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = User.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LoginResponse>, I>>(base?: I): LoginResponse {
+    return LoginResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LoginResponse>, I>>(object: I): LoginResponse {
+    const message = createBaseLoginResponse();
+    message.user = (object.user !== undefined && object.user !== null) ? User.fromPartial(object.user) : undefined;
+    return message;
+  },
+};
+
+function createBaseRegisterRequest(): RegisterRequest {
+  return { username: "", email: "", password: "", refUsername: undefined };
+}
+
+export const RegisterRequest: MessageFns<RegisterRequest> = {
+  encode(message: RegisterRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.username !== undefined && message.username !== "") {
+      writer.uint32(10).string(message.username);
+    }
+    if (message.email !== undefined && message.email !== "") {
+      writer.uint32(18).string(message.email);
+    }
+    if (message.password !== undefined && message.password !== "") {
+      writer.uint32(26).string(message.password);
+    }
+    if (message.refUsername !== undefined) {
+      writer.uint32(34).string(message.refUsername);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RegisterRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRegisterRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.password = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.refUsername = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RegisterRequest {
+    return {
+      username: isSet(object.username) ? globalThis.String(object.username) : "",
+      email: isSet(object.email) ? globalThis.String(object.email) : "",
+      password: isSet(object.password) ? globalThis.String(object.password) : "",
+      refUsername: isSet(object.refUsername)
+        ? globalThis.String(object.refUsername)
+        : isSet(object.ref_username)
+        ? globalThis.String(object.ref_username)
+        : undefined,
+    };
+  },
+
+  toJSON(message: RegisterRequest): unknown {
+    const obj: any = {};
+    if (message.username !== undefined && message.username !== "") {
+      obj.username = message.username;
+    }
+    if (message.email !== undefined && message.email !== "") {
+      obj.email = message.email;
+    }
+    if (message.password !== undefined && message.password !== "") {
+      obj.password = message.password;
+    }
+    if (message.refUsername !== undefined) {
+      obj.refUsername = message.refUsername;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RegisterRequest>, I>>(base?: I): RegisterRequest {
+    return RegisterRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RegisterRequest>, I>>(object: I): RegisterRequest {
+    const message = createBaseRegisterRequest();
+    message.username = object.username ?? "";
+    message.email = object.email ?? "";
+    message.password = object.password ?? "";
+    message.refUsername = object.refUsername ?? undefined;
+    return message;
+  },
+};
+
+function createBaseRegisterResponse(): RegisterResponse {
+  return { user: undefined };
+}
+
+export const RegisterResponse: MessageFns<RegisterResponse> = {
+  encode(message: RegisterResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      User.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): RegisterResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseRegisterResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = User.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): RegisterResponse {
+    return { user: isSet(object.user) ? User.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: RegisterResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = User.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<RegisterResponse>, I>>(base?: I): RegisterResponse {
+    return RegisterResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<RegisterResponse>, I>>(object: I): RegisterResponse {
+    const message = createBaseRegisterResponse();
+    message.user = (object.user !== undefined && object.user !== null) ? User.fromPartial(object.user) : undefined;
+    return message;
+  },
+};
+
+function createBaseLogoutRequest(): LogoutRequest {
+  return {};
+}
+
+export const LogoutRequest: MessageFns<LogoutRequest> = {
+  encode(_: LogoutRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LogoutRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLogoutRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): LogoutRequest {
+    return {};
+  },
+
+  toJSON(_: LogoutRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LogoutRequest>, I>>(base?: I): LogoutRequest {
+    return LogoutRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LogoutRequest>, I>>(_: I): LogoutRequest {
+    const message = createBaseLogoutRequest();
+    return message;
+  },
+};
+
+function createBaseChangePasswordRequest(): ChangePasswordRequest {
+  return { currentPassword: "", newPassword: "" };
+}
+
+export const ChangePasswordRequest: MessageFns<ChangePasswordRequest> = {
+  encode(message: ChangePasswordRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.currentPassword !== undefined && message.currentPassword !== "") {
+      writer.uint32(10).string(message.currentPassword);
+    }
+    if (message.newPassword !== undefined && message.newPassword !== "") {
+      writer.uint32(18).string(message.newPassword);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ChangePasswordRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseChangePasswordRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.currentPassword = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.newPassword = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ChangePasswordRequest {
+    return {
+      currentPassword: isSet(object.currentPassword)
+        ? globalThis.String(object.currentPassword)
+        : isSet(object.current_password)
+        ? globalThis.String(object.current_password)
+        : "",
+      newPassword: isSet(object.newPassword)
+        ? globalThis.String(object.newPassword)
+        : isSet(object.new_password)
+        ? globalThis.String(object.new_password)
+        : "",
+    };
+  },
+
+  toJSON(message: ChangePasswordRequest): unknown {
+    const obj: any = {};
+    if (message.currentPassword !== undefined && message.currentPassword !== "") {
+      obj.currentPassword = message.currentPassword;
+    }
+    if (message.newPassword !== undefined && message.newPassword !== "") {
+      obj.newPassword = message.newPassword;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ChangePasswordRequest>, I>>(base?: I): ChangePasswordRequest {
+    return ChangePasswordRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ChangePasswordRequest>, I>>(object: I): ChangePasswordRequest {
+    const message = createBaseChangePasswordRequest();
+    message.currentPassword = object.currentPassword ?? "";
+    message.newPassword = object.newPassword ?? "";
+    return message;
+  },
+};
+
+function createBaseForgotPasswordRequest(): ForgotPasswordRequest {
+  return { email: "" };
+}
+
+export const ForgotPasswordRequest: MessageFns<ForgotPasswordRequest> = {
+  encode(message: ForgotPasswordRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.email !== undefined && message.email !== "") {
+      writer.uint32(10).string(message.email);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ForgotPasswordRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseForgotPasswordRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ForgotPasswordRequest {
+    return { email: isSet(object.email) ? globalThis.String(object.email) : "" };
+  },
+
+  toJSON(message: ForgotPasswordRequest): unknown {
+    const obj: any = {};
+    if (message.email !== undefined && message.email !== "") {
+      obj.email = message.email;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ForgotPasswordRequest>, I>>(base?: I): ForgotPasswordRequest {
+    return ForgotPasswordRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ForgotPasswordRequest>, I>>(object: I): ForgotPasswordRequest {
+    const message = createBaseForgotPasswordRequest();
+    message.email = object.email ?? "";
+    return message;
+  },
+};
+
+function createBaseResetPasswordRequest(): ResetPasswordRequest {
+  return { token: "", newPassword: "" };
+}
+
+export const ResetPasswordRequest: MessageFns<ResetPasswordRequest> = {
+  encode(message: ResetPasswordRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.token !== undefined && message.token !== "") {
+      writer.uint32(10).string(message.token);
+    }
+    if (message.newPassword !== undefined && message.newPassword !== "") {
+      writer.uint32(18).string(message.newPassword);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ResetPasswordRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseResetPasswordRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.token = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.newPassword = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ResetPasswordRequest {
+    return {
+      token: isSet(object.token) ? globalThis.String(object.token) : "",
+      newPassword: isSet(object.newPassword)
+        ? globalThis.String(object.newPassword)
+        : isSet(object.new_password)
+        ? globalThis.String(object.new_password)
+        : "",
+    };
+  },
+
+  toJSON(message: ResetPasswordRequest): unknown {
+    const obj: any = {};
+    if (message.token !== undefined && message.token !== "") {
+      obj.token = message.token;
+    }
+    if (message.newPassword !== undefined && message.newPassword !== "") {
+      obj.newPassword = message.newPassword;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ResetPasswordRequest>, I>>(base?: I): ResetPasswordRequest {
+    return ResetPasswordRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ResetPasswordRequest>, I>>(object: I): ResetPasswordRequest {
+    const message = createBaseResetPasswordRequest();
+    message.token = object.token ?? "";
+    message.newPassword = object.newPassword ?? "";
+    return message;
+  },
+};
+
+function createBaseGetGoogleLoginUrlRequest(): GetGoogleLoginUrlRequest {
+  return {};
+}
+
+export const GetGoogleLoginUrlRequest: MessageFns<GetGoogleLoginUrlRequest> = {
+  encode(_: GetGoogleLoginUrlRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetGoogleLoginUrlRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetGoogleLoginUrlRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): GetGoogleLoginUrlRequest {
+    return {};
+  },
+
+  toJSON(_: GetGoogleLoginUrlRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetGoogleLoginUrlRequest>, I>>(base?: I): GetGoogleLoginUrlRequest {
+    return GetGoogleLoginUrlRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetGoogleLoginUrlRequest>, I>>(_: I): GetGoogleLoginUrlRequest {
+    const message = createBaseGetGoogleLoginUrlRequest();
+    return message;
+  },
+};
+
+function createBaseGetGoogleLoginUrlResponse(): GetGoogleLoginUrlResponse {
+  return { url: "" };
+}
+
+export const GetGoogleLoginUrlResponse: MessageFns<GetGoogleLoginUrlResponse> = {
+  encode(message: GetGoogleLoginUrlResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.url !== undefined && message.url !== "") {
+      writer.uint32(10).string(message.url);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetGoogleLoginUrlResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetGoogleLoginUrlResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.url = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetGoogleLoginUrlResponse {
+    return { url: isSet(object.url) ? globalThis.String(object.url) : "" };
+  },
+
+  toJSON(message: GetGoogleLoginUrlResponse): unknown {
+    const obj: any = {};
+    if (message.url !== undefined && message.url !== "") {
+      obj.url = message.url;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetGoogleLoginUrlResponse>, I>>(base?: I): GetGoogleLoginUrlResponse {
+    return GetGoogleLoginUrlResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetGoogleLoginUrlResponse>, I>>(object: I): GetGoogleLoginUrlResponse {
+    const message = createBaseGetGoogleLoginUrlResponse();
+    message.url = object.url ?? "";
+    return message;
+  },
+};
+
+function createBaseCompleteGoogleLoginRequest(): CompleteGoogleLoginRequest {
+  return { code: "", refUsername: undefined };
+}
+
+export const CompleteGoogleLoginRequest: MessageFns<CompleteGoogleLoginRequest> = {
+  encode(message: CompleteGoogleLoginRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.code !== undefined && message.code !== "") {
+      writer.uint32(10).string(message.code);
+    }
+    if (message.refUsername !== undefined) {
+      writer.uint32(18).string(message.refUsername);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CompleteGoogleLoginRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCompleteGoogleLoginRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.code = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.refUsername = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CompleteGoogleLoginRequest {
+    return {
+      code: isSet(object.code) ? globalThis.String(object.code) : "",
+      refUsername: isSet(object.refUsername)
+        ? globalThis.String(object.refUsername)
+        : isSet(object.ref_username)
+        ? globalThis.String(object.ref_username)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CompleteGoogleLoginRequest): unknown {
+    const obj: any = {};
+    if (message.code !== undefined && message.code !== "") {
+      obj.code = message.code;
+    }
+    if (message.refUsername !== undefined) {
+      obj.refUsername = message.refUsername;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CompleteGoogleLoginRequest>, I>>(base?: I): CompleteGoogleLoginRequest {
+    return CompleteGoogleLoginRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CompleteGoogleLoginRequest>, I>>(object: I): CompleteGoogleLoginRequest {
+    const message = createBaseCompleteGoogleLoginRequest();
+    message.code = object.code ?? "";
+    message.refUsername = object.refUsername ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCompleteGoogleLoginResponse(): CompleteGoogleLoginResponse {
+  return { user: undefined };
+}
+
+export const CompleteGoogleLoginResponse: MessageFns<CompleteGoogleLoginResponse> = {
+  encode(message: CompleteGoogleLoginResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      User.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CompleteGoogleLoginResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCompleteGoogleLoginResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = User.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CompleteGoogleLoginResponse {
+    return { user: isSet(object.user) ? User.fromJSON(object.user) : undefined };
+  },
+
+  toJSON(message: CompleteGoogleLoginResponse): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = User.toJSON(message.user);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CompleteGoogleLoginResponse>, I>>(base?: I): CompleteGoogleLoginResponse {
+    return CompleteGoogleLoginResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CompleteGoogleLoginResponse>, I>>(object: I): CompleteGoogleLoginResponse {
+    const message = createBaseCompleteGoogleLoginResponse();
+    message.user = (object.user !== undefined && object.user !== null) ? User.fromPartial(object.user) : undefined;
+    return message;
+  },
+};
+
+export type AuthService = typeof AuthService;
+export const AuthService = {
+  login: {
+    path: "/stream.app.v1.Auth/Login",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: LoginRequest): Buffer => Buffer.from(LoginRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): LoginRequest => LoginRequest.decode(value),
+    responseSerialize: (value: LoginResponse): Buffer => Buffer.from(LoginResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): LoginResponse => LoginResponse.decode(value),
+  },
+  register: {
+    path: "/stream.app.v1.Auth/Register",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: RegisterRequest): Buffer => Buffer.from(RegisterRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): RegisterRequest => RegisterRequest.decode(value),
+    responseSerialize: (value: RegisterResponse): Buffer => Buffer.from(RegisterResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): RegisterResponse => RegisterResponse.decode(value),
+  },
+  logout: {
+    path: "/stream.app.v1.Auth/Logout",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: LogoutRequest): Buffer => Buffer.from(LogoutRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): LogoutRequest => LogoutRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  changePassword: {
+    path: "/stream.app.v1.Auth/ChangePassword",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ChangePasswordRequest): Buffer =>
+      Buffer.from(ChangePasswordRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ChangePasswordRequest => ChangePasswordRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  forgotPassword: {
+    path: "/stream.app.v1.Auth/ForgotPassword",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ForgotPasswordRequest): Buffer =>
+      Buffer.from(ForgotPasswordRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ForgotPasswordRequest => ForgotPasswordRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  resetPassword: {
+    path: "/stream.app.v1.Auth/ResetPassword",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ResetPasswordRequest): Buffer => Buffer.from(ResetPasswordRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ResetPasswordRequest => ResetPasswordRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  getGoogleLoginUrl: {
+    path: "/stream.app.v1.Auth/GetGoogleLoginUrl",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetGoogleLoginUrlRequest): Buffer =>
+      Buffer.from(GetGoogleLoginUrlRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetGoogleLoginUrlRequest => GetGoogleLoginUrlRequest.decode(value),
+    responseSerialize: (value: GetGoogleLoginUrlResponse): Buffer =>
+      Buffer.from(GetGoogleLoginUrlResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetGoogleLoginUrlResponse => GetGoogleLoginUrlResponse.decode(value),
+  },
+  completeGoogleLogin: {
+    path: "/stream.app.v1.Auth/CompleteGoogleLogin",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CompleteGoogleLoginRequest): Buffer =>
+      Buffer.from(CompleteGoogleLoginRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CompleteGoogleLoginRequest => CompleteGoogleLoginRequest.decode(value),
+    responseSerialize: (value: CompleteGoogleLoginResponse): Buffer =>
+      Buffer.from(CompleteGoogleLoginResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CompleteGoogleLoginResponse => CompleteGoogleLoginResponse.decode(value),
+  },
+} as const;
+
+export interface AuthServer extends UntypedServiceImplementation {
+  login: handleUnaryCall<LoginRequest, LoginResponse>;
+  register: handleUnaryCall<RegisterRequest, RegisterResponse>;
+  logout: handleUnaryCall<LogoutRequest, MessageResponse>;
+  changePassword: handleUnaryCall<ChangePasswordRequest, MessageResponse>;
+  forgotPassword: handleUnaryCall<ForgotPasswordRequest, MessageResponse>;
+  resetPassword: handleUnaryCall<ResetPasswordRequest, MessageResponse>;
+  getGoogleLoginUrl: handleUnaryCall<GetGoogleLoginUrlRequest, GetGoogleLoginUrlResponse>;
+  completeGoogleLogin: handleUnaryCall<CompleteGoogleLoginRequest, CompleteGoogleLoginResponse>;
+}
+
+export interface AuthClient extends Client {
+  login(
+    request: LoginRequest,
+    callback: (error: ServiceError | null, response: LoginResponse) => void,
+  ): ClientUnaryCall;
+  login(
+    request: LoginRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: LoginResponse) => void,
+  ): ClientUnaryCall;
+  login(
+    request: LoginRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: LoginResponse) => void,
+  ): ClientUnaryCall;
+  register(
+    request: RegisterRequest,
+    callback: (error: ServiceError | null, response: RegisterResponse) => void,
+  ): ClientUnaryCall;
+  register(
+    request: RegisterRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: RegisterResponse) => void,
+  ): ClientUnaryCall;
+  register(
+    request: RegisterRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: RegisterResponse) => void,
+  ): ClientUnaryCall;
+  logout(
+    request: LogoutRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  logout(
+    request: LogoutRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  logout(
+    request: LogoutRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  changePassword(
+    request: ChangePasswordRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  changePassword(
+    request: ChangePasswordRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  changePassword(
+    request: ChangePasswordRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  forgotPassword(
+    request: ForgotPasswordRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  forgotPassword(
+    request: ForgotPasswordRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  forgotPassword(
+    request: ForgotPasswordRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  resetPassword(
+    request: ResetPasswordRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  resetPassword(
+    request: ResetPasswordRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  resetPassword(
+    request: ResetPasswordRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  getGoogleLoginUrl(
+    request: GetGoogleLoginUrlRequest,
+    callback: (error: ServiceError | null, response: GetGoogleLoginUrlResponse) => void,
+  ): ClientUnaryCall;
+  getGoogleLoginUrl(
+    request: GetGoogleLoginUrlRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetGoogleLoginUrlResponse) => void,
+  ): ClientUnaryCall;
+  getGoogleLoginUrl(
+    request: GetGoogleLoginUrlRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetGoogleLoginUrlResponse) => void,
+  ): ClientUnaryCall;
+  completeGoogleLogin(
+    request: CompleteGoogleLoginRequest,
+    callback: (error: ServiceError | null, response: CompleteGoogleLoginResponse) => void,
+  ): ClientUnaryCall;
+  completeGoogleLogin(
+    request: CompleteGoogleLoginRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CompleteGoogleLoginResponse) => void,
+  ): ClientUnaryCall;
+  completeGoogleLogin(
+    request: CompleteGoogleLoginRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CompleteGoogleLoginResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const AuthClient = makeGenericClientConstructor(AuthService, "stream.app.v1.Auth") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): AuthClient;
+  service: typeof AuthService;
+  serviceName: string;
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/catalog.ts b/src/server/api/proto/app/v1/catalog.ts
new file mode 100644
index 0000000..5894fa2
--- /dev/null
+++ b/src/server/api/proto/app/v1/catalog.ts
@@ -0,0 +1,3432 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/catalog.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientUnaryCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+import { AdTemplate, Domain, MessageResponse, Plan, PlayerConfig, PopupAd } from "./common";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface ListDomainsRequest {
+}
+
+export interface ListDomainsResponse {
+  domains?: Domain[] | undefined;
+}
+
+export interface CreateDomainRequest {
+  name?: string | undefined;
+}
+
+export interface CreateDomainResponse {
+  domain?: Domain | undefined;
+}
+
+export interface DeleteDomainRequest {
+  id?: string | undefined;
+}
+
+export interface ListAdTemplatesRequest {
+}
+
+export interface ListAdTemplatesResponse {
+  templates?: AdTemplate[] | undefined;
+}
+
+export interface CreateAdTemplateRequest {
+  name?: string | undefined;
+  description?: string | undefined;
+  vastTagUrl?: string | undefined;
+  adFormat?: string | undefined;
+  duration?: number | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+}
+
+export interface CreateAdTemplateResponse {
+  template?: AdTemplate | undefined;
+}
+
+export interface UpdateAdTemplateRequest {
+  id?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  vastTagUrl?: string | undefined;
+  adFormat?: string | undefined;
+  duration?: number | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+}
+
+export interface UpdateAdTemplateResponse {
+  template?: AdTemplate | undefined;
+}
+
+export interface DeleteAdTemplateRequest {
+  id?: string | undefined;
+}
+
+export interface ListPopupAdsRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface ListPopupAdsResponse {
+  items?: PopupAd[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface CreatePopupAdRequest {
+  type?: string | undefined;
+  label?: string | undefined;
+  value?: string | undefined;
+  isActive?: boolean | undefined;
+  maxTriggersPerSession?: number | undefined;
+}
+
+export interface CreatePopupAdResponse {
+  item?: PopupAd | undefined;
+}
+
+export interface UpdatePopupAdRequest {
+  id?: string | undefined;
+  type?: string | undefined;
+  label?: string | undefined;
+  value?: string | undefined;
+  isActive?: boolean | undefined;
+  maxTriggersPerSession?: number | undefined;
+}
+
+export interface UpdatePopupAdResponse {
+  item?: PopupAd | undefined;
+}
+
+export interface DeletePopupAdRequest {
+  id?: string | undefined;
+}
+
+export interface GetActivePopupAdRequest {
+}
+
+export interface GetActivePopupAdResponse {
+  item?: PopupAd | undefined;
+}
+
+export interface ListPlayerConfigsRequest {
+}
+
+export interface ListPlayerConfigsResponse {
+  configs?: PlayerConfig[] | undefined;
+}
+
+export interface CreatePlayerConfigRequest {
+  name?: string | undefined;
+  description?: string | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  encrytionM3u8?: boolean | undefined;
+  logoUrl?: string | undefined;
+}
+
+export interface CreatePlayerConfigResponse {
+  config?: PlayerConfig | undefined;
+}
+
+export interface UpdatePlayerConfigRequest {
+  id?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  encrytionM3u8?: boolean | undefined;
+  logoUrl?: string | undefined;
+}
+
+export interface UpdatePlayerConfigResponse {
+  config?: PlayerConfig | undefined;
+}
+
+export interface DeletePlayerConfigRequest {
+  id?: string | undefined;
+}
+
+export interface ListPlansRequest {
+}
+
+export interface ListPlansResponse {
+  plans?: Plan[] | undefined;
+}
+
+function createBaseListDomainsRequest(): ListDomainsRequest {
+  return {};
+}
+
+export const ListDomainsRequest: MessageFns<ListDomainsRequest> = {
+  encode(_: ListDomainsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListDomainsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListDomainsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ListDomainsRequest {
+    return {};
+  },
+
+  toJSON(_: ListDomainsRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListDomainsRequest>, I>>(base?: I): ListDomainsRequest {
+    return ListDomainsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListDomainsRequest>, I>>(_: I): ListDomainsRequest {
+    const message = createBaseListDomainsRequest();
+    return message;
+  },
+};
+
+function createBaseListDomainsResponse(): ListDomainsResponse {
+  return { domains: [] };
+}
+
+export const ListDomainsResponse: MessageFns<ListDomainsResponse> = {
+  encode(message: ListDomainsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.domains !== undefined && message.domains.length !== 0) {
+      for (const v of message.domains) {
+        Domain.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListDomainsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListDomainsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = Domain.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.domains!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListDomainsResponse {
+    return {
+      domains: globalThis.Array.isArray(object?.domains) ? object.domains.map((e: any) => Domain.fromJSON(e)) : [],
+    };
+  },
+
+  toJSON(message: ListDomainsResponse): unknown {
+    const obj: any = {};
+    if (message.domains?.length) {
+      obj.domains = message.domains.map((e) => Domain.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListDomainsResponse>, I>>(base?: I): ListDomainsResponse {
+    return ListDomainsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListDomainsResponse>, I>>(object: I): ListDomainsResponse {
+    const message = createBaseListDomainsResponse();
+    message.domains = object.domains?.map((e) => Domain.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseCreateDomainRequest(): CreateDomainRequest {
+  return { name: "" };
+}
+
+export const CreateDomainRequest: MessageFns<CreateDomainRequest> = {
+  encode(message: CreateDomainRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(10).string(message.name);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateDomainRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateDomainRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateDomainRequest {
+    return { name: isSet(object.name) ? globalThis.String(object.name) : "" };
+  },
+
+  toJSON(message: CreateDomainRequest): unknown {
+    const obj: any = {};
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateDomainRequest>, I>>(base?: I): CreateDomainRequest {
+    return CreateDomainRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateDomainRequest>, I>>(object: I): CreateDomainRequest {
+    const message = createBaseCreateDomainRequest();
+    message.name = object.name ?? "";
+    return message;
+  },
+};
+
+function createBaseCreateDomainResponse(): CreateDomainResponse {
+  return { domain: undefined };
+}
+
+export const CreateDomainResponse: MessageFns<CreateDomainResponse> = {
+  encode(message: CreateDomainResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.domain !== undefined) {
+      Domain.encode(message.domain, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateDomainResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateDomainResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.domain = Domain.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateDomainResponse {
+    return { domain: isSet(object.domain) ? Domain.fromJSON(object.domain) : undefined };
+  },
+
+  toJSON(message: CreateDomainResponse): unknown {
+    const obj: any = {};
+    if (message.domain !== undefined) {
+      obj.domain = Domain.toJSON(message.domain);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateDomainResponse>, I>>(base?: I): CreateDomainResponse {
+    return CreateDomainResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateDomainResponse>, I>>(object: I): CreateDomainResponse {
+    const message = createBaseCreateDomainResponse();
+    message.domain = (object.domain !== undefined && object.domain !== null)
+      ? Domain.fromPartial(object.domain)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteDomainRequest(): DeleteDomainRequest {
+  return { id: "" };
+}
+
+export const DeleteDomainRequest: MessageFns<DeleteDomainRequest> = {
+  encode(message: DeleteDomainRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteDomainRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteDomainRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteDomainRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteDomainRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteDomainRequest>, I>>(base?: I): DeleteDomainRequest {
+    return DeleteDomainRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteDomainRequest>, I>>(object: I): DeleteDomainRequest {
+    const message = createBaseDeleteDomainRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListAdTemplatesRequest(): ListAdTemplatesRequest {
+  return {};
+}
+
+export const ListAdTemplatesRequest: MessageFns<ListAdTemplatesRequest> = {
+  encode(_: ListAdTemplatesRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdTemplatesRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdTemplatesRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ListAdTemplatesRequest {
+    return {};
+  },
+
+  toJSON(_: ListAdTemplatesRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdTemplatesRequest>, I>>(base?: I): ListAdTemplatesRequest {
+    return ListAdTemplatesRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdTemplatesRequest>, I>>(_: I): ListAdTemplatesRequest {
+    const message = createBaseListAdTemplatesRequest();
+    return message;
+  },
+};
+
+function createBaseListAdTemplatesResponse(): ListAdTemplatesResponse {
+  return { templates: [] };
+}
+
+export const ListAdTemplatesResponse: MessageFns<ListAdTemplatesResponse> = {
+  encode(message: ListAdTemplatesResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.templates !== undefined && message.templates.length !== 0) {
+      for (const v of message.templates) {
+        AdTemplate.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListAdTemplatesResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListAdTemplatesResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = AdTemplate.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.templates!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListAdTemplatesResponse {
+    return {
+      templates: globalThis.Array.isArray(object?.templates)
+        ? object.templates.map((e: any) => AdTemplate.fromJSON(e))
+        : [],
+    };
+  },
+
+  toJSON(message: ListAdTemplatesResponse): unknown {
+    const obj: any = {};
+    if (message.templates?.length) {
+      obj.templates = message.templates.map((e) => AdTemplate.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListAdTemplatesResponse>, I>>(base?: I): ListAdTemplatesResponse {
+    return ListAdTemplatesResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListAdTemplatesResponse>, I>>(object: I): ListAdTemplatesResponse {
+    const message = createBaseListAdTemplatesResponse();
+    message.templates = object.templates?.map((e) => AdTemplate.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseCreateAdTemplateRequest(): CreateAdTemplateRequest {
+  return {
+    name: "",
+    description: undefined,
+    vastTagUrl: "",
+    adFormat: undefined,
+    duration: undefined,
+    isActive: undefined,
+    isDefault: undefined,
+  };
+}
+
+export const CreateAdTemplateRequest: MessageFns<CreateAdTemplateRequest> = {
+  encode(message: CreateAdTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(10).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(18).string(message.description);
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      writer.uint32(26).string(message.vastTagUrl);
+    }
+    if (message.adFormat !== undefined) {
+      writer.uint32(34).string(message.adFormat);
+    }
+    if (message.duration !== undefined) {
+      writer.uint32(40).int32(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(48).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(56).bool(message.isDefault);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.vastTagUrl = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.adFormat = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdTemplateRequest {
+    return {
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      vastTagUrl: isSet(object.vastTagUrl)
+        ? globalThis.String(object.vastTagUrl)
+        : isSet(object.vast_tag_url)
+        ? globalThis.String(object.vast_tag_url)
+        : "",
+      adFormat: isSet(object.adFormat)
+        ? globalThis.String(object.adFormat)
+        : isSet(object.ad_format)
+        ? globalThis.String(object.ad_format)
+        : undefined,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : undefined,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreateAdTemplateRequest): unknown {
+    const obj: any = {};
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      obj.vastTagUrl = message.vastTagUrl;
+    }
+    if (message.adFormat !== undefined) {
+      obj.adFormat = message.adFormat;
+    }
+    if (message.duration !== undefined) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdTemplateRequest>, I>>(base?: I): CreateAdTemplateRequest {
+    return CreateAdTemplateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdTemplateRequest>, I>>(object: I): CreateAdTemplateRequest {
+    const message = createBaseCreateAdTemplateRequest();
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.vastTagUrl = object.vastTagUrl ?? "";
+    message.adFormat = object.adFormat ?? undefined;
+    message.duration = object.duration ?? undefined;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateAdTemplateResponse(): CreateAdTemplateResponse {
+  return { template: undefined };
+}
+
+export const CreateAdTemplateResponse: MessageFns<CreateAdTemplateResponse> = {
+  encode(message: CreateAdTemplateResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.template !== undefined) {
+      AdTemplate.encode(message.template, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateAdTemplateResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateAdTemplateResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.template = AdTemplate.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateAdTemplateResponse {
+    return { template: isSet(object.template) ? AdTemplate.fromJSON(object.template) : undefined };
+  },
+
+  toJSON(message: CreateAdTemplateResponse): unknown {
+    const obj: any = {};
+    if (message.template !== undefined) {
+      obj.template = AdTemplate.toJSON(message.template);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateAdTemplateResponse>, I>>(base?: I): CreateAdTemplateResponse {
+    return CreateAdTemplateResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateAdTemplateResponse>, I>>(object: I): CreateAdTemplateResponse {
+    const message = createBaseCreateAdTemplateResponse();
+    message.template = (object.template !== undefined && object.template !== null)
+      ? AdTemplate.fromPartial(object.template)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdTemplateRequest(): UpdateAdTemplateRequest {
+  return {
+    id: "",
+    name: "",
+    description: undefined,
+    vastTagUrl: "",
+    adFormat: undefined,
+    duration: undefined,
+    isActive: undefined,
+    isDefault: undefined,
+  };
+}
+
+export const UpdateAdTemplateRequest: MessageFns<UpdateAdTemplateRequest> = {
+  encode(message: UpdateAdTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      writer.uint32(34).string(message.vastTagUrl);
+    }
+    if (message.adFormat !== undefined) {
+      writer.uint32(42).string(message.adFormat);
+    }
+    if (message.duration !== undefined) {
+      writer.uint32(48).int32(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(56).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(64).bool(message.isDefault);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.vastTagUrl = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.adFormat = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdTemplateRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      vastTagUrl: isSet(object.vastTagUrl)
+        ? globalThis.String(object.vastTagUrl)
+        : isSet(object.vast_tag_url)
+        ? globalThis.String(object.vast_tag_url)
+        : "",
+      adFormat: isSet(object.adFormat)
+        ? globalThis.String(object.adFormat)
+        : isSet(object.ad_format)
+        ? globalThis.String(object.ad_format)
+        : undefined,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : undefined,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdateAdTemplateRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      obj.vastTagUrl = message.vastTagUrl;
+    }
+    if (message.adFormat !== undefined) {
+      obj.adFormat = message.adFormat;
+    }
+    if (message.duration !== undefined) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdTemplateRequest>, I>>(base?: I): UpdateAdTemplateRequest {
+    return UpdateAdTemplateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdTemplateRequest>, I>>(object: I): UpdateAdTemplateRequest {
+    const message = createBaseUpdateAdTemplateRequest();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.vastTagUrl = object.vastTagUrl ?? "";
+    message.adFormat = object.adFormat ?? undefined;
+    message.duration = object.duration ?? undefined;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateAdTemplateResponse(): UpdateAdTemplateResponse {
+  return { template: undefined };
+}
+
+export const UpdateAdTemplateResponse: MessageFns<UpdateAdTemplateResponse> = {
+  encode(message: UpdateAdTemplateResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.template !== undefined) {
+      AdTemplate.encode(message.template, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateAdTemplateResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateAdTemplateResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.template = AdTemplate.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateAdTemplateResponse {
+    return { template: isSet(object.template) ? AdTemplate.fromJSON(object.template) : undefined };
+  },
+
+  toJSON(message: UpdateAdTemplateResponse): unknown {
+    const obj: any = {};
+    if (message.template !== undefined) {
+      obj.template = AdTemplate.toJSON(message.template);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateAdTemplateResponse>, I>>(base?: I): UpdateAdTemplateResponse {
+    return UpdateAdTemplateResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateAdTemplateResponse>, I>>(object: I): UpdateAdTemplateResponse {
+    const message = createBaseUpdateAdTemplateResponse();
+    message.template = (object.template !== undefined && object.template !== null)
+      ? AdTemplate.fromPartial(object.template)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteAdTemplateRequest(): DeleteAdTemplateRequest {
+  return { id: "" };
+}
+
+export const DeleteAdTemplateRequest: MessageFns<DeleteAdTemplateRequest> = {
+  encode(message: DeleteAdTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteAdTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteAdTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteAdTemplateRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteAdTemplateRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteAdTemplateRequest>, I>>(base?: I): DeleteAdTemplateRequest {
+    return DeleteAdTemplateRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteAdTemplateRequest>, I>>(object: I): DeleteAdTemplateRequest {
+    const message = createBaseDeleteAdTemplateRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListPopupAdsRequest(): ListPopupAdsRequest {
+  return { page: 0, limit: 0 };
+}
+
+export const ListPopupAdsRequest: MessageFns<ListPopupAdsRequest> = {
+  encode(message: ListPopupAdsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPopupAdsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPopupAdsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListPopupAdsRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListPopupAdsRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPopupAdsRequest>, I>>(base?: I): ListPopupAdsRequest {
+    return ListPopupAdsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPopupAdsRequest>, I>>(object: I): ListPopupAdsRequest {
+    const message = createBaseListPopupAdsRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseListPopupAdsResponse(): ListPopupAdsResponse {
+  return { items: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListPopupAdsResponse: MessageFns<ListPopupAdsResponse> = {
+  encode(message: ListPopupAdsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.items !== undefined && message.items.length !== 0) {
+      for (const v of message.items) {
+        PopupAd.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPopupAdsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPopupAdsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = PopupAd.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.items!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListPopupAdsResponse {
+    return {
+      items: globalThis.Array.isArray(object?.items) ? object.items.map((e: any) => PopupAd.fromJSON(e)) : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListPopupAdsResponse): unknown {
+    const obj: any = {};
+    if (message.items?.length) {
+      obj.items = message.items.map((e) => PopupAd.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPopupAdsResponse>, I>>(base?: I): ListPopupAdsResponse {
+    return ListPopupAdsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPopupAdsResponse>, I>>(object: I): ListPopupAdsResponse {
+    const message = createBaseListPopupAdsResponse();
+    message.items = object.items?.map((e) => PopupAd.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseCreatePopupAdRequest(): CreatePopupAdRequest {
+  return { type: "", label: "", value: "", isActive: undefined, maxTriggersPerSession: undefined };
+}
+
+export const CreatePopupAdRequest: MessageFns<CreatePopupAdRequest> = {
+  encode(message: CreatePopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(10).string(message.type);
+    }
+    if (message.label !== undefined && message.label !== "") {
+      writer.uint32(18).string(message.label);
+    }
+    if (message.value !== undefined && message.value !== "") {
+      writer.uint32(26).string(message.value);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(32).bool(message.isActive);
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      writer.uint32(40).int32(message.maxTriggersPerSession);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreatePopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreatePopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.label = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.maxTriggersPerSession = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreatePopupAdRequest {
+    return {
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      label: isSet(object.label) ? globalThis.String(object.label) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      maxTriggersPerSession: isSet(object.maxTriggersPerSession)
+        ? globalThis.Number(object.maxTriggersPerSession)
+        : isSet(object.max_triggers_per_session)
+        ? globalThis.Number(object.max_triggers_per_session)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreatePopupAdRequest): unknown {
+    const obj: any = {};
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.label !== undefined && message.label !== "") {
+      obj.label = message.label;
+    }
+    if (message.value !== undefined && message.value !== "") {
+      obj.value = message.value;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      obj.maxTriggersPerSession = Math.round(message.maxTriggersPerSession);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreatePopupAdRequest>, I>>(base?: I): CreatePopupAdRequest {
+    return CreatePopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreatePopupAdRequest>, I>>(object: I): CreatePopupAdRequest {
+    const message = createBaseCreatePopupAdRequest();
+    message.type = object.type ?? "";
+    message.label = object.label ?? "";
+    message.value = object.value ?? "";
+    message.isActive = object.isActive ?? undefined;
+    message.maxTriggersPerSession = object.maxTriggersPerSession ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreatePopupAdResponse(): CreatePopupAdResponse {
+  return { item: undefined };
+}
+
+export const CreatePopupAdResponse: MessageFns<CreatePopupAdResponse> = {
+  encode(message: CreatePopupAdResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.item !== undefined) {
+      PopupAd.encode(message.item, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreatePopupAdResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreatePopupAdResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.item = PopupAd.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreatePopupAdResponse {
+    return { item: isSet(object.item) ? PopupAd.fromJSON(object.item) : undefined };
+  },
+
+  toJSON(message: CreatePopupAdResponse): unknown {
+    const obj: any = {};
+    if (message.item !== undefined) {
+      obj.item = PopupAd.toJSON(message.item);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreatePopupAdResponse>, I>>(base?: I): CreatePopupAdResponse {
+    return CreatePopupAdResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreatePopupAdResponse>, I>>(object: I): CreatePopupAdResponse {
+    const message = createBaseCreatePopupAdResponse();
+    message.item = (object.item !== undefined && object.item !== null) ? PopupAd.fromPartial(object.item) : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdatePopupAdRequest(): UpdatePopupAdRequest {
+  return { id: "", type: "", label: "", value: "", isActive: undefined, maxTriggersPerSession: undefined };
+}
+
+export const UpdatePopupAdRequest: MessageFns<UpdatePopupAdRequest> = {
+  encode(message: UpdatePopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(18).string(message.type);
+    }
+    if (message.label !== undefined && message.label !== "") {
+      writer.uint32(26).string(message.label);
+    }
+    if (message.value !== undefined && message.value !== "") {
+      writer.uint32(34).string(message.value);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(40).bool(message.isActive);
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      writer.uint32(48).int32(message.maxTriggersPerSession);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdatePopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdatePopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.label = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.maxTriggersPerSession = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdatePopupAdRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      label: isSet(object.label) ? globalThis.String(object.label) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      maxTriggersPerSession: isSet(object.maxTriggersPerSession)
+        ? globalThis.Number(object.maxTriggersPerSession)
+        : isSet(object.max_triggers_per_session)
+        ? globalThis.Number(object.max_triggers_per_session)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdatePopupAdRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.label !== undefined && message.label !== "") {
+      obj.label = message.label;
+    }
+    if (message.value !== undefined && message.value !== "") {
+      obj.value = message.value;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.maxTriggersPerSession !== undefined) {
+      obj.maxTriggersPerSession = Math.round(message.maxTriggersPerSession);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdatePopupAdRequest>, I>>(base?: I): UpdatePopupAdRequest {
+    return UpdatePopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdatePopupAdRequest>, I>>(object: I): UpdatePopupAdRequest {
+    const message = createBaseUpdatePopupAdRequest();
+    message.id = object.id ?? "";
+    message.type = object.type ?? "";
+    message.label = object.label ?? "";
+    message.value = object.value ?? "";
+    message.isActive = object.isActive ?? undefined;
+    message.maxTriggersPerSession = object.maxTriggersPerSession ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdatePopupAdResponse(): UpdatePopupAdResponse {
+  return { item: undefined };
+}
+
+export const UpdatePopupAdResponse: MessageFns<UpdatePopupAdResponse> = {
+  encode(message: UpdatePopupAdResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.item !== undefined) {
+      PopupAd.encode(message.item, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdatePopupAdResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdatePopupAdResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.item = PopupAd.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdatePopupAdResponse {
+    return { item: isSet(object.item) ? PopupAd.fromJSON(object.item) : undefined };
+  },
+
+  toJSON(message: UpdatePopupAdResponse): unknown {
+    const obj: any = {};
+    if (message.item !== undefined) {
+      obj.item = PopupAd.toJSON(message.item);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdatePopupAdResponse>, I>>(base?: I): UpdatePopupAdResponse {
+    return UpdatePopupAdResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdatePopupAdResponse>, I>>(object: I): UpdatePopupAdResponse {
+    const message = createBaseUpdatePopupAdResponse();
+    message.item = (object.item !== undefined && object.item !== null) ? PopupAd.fromPartial(object.item) : undefined;
+    return message;
+  },
+};
+
+function createBaseDeletePopupAdRequest(): DeletePopupAdRequest {
+  return { id: "" };
+}
+
+export const DeletePopupAdRequest: MessageFns<DeletePopupAdRequest> = {
+  encode(message: DeletePopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeletePopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeletePopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeletePopupAdRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeletePopupAdRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeletePopupAdRequest>, I>>(base?: I): DeletePopupAdRequest {
+    return DeletePopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeletePopupAdRequest>, I>>(object: I): DeletePopupAdRequest {
+    const message = createBaseDeletePopupAdRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetActivePopupAdRequest(): GetActivePopupAdRequest {
+  return {};
+}
+
+export const GetActivePopupAdRequest: MessageFns<GetActivePopupAdRequest> = {
+  encode(_: GetActivePopupAdRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetActivePopupAdRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetActivePopupAdRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): GetActivePopupAdRequest {
+    return {};
+  },
+
+  toJSON(_: GetActivePopupAdRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetActivePopupAdRequest>, I>>(base?: I): GetActivePopupAdRequest {
+    return GetActivePopupAdRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetActivePopupAdRequest>, I>>(_: I): GetActivePopupAdRequest {
+    const message = createBaseGetActivePopupAdRequest();
+    return message;
+  },
+};
+
+function createBaseGetActivePopupAdResponse(): GetActivePopupAdResponse {
+  return { item: undefined };
+}
+
+export const GetActivePopupAdResponse: MessageFns<GetActivePopupAdResponse> = {
+  encode(message: GetActivePopupAdResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.item !== undefined) {
+      PopupAd.encode(message.item, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetActivePopupAdResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetActivePopupAdResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.item = PopupAd.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetActivePopupAdResponse {
+    return { item: isSet(object.item) ? PopupAd.fromJSON(object.item) : undefined };
+  },
+
+  toJSON(message: GetActivePopupAdResponse): unknown {
+    const obj: any = {};
+    if (message.item !== undefined) {
+      obj.item = PopupAd.toJSON(message.item);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetActivePopupAdResponse>, I>>(base?: I): GetActivePopupAdResponse {
+    return GetActivePopupAdResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetActivePopupAdResponse>, I>>(object: I): GetActivePopupAdResponse {
+    const message = createBaseGetActivePopupAdResponse();
+    message.item = (object.item !== undefined && object.item !== null) ? PopupAd.fromPartial(object.item) : undefined;
+    return message;
+  },
+};
+
+function createBaseListPlayerConfigsRequest(): ListPlayerConfigsRequest {
+  return {};
+}
+
+export const ListPlayerConfigsRequest: MessageFns<ListPlayerConfigsRequest> = {
+  encode(_: ListPlayerConfigsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPlayerConfigsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPlayerConfigsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ListPlayerConfigsRequest {
+    return {};
+  },
+
+  toJSON(_: ListPlayerConfigsRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPlayerConfigsRequest>, I>>(base?: I): ListPlayerConfigsRequest {
+    return ListPlayerConfigsRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPlayerConfigsRequest>, I>>(_: I): ListPlayerConfigsRequest {
+    const message = createBaseListPlayerConfigsRequest();
+    return message;
+  },
+};
+
+function createBaseListPlayerConfigsResponse(): ListPlayerConfigsResponse {
+  return { configs: [] };
+}
+
+export const ListPlayerConfigsResponse: MessageFns<ListPlayerConfigsResponse> = {
+  encode(message: ListPlayerConfigsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.configs !== undefined && message.configs.length !== 0) {
+      for (const v of message.configs) {
+        PlayerConfig.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPlayerConfigsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPlayerConfigsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = PlayerConfig.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.configs!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListPlayerConfigsResponse {
+    return {
+      configs: globalThis.Array.isArray(object?.configs)
+        ? object.configs.map((e: any) => PlayerConfig.fromJSON(e))
+        : [],
+    };
+  },
+
+  toJSON(message: ListPlayerConfigsResponse): unknown {
+    const obj: any = {};
+    if (message.configs?.length) {
+      obj.configs = message.configs.map((e) => PlayerConfig.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPlayerConfigsResponse>, I>>(base?: I): ListPlayerConfigsResponse {
+    return ListPlayerConfigsResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPlayerConfigsResponse>, I>>(object: I): ListPlayerConfigsResponse {
+    const message = createBaseListPlayerConfigsResponse();
+    message.configs = object.configs?.map((e) => PlayerConfig.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseCreatePlayerConfigRequest(): CreatePlayerConfigRequest {
+  return {
+    name: "",
+    description: undefined,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: false,
+    pip: false,
+    airplay: false,
+    chromecast: false,
+    isActive: undefined,
+    isDefault: undefined,
+    encrytionM3u8: undefined,
+    logoUrl: undefined,
+  };
+}
+
+export const CreatePlayerConfigRequest: MessageFns<CreatePlayerConfigRequest> = {
+  encode(message: CreatePlayerConfigRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(10).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(18).string(message.description);
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      writer.uint32(24).bool(message.autoplay);
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      writer.uint32(32).bool(message.loop);
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      writer.uint32(40).bool(message.muted);
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      writer.uint32(48).bool(message.showControls);
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      writer.uint32(56).bool(message.pip);
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      writer.uint32(64).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      writer.uint32(72).bool(message.chromecast);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(80).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(88).bool(message.isDefault);
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      writer.uint32(96).bool(message.encrytionM3u8);
+    }
+    if (message.logoUrl !== undefined) {
+      writer.uint32(106).string(message.logoUrl);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreatePlayerConfigRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreatePlayerConfigRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.encrytionM3u8 = reader.bool();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.logoUrl = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreatePlayerConfigRequest {
+    return {
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : false,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : false,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : false,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : false,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : false,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : false,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : false,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+      encrytionM3u8: isSet(object.encrytionM3u8)
+        ? globalThis.Boolean(object.encrytionM3u8)
+        : isSet(object.encrytion_m3u8)
+        ? globalThis.Boolean(object.encrytion_m3u8)
+        : undefined,
+      logoUrl: isSet(object.logoUrl)
+        ? globalThis.String(object.logoUrl)
+        : isSet(object.logo_url)
+        ? globalThis.String(object.logo_url)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreatePlayerConfigRequest): unknown {
+    const obj: any = {};
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      obj.encrytionM3u8 = message.encrytionM3u8;
+    }
+    if (message.logoUrl !== undefined) {
+      obj.logoUrl = message.logoUrl;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreatePlayerConfigRequest>, I>>(base?: I): CreatePlayerConfigRequest {
+    return CreatePlayerConfigRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreatePlayerConfigRequest>, I>>(object: I): CreatePlayerConfigRequest {
+    const message = createBaseCreatePlayerConfigRequest();
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.autoplay = object.autoplay ?? false;
+    message.loop = object.loop ?? false;
+    message.muted = object.muted ?? false;
+    message.showControls = object.showControls ?? false;
+    message.pip = object.pip ?? false;
+    message.airplay = object.airplay ?? false;
+    message.chromecast = object.chromecast ?? false;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    message.encrytionM3u8 = object.encrytionM3u8 ?? undefined;
+    message.logoUrl = object.logoUrl ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreatePlayerConfigResponse(): CreatePlayerConfigResponse {
+  return { config: undefined };
+}
+
+export const CreatePlayerConfigResponse: MessageFns<CreatePlayerConfigResponse> = {
+  encode(message: CreatePlayerConfigResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.config !== undefined) {
+      PlayerConfig.encode(message.config, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreatePlayerConfigResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreatePlayerConfigResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.config = PlayerConfig.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreatePlayerConfigResponse {
+    return { config: isSet(object.config) ? PlayerConfig.fromJSON(object.config) : undefined };
+  },
+
+  toJSON(message: CreatePlayerConfigResponse): unknown {
+    const obj: any = {};
+    if (message.config !== undefined) {
+      obj.config = PlayerConfig.toJSON(message.config);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreatePlayerConfigResponse>, I>>(base?: I): CreatePlayerConfigResponse {
+    return CreatePlayerConfigResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreatePlayerConfigResponse>, I>>(object: I): CreatePlayerConfigResponse {
+    const message = createBaseCreatePlayerConfigResponse();
+    message.config = (object.config !== undefined && object.config !== null)
+      ? PlayerConfig.fromPartial(object.config)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdatePlayerConfigRequest(): UpdatePlayerConfigRequest {
+  return {
+    id: "",
+    name: "",
+    description: undefined,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: false,
+    pip: false,
+    airplay: false,
+    chromecast: false,
+    isActive: undefined,
+    isDefault: undefined,
+    encrytionM3u8: undefined,
+    logoUrl: undefined,
+  };
+}
+
+export const UpdatePlayerConfigRequest: MessageFns<UpdatePlayerConfigRequest> = {
+  encode(message: UpdatePlayerConfigRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      writer.uint32(32).bool(message.autoplay);
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      writer.uint32(40).bool(message.loop);
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      writer.uint32(48).bool(message.muted);
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      writer.uint32(56).bool(message.showControls);
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      writer.uint32(64).bool(message.pip);
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      writer.uint32(72).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      writer.uint32(80).bool(message.chromecast);
+    }
+    if (message.isActive !== undefined) {
+      writer.uint32(88).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined) {
+      writer.uint32(96).bool(message.isDefault);
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      writer.uint32(104).bool(message.encrytionM3u8);
+    }
+    if (message.logoUrl !== undefined) {
+      writer.uint32(114).string(message.logoUrl);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdatePlayerConfigRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdatePlayerConfigRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 13: {
+          if (tag !== 104) {
+            break;
+          }
+
+          message.encrytionM3u8 = reader.bool();
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.logoUrl = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdatePlayerConfigRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : false,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : false,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : false,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : false,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : false,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : false,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : false,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : undefined,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : undefined,
+      encrytionM3u8: isSet(object.encrytionM3u8)
+        ? globalThis.Boolean(object.encrytionM3u8)
+        : isSet(object.encrytion_m3u8)
+        ? globalThis.Boolean(object.encrytion_m3u8)
+        : undefined,
+      logoUrl: isSet(object.logoUrl)
+        ? globalThis.String(object.logoUrl)
+        : isSet(object.logo_url)
+        ? globalThis.String(object.logo_url)
+        : undefined,
+    };
+  },
+
+  toJSON(message: UpdatePlayerConfigRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.isActive !== undefined) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.encrytionM3u8 !== undefined) {
+      obj.encrytionM3u8 = message.encrytionM3u8;
+    }
+    if (message.logoUrl !== undefined) {
+      obj.logoUrl = message.logoUrl;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdatePlayerConfigRequest>, I>>(base?: I): UpdatePlayerConfigRequest {
+    return UpdatePlayerConfigRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdatePlayerConfigRequest>, I>>(object: I): UpdatePlayerConfigRequest {
+    const message = createBaseUpdatePlayerConfigRequest();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.autoplay = object.autoplay ?? false;
+    message.loop = object.loop ?? false;
+    message.muted = object.muted ?? false;
+    message.showControls = object.showControls ?? false;
+    message.pip = object.pip ?? false;
+    message.airplay = object.airplay ?? false;
+    message.chromecast = object.chromecast ?? false;
+    message.isActive = object.isActive ?? undefined;
+    message.isDefault = object.isDefault ?? undefined;
+    message.encrytionM3u8 = object.encrytionM3u8 ?? undefined;
+    message.logoUrl = object.logoUrl ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdatePlayerConfigResponse(): UpdatePlayerConfigResponse {
+  return { config: undefined };
+}
+
+export const UpdatePlayerConfigResponse: MessageFns<UpdatePlayerConfigResponse> = {
+  encode(message: UpdatePlayerConfigResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.config !== undefined) {
+      PlayerConfig.encode(message.config, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdatePlayerConfigResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdatePlayerConfigResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.config = PlayerConfig.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdatePlayerConfigResponse {
+    return { config: isSet(object.config) ? PlayerConfig.fromJSON(object.config) : undefined };
+  },
+
+  toJSON(message: UpdatePlayerConfigResponse): unknown {
+    const obj: any = {};
+    if (message.config !== undefined) {
+      obj.config = PlayerConfig.toJSON(message.config);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdatePlayerConfigResponse>, I>>(base?: I): UpdatePlayerConfigResponse {
+    return UpdatePlayerConfigResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdatePlayerConfigResponse>, I>>(object: I): UpdatePlayerConfigResponse {
+    const message = createBaseUpdatePlayerConfigResponse();
+    message.config = (object.config !== undefined && object.config !== null)
+      ? PlayerConfig.fromPartial(object.config)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseDeletePlayerConfigRequest(): DeletePlayerConfigRequest {
+  return { id: "" };
+}
+
+export const DeletePlayerConfigRequest: MessageFns<DeletePlayerConfigRequest> = {
+  encode(message: DeletePlayerConfigRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeletePlayerConfigRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeletePlayerConfigRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeletePlayerConfigRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeletePlayerConfigRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeletePlayerConfigRequest>, I>>(base?: I): DeletePlayerConfigRequest {
+    return DeletePlayerConfigRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeletePlayerConfigRequest>, I>>(object: I): DeletePlayerConfigRequest {
+    const message = createBaseDeletePlayerConfigRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseListPlansRequest(): ListPlansRequest {
+  return {};
+}
+
+export const ListPlansRequest: MessageFns<ListPlansRequest> = {
+  encode(_: ListPlansRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPlansRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPlansRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): ListPlansRequest {
+    return {};
+  },
+
+  toJSON(_: ListPlansRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPlansRequest>, I>>(base?: I): ListPlansRequest {
+    return ListPlansRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPlansRequest>, I>>(_: I): ListPlansRequest {
+    const message = createBaseListPlansRequest();
+    return message;
+  },
+};
+
+function createBaseListPlansResponse(): ListPlansResponse {
+  return { plans: [] };
+}
+
+export const ListPlansResponse: MessageFns<ListPlansResponse> = {
+  encode(message: ListPlansResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.plans !== undefined && message.plans.length !== 0) {
+      for (const v of message.plans) {
+        Plan.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPlansResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPlansResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = Plan.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.plans!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListPlansResponse {
+    return { plans: globalThis.Array.isArray(object?.plans) ? object.plans.map((e: any) => Plan.fromJSON(e)) : [] };
+  },
+
+  toJSON(message: ListPlansResponse): unknown {
+    const obj: any = {};
+    if (message.plans?.length) {
+      obj.plans = message.plans.map((e) => Plan.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPlansResponse>, I>>(base?: I): ListPlansResponse {
+    return ListPlansResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPlansResponse>, I>>(object: I): ListPlansResponse {
+    const message = createBaseListPlansResponse();
+    message.plans = object.plans?.map((e) => Plan.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+export type DomainsService = typeof DomainsService;
+export const DomainsService = {
+  listDomains: {
+    path: "/stream.app.v1.Domains/ListDomains",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListDomainsRequest): Buffer => Buffer.from(ListDomainsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListDomainsRequest => ListDomainsRequest.decode(value),
+    responseSerialize: (value: ListDomainsResponse): Buffer => Buffer.from(ListDomainsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListDomainsResponse => ListDomainsResponse.decode(value),
+  },
+  createDomain: {
+    path: "/stream.app.v1.Domains/CreateDomain",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateDomainRequest): Buffer => Buffer.from(CreateDomainRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateDomainRequest => CreateDomainRequest.decode(value),
+    responseSerialize: (value: CreateDomainResponse): Buffer =>
+      Buffer.from(CreateDomainResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateDomainResponse => CreateDomainResponse.decode(value),
+  },
+  deleteDomain: {
+    path: "/stream.app.v1.Domains/DeleteDomain",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteDomainRequest): Buffer => Buffer.from(DeleteDomainRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteDomainRequest => DeleteDomainRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+} as const;
+
+export interface DomainsServer extends UntypedServiceImplementation {
+  listDomains: handleUnaryCall<ListDomainsRequest, ListDomainsResponse>;
+  createDomain: handleUnaryCall<CreateDomainRequest, CreateDomainResponse>;
+  deleteDomain: handleUnaryCall<DeleteDomainRequest, MessageResponse>;
+}
+
+export interface DomainsClient extends Client {
+  listDomains(
+    request: ListDomainsRequest,
+    callback: (error: ServiceError | null, response: ListDomainsResponse) => void,
+  ): ClientUnaryCall;
+  listDomains(
+    request: ListDomainsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListDomainsResponse) => void,
+  ): ClientUnaryCall;
+  listDomains(
+    request: ListDomainsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListDomainsResponse) => void,
+  ): ClientUnaryCall;
+  createDomain(
+    request: CreateDomainRequest,
+    callback: (error: ServiceError | null, response: CreateDomainResponse) => void,
+  ): ClientUnaryCall;
+  createDomain(
+    request: CreateDomainRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateDomainResponse) => void,
+  ): ClientUnaryCall;
+  createDomain(
+    request: CreateDomainRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateDomainResponse) => void,
+  ): ClientUnaryCall;
+  deleteDomain(
+    request: DeleteDomainRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteDomain(
+    request: DeleteDomainRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteDomain(
+    request: DeleteDomainRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const DomainsClient = makeGenericClientConstructor(DomainsService, "stream.app.v1.Domains") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): DomainsClient;
+  service: typeof DomainsService;
+  serviceName: string;
+};
+
+export type AdTemplatesService = typeof AdTemplatesService;
+export const AdTemplatesService = {
+  listAdTemplates: {
+    path: "/stream.app.v1.AdTemplates/ListAdTemplates",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListAdTemplatesRequest): Buffer =>
+      Buffer.from(ListAdTemplatesRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListAdTemplatesRequest => ListAdTemplatesRequest.decode(value),
+    responseSerialize: (value: ListAdTemplatesResponse): Buffer =>
+      Buffer.from(ListAdTemplatesResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListAdTemplatesResponse => ListAdTemplatesResponse.decode(value),
+  },
+  createAdTemplate: {
+    path: "/stream.app.v1.AdTemplates/CreateAdTemplate",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateAdTemplateRequest): Buffer =>
+      Buffer.from(CreateAdTemplateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateAdTemplateRequest => CreateAdTemplateRequest.decode(value),
+    responseSerialize: (value: CreateAdTemplateResponse): Buffer =>
+      Buffer.from(CreateAdTemplateResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateAdTemplateResponse => CreateAdTemplateResponse.decode(value),
+  },
+  updateAdTemplate: {
+    path: "/stream.app.v1.AdTemplates/UpdateAdTemplate",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateAdTemplateRequest): Buffer =>
+      Buffer.from(UpdateAdTemplateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateAdTemplateRequest => UpdateAdTemplateRequest.decode(value),
+    responseSerialize: (value: UpdateAdTemplateResponse): Buffer =>
+      Buffer.from(UpdateAdTemplateResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateAdTemplateResponse => UpdateAdTemplateResponse.decode(value),
+  },
+  deleteAdTemplate: {
+    path: "/stream.app.v1.AdTemplates/DeleteAdTemplate",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteAdTemplateRequest): Buffer =>
+      Buffer.from(DeleteAdTemplateRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteAdTemplateRequest => DeleteAdTemplateRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+} as const;
+
+export interface AdTemplatesServer extends UntypedServiceImplementation {
+  listAdTemplates: handleUnaryCall<ListAdTemplatesRequest, ListAdTemplatesResponse>;
+  createAdTemplate: handleUnaryCall<CreateAdTemplateRequest, CreateAdTemplateResponse>;
+  updateAdTemplate: handleUnaryCall<UpdateAdTemplateRequest, UpdateAdTemplateResponse>;
+  deleteAdTemplate: handleUnaryCall<DeleteAdTemplateRequest, MessageResponse>;
+}
+
+export interface AdTemplatesClient extends Client {
+  listAdTemplates(
+    request: ListAdTemplatesRequest,
+    callback: (error: ServiceError | null, response: ListAdTemplatesResponse) => void,
+  ): ClientUnaryCall;
+  listAdTemplates(
+    request: ListAdTemplatesRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListAdTemplatesResponse) => void,
+  ): ClientUnaryCall;
+  listAdTemplates(
+    request: ListAdTemplatesRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListAdTemplatesResponse) => void,
+  ): ClientUnaryCall;
+  createAdTemplate(
+    request: CreateAdTemplateRequest,
+    callback: (error: ServiceError | null, response: CreateAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  createAdTemplate(
+    request: CreateAdTemplateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  createAdTemplate(
+    request: CreateAdTemplateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  updateAdTemplate(
+    request: UpdateAdTemplateRequest,
+    callback: (error: ServiceError | null, response: UpdateAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  updateAdTemplate(
+    request: UpdateAdTemplateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  updateAdTemplate(
+    request: UpdateAdTemplateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateAdTemplateResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdTemplate(
+    request: DeleteAdTemplateRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdTemplate(
+    request: DeleteAdTemplateRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteAdTemplate(
+    request: DeleteAdTemplateRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const AdTemplatesClient = makeGenericClientConstructor(
+  AdTemplatesService,
+  "stream.app.v1.AdTemplates",
+) as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): AdTemplatesClient;
+  service: typeof AdTemplatesService;
+  serviceName: string;
+};
+
+export type PopupAdsService = typeof PopupAdsService;
+export const PopupAdsService = {
+  listPopupAds: {
+    path: "/stream.app.v1.PopupAds/ListPopupAds",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListPopupAdsRequest): Buffer => Buffer.from(ListPopupAdsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListPopupAdsRequest => ListPopupAdsRequest.decode(value),
+    responseSerialize: (value: ListPopupAdsResponse): Buffer =>
+      Buffer.from(ListPopupAdsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListPopupAdsResponse => ListPopupAdsResponse.decode(value),
+  },
+  createPopupAd: {
+    path: "/stream.app.v1.PopupAds/CreatePopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreatePopupAdRequest): Buffer => Buffer.from(CreatePopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreatePopupAdRequest => CreatePopupAdRequest.decode(value),
+    responseSerialize: (value: CreatePopupAdResponse): Buffer =>
+      Buffer.from(CreatePopupAdResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreatePopupAdResponse => CreatePopupAdResponse.decode(value),
+  },
+  updatePopupAd: {
+    path: "/stream.app.v1.PopupAds/UpdatePopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdatePopupAdRequest): Buffer => Buffer.from(UpdatePopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdatePopupAdRequest => UpdatePopupAdRequest.decode(value),
+    responseSerialize: (value: UpdatePopupAdResponse): Buffer =>
+      Buffer.from(UpdatePopupAdResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdatePopupAdResponse => UpdatePopupAdResponse.decode(value),
+  },
+  deletePopupAd: {
+    path: "/stream.app.v1.PopupAds/DeletePopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeletePopupAdRequest): Buffer => Buffer.from(DeletePopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeletePopupAdRequest => DeletePopupAdRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+  getActivePopupAd: {
+    path: "/stream.app.v1.PopupAds/GetActivePopupAd",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetActivePopupAdRequest): Buffer =>
+      Buffer.from(GetActivePopupAdRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetActivePopupAdRequest => GetActivePopupAdRequest.decode(value),
+    responseSerialize: (value: GetActivePopupAdResponse): Buffer =>
+      Buffer.from(GetActivePopupAdResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetActivePopupAdResponse => GetActivePopupAdResponse.decode(value),
+  },
+} as const;
+
+export interface PopupAdsServer extends UntypedServiceImplementation {
+  listPopupAds: handleUnaryCall<ListPopupAdsRequest, ListPopupAdsResponse>;
+  createPopupAd: handleUnaryCall<CreatePopupAdRequest, CreatePopupAdResponse>;
+  updatePopupAd: handleUnaryCall<UpdatePopupAdRequest, UpdatePopupAdResponse>;
+  deletePopupAd: handleUnaryCall<DeletePopupAdRequest, MessageResponse>;
+  getActivePopupAd: handleUnaryCall<GetActivePopupAdRequest, GetActivePopupAdResponse>;
+}
+
+export interface PopupAdsClient extends Client {
+  listPopupAds(
+    request: ListPopupAdsRequest,
+    callback: (error: ServiceError | null, response: ListPopupAdsResponse) => void,
+  ): ClientUnaryCall;
+  listPopupAds(
+    request: ListPopupAdsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListPopupAdsResponse) => void,
+  ): ClientUnaryCall;
+  listPopupAds(
+    request: ListPopupAdsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListPopupAdsResponse) => void,
+  ): ClientUnaryCall;
+  createPopupAd(
+    request: CreatePopupAdRequest,
+    callback: (error: ServiceError | null, response: CreatePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  createPopupAd(
+    request: CreatePopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreatePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  createPopupAd(
+    request: CreatePopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreatePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  updatePopupAd(
+    request: UpdatePopupAdRequest,
+    callback: (error: ServiceError | null, response: UpdatePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  updatePopupAd(
+    request: UpdatePopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdatePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  updatePopupAd(
+    request: UpdatePopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdatePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  deletePopupAd(
+    request: DeletePopupAdRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deletePopupAd(
+    request: DeletePopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deletePopupAd(
+    request: DeletePopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  getActivePopupAd(
+    request: GetActivePopupAdRequest,
+    callback: (error: ServiceError | null, response: GetActivePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  getActivePopupAd(
+    request: GetActivePopupAdRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetActivePopupAdResponse) => void,
+  ): ClientUnaryCall;
+  getActivePopupAd(
+    request: GetActivePopupAdRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetActivePopupAdResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const PopupAdsClient = makeGenericClientConstructor(PopupAdsService, "stream.app.v1.PopupAds") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): PopupAdsClient;
+  service: typeof PopupAdsService;
+  serviceName: string;
+};
+
+export type PlayerConfigsService = typeof PlayerConfigsService;
+export const PlayerConfigsService = {
+  listPlayerConfigs: {
+    path: "/stream.app.v1.PlayerConfigs/ListPlayerConfigs",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListPlayerConfigsRequest): Buffer =>
+      Buffer.from(ListPlayerConfigsRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListPlayerConfigsRequest => ListPlayerConfigsRequest.decode(value),
+    responseSerialize: (value: ListPlayerConfigsResponse): Buffer =>
+      Buffer.from(ListPlayerConfigsResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListPlayerConfigsResponse => ListPlayerConfigsResponse.decode(value),
+  },
+  createPlayerConfig: {
+    path: "/stream.app.v1.PlayerConfigs/CreatePlayerConfig",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreatePlayerConfigRequest): Buffer =>
+      Buffer.from(CreatePlayerConfigRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreatePlayerConfigRequest => CreatePlayerConfigRequest.decode(value),
+    responseSerialize: (value: CreatePlayerConfigResponse): Buffer =>
+      Buffer.from(CreatePlayerConfigResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreatePlayerConfigResponse => CreatePlayerConfigResponse.decode(value),
+  },
+  updatePlayerConfig: {
+    path: "/stream.app.v1.PlayerConfigs/UpdatePlayerConfig",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdatePlayerConfigRequest): Buffer =>
+      Buffer.from(UpdatePlayerConfigRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdatePlayerConfigRequest => UpdatePlayerConfigRequest.decode(value),
+    responseSerialize: (value: UpdatePlayerConfigResponse): Buffer =>
+      Buffer.from(UpdatePlayerConfigResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdatePlayerConfigResponse => UpdatePlayerConfigResponse.decode(value),
+  },
+  deletePlayerConfig: {
+    path: "/stream.app.v1.PlayerConfigs/DeletePlayerConfig",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeletePlayerConfigRequest): Buffer =>
+      Buffer.from(DeletePlayerConfigRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeletePlayerConfigRequest => DeletePlayerConfigRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+} as const;
+
+export interface PlayerConfigsServer extends UntypedServiceImplementation {
+  listPlayerConfigs: handleUnaryCall<ListPlayerConfigsRequest, ListPlayerConfigsResponse>;
+  createPlayerConfig: handleUnaryCall<CreatePlayerConfigRequest, CreatePlayerConfigResponse>;
+  updatePlayerConfig: handleUnaryCall<UpdatePlayerConfigRequest, UpdatePlayerConfigResponse>;
+  deletePlayerConfig: handleUnaryCall<DeletePlayerConfigRequest, MessageResponse>;
+}
+
+export interface PlayerConfigsClient extends Client {
+  listPlayerConfigs(
+    request: ListPlayerConfigsRequest,
+    callback: (error: ServiceError | null, response: ListPlayerConfigsResponse) => void,
+  ): ClientUnaryCall;
+  listPlayerConfigs(
+    request: ListPlayerConfigsRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListPlayerConfigsResponse) => void,
+  ): ClientUnaryCall;
+  listPlayerConfigs(
+    request: ListPlayerConfigsRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListPlayerConfigsResponse) => void,
+  ): ClientUnaryCall;
+  createPlayerConfig(
+    request: CreatePlayerConfigRequest,
+    callback: (error: ServiceError | null, response: CreatePlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  createPlayerConfig(
+    request: CreatePlayerConfigRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreatePlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  createPlayerConfig(
+    request: CreatePlayerConfigRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreatePlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  updatePlayerConfig(
+    request: UpdatePlayerConfigRequest,
+    callback: (error: ServiceError | null, response: UpdatePlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  updatePlayerConfig(
+    request: UpdatePlayerConfigRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdatePlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  updatePlayerConfig(
+    request: UpdatePlayerConfigRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdatePlayerConfigResponse) => void,
+  ): ClientUnaryCall;
+  deletePlayerConfig(
+    request: DeletePlayerConfigRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deletePlayerConfig(
+    request: DeletePlayerConfigRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deletePlayerConfig(
+    request: DeletePlayerConfigRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const PlayerConfigsClient = makeGenericClientConstructor(
+  PlayerConfigsService,
+  "stream.app.v1.PlayerConfigs",
+) as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): PlayerConfigsClient;
+  service: typeof PlayerConfigsService;
+  serviceName: string;
+};
+
+export type PlansService = typeof PlansService;
+export const PlansService = {
+  listPlans: {
+    path: "/stream.app.v1.Plans/ListPlans",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListPlansRequest): Buffer => Buffer.from(ListPlansRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListPlansRequest => ListPlansRequest.decode(value),
+    responseSerialize: (value: ListPlansResponse): Buffer => Buffer.from(ListPlansResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListPlansResponse => ListPlansResponse.decode(value),
+  },
+} as const;
+
+export interface PlansServer extends UntypedServiceImplementation {
+  listPlans: handleUnaryCall<ListPlansRequest, ListPlansResponse>;
+}
+
+export interface PlansClient extends Client {
+  listPlans(
+    request: ListPlansRequest,
+    callback: (error: ServiceError | null, response: ListPlansResponse) => void,
+  ): ClientUnaryCall;
+  listPlans(
+    request: ListPlansRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListPlansResponse) => void,
+  ): ClientUnaryCall;
+  listPlans(
+    request: ListPlansRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListPlansResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const PlansClient = makeGenericClientConstructor(PlansService, "stream.app.v1.Plans") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): PlansClient;
+  service: typeof PlansService;
+  serviceName: string;
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/common.ts b/src/server/api/proto/app/v1/common.ts
new file mode 100644
index 0000000..3ba3343
--- /dev/null
+++ b/src/server/api/proto/app/v1/common.ts
@@ -0,0 +1,7668 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/common.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import { Timestamp } from "../../google/protobuf/timestamp";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface MessageResponse {
+  message?: string | undefined;
+}
+
+export interface User {
+  id?: string | undefined;
+  email?: string | undefined;
+  username?: string | undefined;
+  avatar?: string | undefined;
+  role?: string | undefined;
+  googleId?: string | undefined;
+  storageUsed?: number | undefined;
+  planId?: string | undefined;
+  planStartedAt?: string | undefined;
+  planExpiresAt?: string | undefined;
+  planTermMonths?: number | undefined;
+  planPaymentMethod?: string | undefined;
+  planExpiringSoon?: boolean | undefined;
+  walletBalance?: number | undefined;
+  language?: string | undefined;
+  locale?: string | undefined;
+  telegramId?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface Preferences {
+  emailNotifications?: boolean | undefined;
+  pushNotifications?: boolean | undefined;
+  marketingNotifications?: boolean | undefined;
+  telegramNotifications?: boolean | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  language?: string | undefined;
+  locale?: string | undefined;
+}
+
+export interface Notification {
+  id?: string | undefined;
+  type?: string | undefined;
+  title?: string | undefined;
+  message?: string | undefined;
+  read?: boolean | undefined;
+  actionUrl?: string | undefined;
+  actionLabel?: string | undefined;
+  createdAt?: string | undefined;
+}
+
+export interface Domain {
+  id?: string | undefined;
+  name?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface AdTemplate {
+  id?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  vastTagUrl?: string | undefined;
+  adFormat?: string | undefined;
+  duration?: number | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface PopupAd {
+  id?: string | undefined;
+  type?: string | undefined;
+  label?: string | undefined;
+  value?: string | undefined;
+  isActive?: boolean | undefined;
+  maxTriggersPerSession?: number | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface PlayerConfig {
+  id?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+  encrytionM3u8?: boolean | undefined;
+  logoUrl?: string | undefined;
+}
+
+export interface AdminPlayerConfig {
+  id?: string | undefined;
+  userId?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  autoplay?: boolean | undefined;
+  loop?: boolean | undefined;
+  muted?: boolean | undefined;
+  showControls?: boolean | undefined;
+  pip?: boolean | undefined;
+  airplay?: boolean | undefined;
+  chromecast?: boolean | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  ownerEmail?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+  encrytionM3u8?: boolean | undefined;
+  logoUrl?: string | undefined;
+}
+
+export interface Plan {
+  id?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  price?: number | undefined;
+  cycle?: string | undefined;
+  storageLimit?: number | undefined;
+  uploadLimit?: number | undefined;
+  durationLimit?: number | undefined;
+  qualityLimit?: string | undefined;
+  features?: string[] | undefined;
+  isActive?: boolean | undefined;
+}
+
+export interface Payment {
+  id?: string | undefined;
+  userId?: string | undefined;
+  planId?: string | undefined;
+  amount?: number | undefined;
+  currency?: string | undefined;
+  status?: string | undefined;
+  provider?: string | undefined;
+  transactionId?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface PlanSubscription {
+  id?: string | undefined;
+  userId?: string | undefined;
+  paymentId?: string | undefined;
+  planId?: string | undefined;
+  termMonths?: number | undefined;
+  paymentMethod?: string | undefined;
+  walletAmount?: number | undefined;
+  topupAmount?: number | undefined;
+  startedAt?: string | undefined;
+  expiresAt?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface WalletTransaction {
+  id?: string | undefined;
+  userId?: string | undefined;
+  type?: string | undefined;
+  amount?: number | undefined;
+  currency?: string | undefined;
+  note?: string | undefined;
+  paymentId?: string | undefined;
+  planId?: string | undefined;
+  termMonths?: number | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface PaymentHistoryItem {
+  id?: string | undefined;
+  amount?: number | undefined;
+  currency?: string | undefined;
+  status?: string | undefined;
+  planId?: string | undefined;
+  planName?: string | undefined;
+  invoiceId?: string | undefined;
+  kind?: string | undefined;
+  termMonths?: number | undefined;
+  paymentMethod?: string | undefined;
+  expiresAt?: string | undefined;
+  createdAt?: string | undefined;
+}
+
+export interface Video {
+  id?: string | undefined;
+  userId?: string | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+  url?: string | undefined;
+  status?: string | undefined;
+  size?: number | undefined;
+  duration?: number | undefined;
+  format?: string | undefined;
+  thumbnail?: string | undefined;
+  processingStatus?: string | undefined;
+  storageType?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+  jobId?: string | undefined;
+}
+
+export interface AdminDashboard {
+  totalUsers?: number | undefined;
+  totalVideos?: number | undefined;
+  totalStorageUsed?: number | undefined;
+  totalPayments?: number | undefined;
+  totalRevenue?: number | undefined;
+  activeSubscriptions?: number | undefined;
+  totalAdTemplates?: number | undefined;
+  newUsersToday?: number | undefined;
+  newVideosToday?: number | undefined;
+}
+
+export interface AdminUser {
+  id?: string | undefined;
+  email?: string | undefined;
+  username?: string | undefined;
+  avatar?: string | undefined;
+  role?: string | undefined;
+  planId?: string | undefined;
+  planName?: string | undefined;
+  storageUsed?: number | undefined;
+  videoCount?: number | undefined;
+  walletBalance?: number | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface ReferralUserSummary {
+  id?: string | undefined;
+  email?: string | undefined;
+  username?: string | undefined;
+}
+
+export interface AdminUserReferralInfo {
+  referrer?: ReferralUserSummary | undefined;
+  referralEligible?: boolean | undefined;
+  effectiveRewardPercent?: number | undefined;
+  rewardOverridePercent?: number | undefined;
+  shareLink?: string | undefined;
+  rewardGranted?: boolean | undefined;
+  rewardGrantedAt?: string | undefined;
+  rewardPaymentId?: string | undefined;
+  rewardAmount?: number | undefined;
+}
+
+export interface AdminUserDetail {
+  user?: AdminUser | undefined;
+  subscription?: PlanSubscription | undefined;
+  referral?: AdminUserReferralInfo | undefined;
+}
+
+export interface AdminVideo {
+  id?: string | undefined;
+  userId?: string | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+  url?: string | undefined;
+  status?: string | undefined;
+  size?: number | undefined;
+  duration?: number | undefined;
+  format?: string | undefined;
+  ownerEmail?: string | undefined;
+  adTemplateId?: string | undefined;
+  adTemplateName?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+  processingStatus?: string | undefined;
+  jobId?: string | undefined;
+}
+
+export interface AdminPayment {
+  id?: string | undefined;
+  userId?: string | undefined;
+  planId?: string | undefined;
+  amount?: number | undefined;
+  currency?: string | undefined;
+  status?: string | undefined;
+  provider?: string | undefined;
+  transactionId?: string | undefined;
+  userEmail?: string | undefined;
+  planName?: string | undefined;
+  invoiceId?: string | undefined;
+  termMonths?: number | undefined;
+  paymentMethod?: string | undefined;
+  expiresAt?: string | undefined;
+  walletAmount?: number | undefined;
+  topupAmount?: number | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface AdminPlan {
+  id?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  features?: string[] | undefined;
+  price?: number | undefined;
+  cycle?: string | undefined;
+  storageLimit?: number | undefined;
+  uploadLimit?: number | undefined;
+  durationLimit?: number | undefined;
+  qualityLimit?: string | undefined;
+  isActive?: boolean | undefined;
+  userCount?: number | undefined;
+  paymentCount?: number | undefined;
+  subscriptionCount?: number | undefined;
+}
+
+export interface AdminAdTemplate {
+  id?: string | undefined;
+  userId?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  vastTagUrl?: string | undefined;
+  adFormat?: string | undefined;
+  duration?: number | undefined;
+  isActive?: boolean | undefined;
+  isDefault?: boolean | undefined;
+  ownerEmail?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface AdminPopupAd {
+  id?: string | undefined;
+  userId?: string | undefined;
+  type?: string | undefined;
+  label?: string | undefined;
+  value?: string | undefined;
+  isActive?: boolean | undefined;
+  maxTriggersPerSession?: number | undefined;
+  ownerEmail?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface AdminJob {
+  id?: string | undefined;
+  status?: string | undefined;
+  priority?: number | undefined;
+  userId?: string | undefined;
+  name?: string | undefined;
+  timeLimit?: number | undefined;
+  inputUrl?: string | undefined;
+  outputUrl?: string | undefined;
+  totalDuration?: number | undefined;
+  currentTime?: number | undefined;
+  progress?: number | undefined;
+  agentId?: string | undefined;
+  logs?: string | undefined;
+  config?: string | undefined;
+  cancelled?: boolean | undefined;
+  retryCount?: number | undefined;
+  maxRetries?: number | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+  videoId?: string | undefined;
+}
+
+export interface AdminAgent {
+  id?: string | undefined;
+  name?: string | undefined;
+  platform?: string | undefined;
+  backend?: string | undefined;
+  version?: string | undefined;
+  capacity?: number | undefined;
+  status?: string | undefined;
+  cpu?: number | undefined;
+  ram?: number | undefined;
+  lastHeartbeat?: string | undefined;
+  createdAt?: string | undefined;
+  updatedAt?: string | undefined;
+}
+
+export interface AdminDlqEntry {
+  job?: AdminJob | undefined;
+  failureTime?: string | undefined;
+  reason?: string | undefined;
+  retryCount?: number | undefined;
+}
+
+function createBaseMessageResponse(): MessageResponse {
+  return { message: "" };
+}
+
+export const MessageResponse: MessageFns<MessageResponse> = {
+  encode(message: MessageResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.message !== undefined && message.message !== "") {
+      writer.uint32(10).string(message.message);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): MessageResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseMessageResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): MessageResponse {
+    return { message: isSet(object.message) ? globalThis.String(object.message) : "" };
+  },
+
+  toJSON(message: MessageResponse): unknown {
+    const obj: any = {};
+    if (message.message !== undefined && message.message !== "") {
+      obj.message = message.message;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<MessageResponse>, I>>(base?: I): MessageResponse {
+    return MessageResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<MessageResponse>, I>>(object: I): MessageResponse {
+    const message = createBaseMessageResponse();
+    message.message = object.message ?? "";
+    return message;
+  },
+};
+
+function createBaseUser(): User {
+  return {
+    id: "",
+    email: "",
+    username: undefined,
+    avatar: undefined,
+    role: undefined,
+    googleId: undefined,
+    storageUsed: 0,
+    planId: undefined,
+    planStartedAt: undefined,
+    planExpiresAt: undefined,
+    planTermMonths: undefined,
+    planPaymentMethod: undefined,
+    planExpiringSoon: false,
+    walletBalance: 0,
+    language: "",
+    locale: "",
+    telegramId: "",
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const User: MessageFns<User> = {
+  encode(message: User, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.email !== undefined && message.email !== "") {
+      writer.uint32(18).string(message.email);
+    }
+    if (message.username !== undefined) {
+      writer.uint32(26).string(message.username);
+    }
+    if (message.avatar !== undefined) {
+      writer.uint32(34).string(message.avatar);
+    }
+    if (message.role !== undefined) {
+      writer.uint32(42).string(message.role);
+    }
+    if (message.googleId !== undefined) {
+      writer.uint32(50).string(message.googleId);
+    }
+    if (message.storageUsed !== undefined && message.storageUsed !== 0) {
+      writer.uint32(56).int64(message.storageUsed);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(66).string(message.planId);
+    }
+    if (message.planStartedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.planStartedAt), writer.uint32(74).fork()).join();
+    }
+    if (message.planExpiresAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.planExpiresAt), writer.uint32(82).fork()).join();
+    }
+    if (message.planTermMonths !== undefined) {
+      writer.uint32(88).int32(message.planTermMonths);
+    }
+    if (message.planPaymentMethod !== undefined) {
+      writer.uint32(98).string(message.planPaymentMethod);
+    }
+    if (message.planExpiringSoon !== undefined && message.planExpiringSoon !== false) {
+      writer.uint32(104).bool(message.planExpiringSoon);
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      writer.uint32(113).double(message.walletBalance);
+    }
+    if (message.language !== undefined && message.language !== "") {
+      writer.uint32(122).string(message.language);
+    }
+    if (message.locale !== undefined && message.locale !== "") {
+      writer.uint32(130).string(message.locale);
+    }
+    if (message.telegramId !== undefined && message.telegramId !== "") {
+      writer.uint32(138).string(message.telegramId);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(146).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(154).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): User {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUser();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.avatar = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.role = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.googleId = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.storageUsed = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.planStartedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.planExpiresAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.planTermMonths = reader.int32();
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.planPaymentMethod = reader.string();
+          continue;
+        }
+        case 13: {
+          if (tag !== 104) {
+            break;
+          }
+
+          message.planExpiringSoon = reader.bool();
+          continue;
+        }
+        case 14: {
+          if (tag !== 113) {
+            break;
+          }
+
+          message.walletBalance = reader.double();
+          continue;
+        }
+        case 15: {
+          if (tag !== 122) {
+            break;
+          }
+
+          message.language = reader.string();
+          continue;
+        }
+        case 16: {
+          if (tag !== 130) {
+            break;
+          }
+
+          message.locale = reader.string();
+          continue;
+        }
+        case 17: {
+          if (tag !== 138) {
+            break;
+          }
+
+          message.telegramId = reader.string();
+          continue;
+        }
+        case 18: {
+          if (tag !== 146) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 19: {
+          if (tag !== 154) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): User {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      email: isSet(object.email) ? globalThis.String(object.email) : "",
+      username: isSet(object.username) ? globalThis.String(object.username) : undefined,
+      avatar: isSet(object.avatar) ? globalThis.String(object.avatar) : undefined,
+      role: isSet(object.role) ? globalThis.String(object.role) : undefined,
+      googleId: isSet(object.googleId)
+        ? globalThis.String(object.googleId)
+        : isSet(object.google_id)
+        ? globalThis.String(object.google_id)
+        : undefined,
+      storageUsed: isSet(object.storageUsed)
+        ? globalThis.Number(object.storageUsed)
+        : isSet(object.storage_used)
+        ? globalThis.Number(object.storage_used)
+        : 0,
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+      planStartedAt: isSet(object.planStartedAt)
+        ? globalThis.String(object.planStartedAt)
+        : isSet(object.plan_started_at)
+        ? globalThis.String(object.plan_started_at)
+        : undefined,
+      planExpiresAt: isSet(object.planExpiresAt)
+        ? globalThis.String(object.planExpiresAt)
+        : isSet(object.plan_expires_at)
+        ? globalThis.String(object.plan_expires_at)
+        : undefined,
+      planTermMonths: isSet(object.planTermMonths)
+        ? globalThis.Number(object.planTermMonths)
+        : isSet(object.plan_term_months)
+        ? globalThis.Number(object.plan_term_months)
+        : undefined,
+      planPaymentMethod: isSet(object.planPaymentMethod)
+        ? globalThis.String(object.planPaymentMethod)
+        : isSet(object.plan_payment_method)
+        ? globalThis.String(object.plan_payment_method)
+        : undefined,
+      planExpiringSoon: isSet(object.planExpiringSoon)
+        ? globalThis.Boolean(object.planExpiringSoon)
+        : isSet(object.plan_expiring_soon)
+        ? globalThis.Boolean(object.plan_expiring_soon)
+        : false,
+      walletBalance: isSet(object.walletBalance)
+        ? globalThis.Number(object.walletBalance)
+        : isSet(object.wallet_balance)
+        ? globalThis.Number(object.wallet_balance)
+        : 0,
+      language: isSet(object.language) ? globalThis.String(object.language) : "",
+      locale: isSet(object.locale) ? globalThis.String(object.locale) : "",
+      telegramId: isSet(object.telegramId)
+        ? globalThis.String(object.telegramId)
+        : isSet(object.telegram_id)
+        ? globalThis.String(object.telegram_id)
+        : "",
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: User): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.email !== undefined && message.email !== "") {
+      obj.email = message.email;
+    }
+    if (message.username !== undefined) {
+      obj.username = message.username;
+    }
+    if (message.avatar !== undefined) {
+      obj.avatar = message.avatar;
+    }
+    if (message.role !== undefined) {
+      obj.role = message.role;
+    }
+    if (message.googleId !== undefined) {
+      obj.googleId = message.googleId;
+    }
+    if (message.storageUsed !== undefined && message.storageUsed !== 0) {
+      obj.storageUsed = Math.round(message.storageUsed);
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    if (message.planStartedAt !== undefined) {
+      obj.planStartedAt = message.planStartedAt;
+    }
+    if (message.planExpiresAt !== undefined) {
+      obj.planExpiresAt = message.planExpiresAt;
+    }
+    if (message.planTermMonths !== undefined) {
+      obj.planTermMonths = Math.round(message.planTermMonths);
+    }
+    if (message.planPaymentMethod !== undefined) {
+      obj.planPaymentMethod = message.planPaymentMethod;
+    }
+    if (message.planExpiringSoon !== undefined && message.planExpiringSoon !== false) {
+      obj.planExpiringSoon = message.planExpiringSoon;
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      obj.walletBalance = message.walletBalance;
+    }
+    if (message.language !== undefined && message.language !== "") {
+      obj.language = message.language;
+    }
+    if (message.locale !== undefined && message.locale !== "") {
+      obj.locale = message.locale;
+    }
+    if (message.telegramId !== undefined && message.telegramId !== "") {
+      obj.telegramId = message.telegramId;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<User>, I>>(base?: I): User {
+    return User.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<User>, I>>(object: I): User {
+    const message = createBaseUser();
+    message.id = object.id ?? "";
+    message.email = object.email ?? "";
+    message.username = object.username ?? undefined;
+    message.avatar = object.avatar ?? undefined;
+    message.role = object.role ?? undefined;
+    message.googleId = object.googleId ?? undefined;
+    message.storageUsed = object.storageUsed ?? 0;
+    message.planId = object.planId ?? undefined;
+    message.planStartedAt = object.planStartedAt ?? undefined;
+    message.planExpiresAt = object.planExpiresAt ?? undefined;
+    message.planTermMonths = object.planTermMonths ?? undefined;
+    message.planPaymentMethod = object.planPaymentMethod ?? undefined;
+    message.planExpiringSoon = object.planExpiringSoon ?? false;
+    message.walletBalance = object.walletBalance ?? 0;
+    message.language = object.language ?? "";
+    message.locale = object.locale ?? "";
+    message.telegramId = object.telegramId ?? "";
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBasePreferences(): Preferences {
+  return {
+    emailNotifications: false,
+    pushNotifications: false,
+    marketingNotifications: false,
+    telegramNotifications: false,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: false,
+    pip: false,
+    airplay: false,
+    chromecast: false,
+    language: "",
+    locale: "",
+  };
+}
+
+export const Preferences: MessageFns<Preferences> = {
+  encode(message: Preferences, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.emailNotifications !== undefined && message.emailNotifications !== false) {
+      writer.uint32(8).bool(message.emailNotifications);
+    }
+    if (message.pushNotifications !== undefined && message.pushNotifications !== false) {
+      writer.uint32(16).bool(message.pushNotifications);
+    }
+    if (message.marketingNotifications !== undefined && message.marketingNotifications !== false) {
+      writer.uint32(24).bool(message.marketingNotifications);
+    }
+    if (message.telegramNotifications !== undefined && message.telegramNotifications !== false) {
+      writer.uint32(32).bool(message.telegramNotifications);
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      writer.uint32(40).bool(message.autoplay);
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      writer.uint32(48).bool(message.loop);
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      writer.uint32(56).bool(message.muted);
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      writer.uint32(64).bool(message.showControls);
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      writer.uint32(72).bool(message.pip);
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      writer.uint32(80).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      writer.uint32(88).bool(message.chromecast);
+    }
+    if (message.language !== undefined && message.language !== "") {
+      writer.uint32(98).string(message.language);
+    }
+    if (message.locale !== undefined && message.locale !== "") {
+      writer.uint32(106).string(message.locale);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Preferences {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBasePreferences();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.emailNotifications = reader.bool();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.pushNotifications = reader.bool();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.marketingNotifications = reader.bool();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.telegramNotifications = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.language = reader.string();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.locale = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Preferences {
+    return {
+      emailNotifications: isSet(object.emailNotifications)
+        ? globalThis.Boolean(object.emailNotifications)
+        : isSet(object.email_notifications)
+        ? globalThis.Boolean(object.email_notifications)
+        : false,
+      pushNotifications: isSet(object.pushNotifications)
+        ? globalThis.Boolean(object.pushNotifications)
+        : isSet(object.push_notifications)
+        ? globalThis.Boolean(object.push_notifications)
+        : false,
+      marketingNotifications: isSet(object.marketingNotifications)
+        ? globalThis.Boolean(object.marketingNotifications)
+        : isSet(object.marketing_notifications)
+        ? globalThis.Boolean(object.marketing_notifications)
+        : false,
+      telegramNotifications: isSet(object.telegramNotifications)
+        ? globalThis.Boolean(object.telegramNotifications)
+        : isSet(object.telegram_notifications)
+        ? globalThis.Boolean(object.telegram_notifications)
+        : false,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : false,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : false,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : false,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : false,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : false,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : false,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : false,
+      language: isSet(object.language) ? globalThis.String(object.language) : "",
+      locale: isSet(object.locale) ? globalThis.String(object.locale) : "",
+    };
+  },
+
+  toJSON(message: Preferences): unknown {
+    const obj: any = {};
+    if (message.emailNotifications !== undefined && message.emailNotifications !== false) {
+      obj.emailNotifications = message.emailNotifications;
+    }
+    if (message.pushNotifications !== undefined && message.pushNotifications !== false) {
+      obj.pushNotifications = message.pushNotifications;
+    }
+    if (message.marketingNotifications !== undefined && message.marketingNotifications !== false) {
+      obj.marketingNotifications = message.marketingNotifications;
+    }
+    if (message.telegramNotifications !== undefined && message.telegramNotifications !== false) {
+      obj.telegramNotifications = message.telegramNotifications;
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.language !== undefined && message.language !== "") {
+      obj.language = message.language;
+    }
+    if (message.locale !== undefined && message.locale !== "") {
+      obj.locale = message.locale;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Preferences>, I>>(base?: I): Preferences {
+    return Preferences.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Preferences>, I>>(object: I): Preferences {
+    const message = createBasePreferences();
+    message.emailNotifications = object.emailNotifications ?? false;
+    message.pushNotifications = object.pushNotifications ?? false;
+    message.marketingNotifications = object.marketingNotifications ?? false;
+    message.telegramNotifications = object.telegramNotifications ?? false;
+    message.autoplay = object.autoplay ?? false;
+    message.loop = object.loop ?? false;
+    message.muted = object.muted ?? false;
+    message.showControls = object.showControls ?? false;
+    message.pip = object.pip ?? false;
+    message.airplay = object.airplay ?? false;
+    message.chromecast = object.chromecast ?? false;
+    message.language = object.language ?? "";
+    message.locale = object.locale ?? "";
+    return message;
+  },
+};
+
+function createBaseNotification(): Notification {
+  return {
+    id: "",
+    type: "",
+    title: "",
+    message: "",
+    read: false,
+    actionUrl: undefined,
+    actionLabel: undefined,
+    createdAt: undefined,
+  };
+}
+
+export const Notification: MessageFns<Notification> = {
+  encode(message: Notification, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(18).string(message.type);
+    }
+    if (message.title !== undefined && message.title !== "") {
+      writer.uint32(26).string(message.title);
+    }
+    if (message.message !== undefined && message.message !== "") {
+      writer.uint32(34).string(message.message);
+    }
+    if (message.read !== undefined && message.read !== false) {
+      writer.uint32(40).bool(message.read);
+    }
+    if (message.actionUrl !== undefined) {
+      writer.uint32(50).string(message.actionUrl);
+    }
+    if (message.actionLabel !== undefined) {
+      writer.uint32(58).string(message.actionLabel);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(66).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Notification {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseNotification();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.title = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.read = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.actionUrl = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.actionLabel = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Notification {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      title: isSet(object.title) ? globalThis.String(object.title) : "",
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+      read: isSet(object.read) ? globalThis.Boolean(object.read) : false,
+      actionUrl: isSet(object.actionUrl)
+        ? globalThis.String(object.actionUrl)
+        : isSet(object.action_url)
+        ? globalThis.String(object.action_url)
+        : undefined,
+      actionLabel: isSet(object.actionLabel)
+        ? globalThis.String(object.actionLabel)
+        : isSet(object.action_label)
+        ? globalThis.String(object.action_label)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: Notification): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.title !== undefined && message.title !== "") {
+      obj.title = message.title;
+    }
+    if (message.message !== undefined && message.message !== "") {
+      obj.message = message.message;
+    }
+    if (message.read !== undefined && message.read !== false) {
+      obj.read = message.read;
+    }
+    if (message.actionUrl !== undefined) {
+      obj.actionUrl = message.actionUrl;
+    }
+    if (message.actionLabel !== undefined) {
+      obj.actionLabel = message.actionLabel;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Notification>, I>>(base?: I): Notification {
+    return Notification.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Notification>, I>>(object: I): Notification {
+    const message = createBaseNotification();
+    message.id = object.id ?? "";
+    message.type = object.type ?? "";
+    message.title = object.title ?? "";
+    message.message = object.message ?? "";
+    message.read = object.read ?? false;
+    message.actionUrl = object.actionUrl ?? undefined;
+    message.actionLabel = object.actionLabel ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseDomain(): Domain {
+  return { id: "", name: "", createdAt: undefined, updatedAt: undefined };
+}
+
+export const Domain: MessageFns<Domain> = {
+  encode(message: Domain, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(26).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(34).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Domain {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDomain();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Domain {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: Domain): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Domain>, I>>(base?: I): Domain {
+    return Domain.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Domain>, I>>(object: I): Domain {
+    const message = createBaseDomain();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdTemplate(): AdTemplate {
+  return {
+    id: "",
+    name: "",
+    description: undefined,
+    vastTagUrl: "",
+    adFormat: "",
+    duration: undefined,
+    isActive: false,
+    isDefault: false,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const AdTemplate: MessageFns<AdTemplate> = {
+  encode(message: AdTemplate, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      writer.uint32(34).string(message.vastTagUrl);
+    }
+    if (message.adFormat !== undefined && message.adFormat !== "") {
+      writer.uint32(42).string(message.adFormat);
+    }
+    if (message.duration !== undefined) {
+      writer.uint32(48).int32(message.duration);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(56).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      writer.uint32(64).bool(message.isDefault);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(74).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(82).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdTemplate {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdTemplate();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.vastTagUrl = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.adFormat = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdTemplate {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      vastTagUrl: isSet(object.vastTagUrl)
+        ? globalThis.String(object.vastTagUrl)
+        : isSet(object.vast_tag_url)
+        ? globalThis.String(object.vast_tag_url)
+        : "",
+      adFormat: isSet(object.adFormat)
+        ? globalThis.String(object.adFormat)
+        : isSet(object.ad_format)
+        ? globalThis.String(object.ad_format)
+        : "",
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : undefined,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : false,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdTemplate): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      obj.vastTagUrl = message.vastTagUrl;
+    }
+    if (message.adFormat !== undefined && message.adFormat !== "") {
+      obj.adFormat = message.adFormat;
+    }
+    if (message.duration !== undefined) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdTemplate>, I>>(base?: I): AdTemplate {
+    return AdTemplate.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdTemplate>, I>>(object: I): AdTemplate {
+    const message = createBaseAdTemplate();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.vastTagUrl = object.vastTagUrl ?? "";
+    message.adFormat = object.adFormat ?? "";
+    message.duration = object.duration ?? undefined;
+    message.isActive = object.isActive ?? false;
+    message.isDefault = object.isDefault ?? false;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBasePopupAd(): PopupAd {
+  return {
+    id: "",
+    type: "",
+    label: "",
+    value: "",
+    isActive: false,
+    maxTriggersPerSession: 0,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const PopupAd: MessageFns<PopupAd> = {
+  encode(message: PopupAd, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(18).string(message.type);
+    }
+    if (message.label !== undefined && message.label !== "") {
+      writer.uint32(26).string(message.label);
+    }
+    if (message.value !== undefined && message.value !== "") {
+      writer.uint32(34).string(message.value);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(40).bool(message.isActive);
+    }
+    if (message.maxTriggersPerSession !== undefined && message.maxTriggersPerSession !== 0) {
+      writer.uint32(48).int32(message.maxTriggersPerSession);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(58).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(66).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): PopupAd {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBasePopupAd();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.label = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.maxTriggersPerSession = reader.int32();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): PopupAd {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      label: isSet(object.label) ? globalThis.String(object.label) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+      maxTriggersPerSession: isSet(object.maxTriggersPerSession)
+        ? globalThis.Number(object.maxTriggersPerSession)
+        : isSet(object.max_triggers_per_session)
+        ? globalThis.Number(object.max_triggers_per_session)
+        : 0,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: PopupAd): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.label !== undefined && message.label !== "") {
+      obj.label = message.label;
+    }
+    if (message.value !== undefined && message.value !== "") {
+      obj.value = message.value;
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    if (message.maxTriggersPerSession !== undefined && message.maxTriggersPerSession !== 0) {
+      obj.maxTriggersPerSession = Math.round(message.maxTriggersPerSession);
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<PopupAd>, I>>(base?: I): PopupAd {
+    return PopupAd.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<PopupAd>, I>>(object: I): PopupAd {
+    const message = createBasePopupAd();
+    message.id = object.id ?? "";
+    message.type = object.type ?? "";
+    message.label = object.label ?? "";
+    message.value = object.value ?? "";
+    message.isActive = object.isActive ?? false;
+    message.maxTriggersPerSession = object.maxTriggersPerSession ?? 0;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBasePlayerConfig(): PlayerConfig {
+  return {
+    id: "",
+    name: "",
+    description: undefined,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: false,
+    pip: false,
+    airplay: false,
+    chromecast: false,
+    isActive: false,
+    isDefault: false,
+    createdAt: undefined,
+    updatedAt: undefined,
+    encrytionM3u8: false,
+    logoUrl: undefined,
+  };
+}
+
+export const PlayerConfig: MessageFns<PlayerConfig> = {
+  encode(message: PlayerConfig, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      writer.uint32(32).bool(message.autoplay);
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      writer.uint32(40).bool(message.loop);
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      writer.uint32(48).bool(message.muted);
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      writer.uint32(56).bool(message.showControls);
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      writer.uint32(64).bool(message.pip);
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      writer.uint32(72).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      writer.uint32(80).bool(message.chromecast);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(88).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      writer.uint32(96).bool(message.isDefault);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(106).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(114).fork()).join();
+    }
+    if (message.encrytionM3u8 !== undefined && message.encrytionM3u8 !== false) {
+      writer.uint32(120).bool(message.encrytionM3u8);
+    }
+    if (message.logoUrl !== undefined) {
+      writer.uint32(130).string(message.logoUrl);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): PlayerConfig {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBasePlayerConfig();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 15: {
+          if (tag !== 120) {
+            break;
+          }
+
+          message.encrytionM3u8 = reader.bool();
+          continue;
+        }
+        case 16: {
+          if (tag !== 130) {
+            break;
+          }
+
+          message.logoUrl = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): PlayerConfig {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : false,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : false,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : false,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : false,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : false,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : false,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : false,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : false,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+      encrytionM3u8: isSet(object.encrytionM3u8)
+        ? globalThis.Boolean(object.encrytionM3u8)
+        : isSet(object.encrytion_m3u8)
+        ? globalThis.Boolean(object.encrytion_m3u8)
+        : false,
+      logoUrl: isSet(object.logoUrl)
+        ? globalThis.String(object.logoUrl)
+        : isSet(object.logo_url)
+        ? globalThis.String(object.logo_url)
+        : undefined,
+    };
+  },
+
+  toJSON(message: PlayerConfig): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    if (message.encrytionM3u8 !== undefined && message.encrytionM3u8 !== false) {
+      obj.encrytionM3u8 = message.encrytionM3u8;
+    }
+    if (message.logoUrl !== undefined) {
+      obj.logoUrl = message.logoUrl;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<PlayerConfig>, I>>(base?: I): PlayerConfig {
+    return PlayerConfig.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<PlayerConfig>, I>>(object: I): PlayerConfig {
+    const message = createBasePlayerConfig();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.autoplay = object.autoplay ?? false;
+    message.loop = object.loop ?? false;
+    message.muted = object.muted ?? false;
+    message.showControls = object.showControls ?? false;
+    message.pip = object.pip ?? false;
+    message.airplay = object.airplay ?? false;
+    message.chromecast = object.chromecast ?? false;
+    message.isActive = object.isActive ?? false;
+    message.isDefault = object.isDefault ?? false;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    message.encrytionM3u8 = object.encrytionM3u8 ?? false;
+    message.logoUrl = object.logoUrl ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminPlayerConfig(): AdminPlayerConfig {
+  return {
+    id: "",
+    userId: "",
+    name: "",
+    description: undefined,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    showControls: false,
+    pip: false,
+    airplay: false,
+    chromecast: false,
+    isActive: false,
+    isDefault: false,
+    ownerEmail: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+    encrytionM3u8: false,
+    logoUrl: undefined,
+  };
+}
+
+export const AdminPlayerConfig: MessageFns<AdminPlayerConfig> = {
+  encode(message: AdminPlayerConfig, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(26).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(34).string(message.description);
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      writer.uint32(40).bool(message.autoplay);
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      writer.uint32(48).bool(message.loop);
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      writer.uint32(56).bool(message.muted);
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      writer.uint32(64).bool(message.showControls);
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      writer.uint32(72).bool(message.pip);
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      writer.uint32(80).bool(message.airplay);
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      writer.uint32(88).bool(message.chromecast);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(96).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      writer.uint32(104).bool(message.isDefault);
+    }
+    if (message.ownerEmail !== undefined) {
+      writer.uint32(114).string(message.ownerEmail);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(122).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(130).fork()).join();
+    }
+    if (message.encrytionM3u8 !== undefined && message.encrytionM3u8 !== false) {
+      writer.uint32(136).bool(message.encrytionM3u8);
+    }
+    if (message.logoUrl !== undefined) {
+      writer.uint32(146).string(message.logoUrl);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminPlayerConfig {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminPlayerConfig();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.autoplay = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.loop = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.muted = reader.bool();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.showControls = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.pip = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.airplay = reader.bool();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.chromecast = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 13: {
+          if (tag !== 104) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.ownerEmail = reader.string();
+          continue;
+        }
+        case 15: {
+          if (tag !== 122) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 16: {
+          if (tag !== 130) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 17: {
+          if (tag !== 136) {
+            break;
+          }
+
+          message.encrytionM3u8 = reader.bool();
+          continue;
+        }
+        case 18: {
+          if (tag !== 146) {
+            break;
+          }
+
+          message.logoUrl = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminPlayerConfig {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      autoplay: isSet(object.autoplay) ? globalThis.Boolean(object.autoplay) : false,
+      loop: isSet(object.loop) ? globalThis.Boolean(object.loop) : false,
+      muted: isSet(object.muted) ? globalThis.Boolean(object.muted) : false,
+      showControls: isSet(object.showControls)
+        ? globalThis.Boolean(object.showControls)
+        : isSet(object.show_controls)
+        ? globalThis.Boolean(object.show_controls)
+        : false,
+      pip: isSet(object.pip) ? globalThis.Boolean(object.pip) : false,
+      airplay: isSet(object.airplay) ? globalThis.Boolean(object.airplay) : false,
+      chromecast: isSet(object.chromecast) ? globalThis.Boolean(object.chromecast) : false,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : false,
+      ownerEmail: isSet(object.ownerEmail)
+        ? globalThis.String(object.ownerEmail)
+        : isSet(object.owner_email)
+        ? globalThis.String(object.owner_email)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+      encrytionM3u8: isSet(object.encrytionM3u8)
+        ? globalThis.Boolean(object.encrytionM3u8)
+        : isSet(object.encrytion_m3u8)
+        ? globalThis.Boolean(object.encrytion_m3u8)
+        : false,
+      logoUrl: isSet(object.logoUrl)
+        ? globalThis.String(object.logoUrl)
+        : isSet(object.logo_url)
+        ? globalThis.String(object.logo_url)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminPlayerConfig): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.autoplay !== undefined && message.autoplay !== false) {
+      obj.autoplay = message.autoplay;
+    }
+    if (message.loop !== undefined && message.loop !== false) {
+      obj.loop = message.loop;
+    }
+    if (message.muted !== undefined && message.muted !== false) {
+      obj.muted = message.muted;
+    }
+    if (message.showControls !== undefined && message.showControls !== false) {
+      obj.showControls = message.showControls;
+    }
+    if (message.pip !== undefined && message.pip !== false) {
+      obj.pip = message.pip;
+    }
+    if (message.airplay !== undefined && message.airplay !== false) {
+      obj.airplay = message.airplay;
+    }
+    if (message.chromecast !== undefined && message.chromecast !== false) {
+      obj.chromecast = message.chromecast;
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.ownerEmail !== undefined) {
+      obj.ownerEmail = message.ownerEmail;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    if (message.encrytionM3u8 !== undefined && message.encrytionM3u8 !== false) {
+      obj.encrytionM3u8 = message.encrytionM3u8;
+    }
+    if (message.logoUrl !== undefined) {
+      obj.logoUrl = message.logoUrl;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminPlayerConfig>, I>>(base?: I): AdminPlayerConfig {
+    return AdminPlayerConfig.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminPlayerConfig>, I>>(object: I): AdminPlayerConfig {
+    const message = createBaseAdminPlayerConfig();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.autoplay = object.autoplay ?? false;
+    message.loop = object.loop ?? false;
+    message.muted = object.muted ?? false;
+    message.showControls = object.showControls ?? false;
+    message.pip = object.pip ?? false;
+    message.airplay = object.airplay ?? false;
+    message.chromecast = object.chromecast ?? false;
+    message.isActive = object.isActive ?? false;
+    message.isDefault = object.isDefault ?? false;
+    message.ownerEmail = object.ownerEmail ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    message.encrytionM3u8 = object.encrytionM3u8 ?? false;
+    message.logoUrl = object.logoUrl ?? undefined;
+    return message;
+  },
+};
+
+function createBasePlan(): Plan {
+  return {
+    id: "",
+    name: "",
+    description: undefined,
+    price: 0,
+    cycle: "",
+    storageLimit: 0,
+    uploadLimit: 0,
+    durationLimit: 0,
+    qualityLimit: "",
+    features: [],
+    isActive: false,
+  };
+}
+
+export const Plan: MessageFns<Plan> = {
+  encode(message: Plan, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      writer.uint32(33).double(message.price);
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      writer.uint32(42).string(message.cycle);
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      writer.uint32(48).int64(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      writer.uint32(56).int32(message.uploadLimit);
+    }
+    if (message.durationLimit !== undefined && message.durationLimit !== 0) {
+      writer.uint32(64).int32(message.durationLimit);
+    }
+    if (message.qualityLimit !== undefined && message.qualityLimit !== "") {
+      writer.uint32(74).string(message.qualityLimit);
+    }
+    if (message.features !== undefined && message.features.length !== 0) {
+      for (const v of message.features) {
+        writer.uint32(82).string(v!);
+      }
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(88).bool(message.isActive);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Plan {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBasePlan();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 33) {
+            break;
+          }
+
+          message.price = reader.double();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.cycle = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.storageLimit = longToNumber(reader.int64());
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.uploadLimit = reader.int32();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.durationLimit = reader.int32();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.qualityLimit = reader.string();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          const el = reader.string();
+          if (el !== undefined) {
+            message.features!.push(el);
+          }
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Plan {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      price: isSet(object.price) ? globalThis.Number(object.price) : 0,
+      cycle: isSet(object.cycle) ? globalThis.String(object.cycle) : "",
+      storageLimit: isSet(object.storageLimit)
+        ? globalThis.Number(object.storageLimit)
+        : isSet(object.storage_limit)
+        ? globalThis.Number(object.storage_limit)
+        : 0,
+      uploadLimit: isSet(object.uploadLimit)
+        ? globalThis.Number(object.uploadLimit)
+        : isSet(object.upload_limit)
+        ? globalThis.Number(object.upload_limit)
+        : 0,
+      durationLimit: isSet(object.durationLimit)
+        ? globalThis.Number(object.durationLimit)
+        : isSet(object.duration_limit)
+        ? globalThis.Number(object.duration_limit)
+        : 0,
+      qualityLimit: isSet(object.qualityLimit)
+        ? globalThis.String(object.qualityLimit)
+        : isSet(object.quality_limit)
+        ? globalThis.String(object.quality_limit)
+        : "",
+      features: globalThis.Array.isArray(object?.features)
+        ? object.features.map((e: any) => globalThis.String(e))
+        : [],
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+    };
+  },
+
+  toJSON(message: Plan): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      obj.price = message.price;
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      obj.cycle = message.cycle;
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      obj.storageLimit = Math.round(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      obj.uploadLimit = Math.round(message.uploadLimit);
+    }
+    if (message.durationLimit !== undefined && message.durationLimit !== 0) {
+      obj.durationLimit = Math.round(message.durationLimit);
+    }
+    if (message.qualityLimit !== undefined && message.qualityLimit !== "") {
+      obj.qualityLimit = message.qualityLimit;
+    }
+    if (message.features?.length) {
+      obj.features = message.features;
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Plan>, I>>(base?: I): Plan {
+    return Plan.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Plan>, I>>(object: I): Plan {
+    const message = createBasePlan();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.price = object.price ?? 0;
+    message.cycle = object.cycle ?? "";
+    message.storageLimit = object.storageLimit ?? 0;
+    message.uploadLimit = object.uploadLimit ?? 0;
+    message.durationLimit = object.durationLimit ?? 0;
+    message.qualityLimit = object.qualityLimit ?? "";
+    message.features = object.features?.map((e) => e) || [];
+    message.isActive = object.isActive ?? false;
+    return message;
+  },
+};
+
+function createBasePayment(): Payment {
+  return {
+    id: "",
+    userId: "",
+    planId: undefined,
+    amount: 0,
+    currency: "",
+    status: "",
+    provider: "",
+    transactionId: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const Payment: MessageFns<Payment> = {
+  encode(message: Payment, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(26).string(message.planId);
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      writer.uint32(33).double(message.amount);
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      writer.uint32(42).string(message.currency);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(50).string(message.status);
+    }
+    if (message.provider !== undefined && message.provider !== "") {
+      writer.uint32(58).string(message.provider);
+    }
+    if (message.transactionId !== undefined) {
+      writer.uint32(66).string(message.transactionId);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(74).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(82).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Payment {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBasePayment();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 33) {
+            break;
+          }
+
+          message.amount = reader.double();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.currency = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.provider = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.transactionId = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Payment {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+      amount: isSet(object.amount) ? globalThis.Number(object.amount) : 0,
+      currency: isSet(object.currency) ? globalThis.String(object.currency) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      provider: isSet(object.provider) ? globalThis.String(object.provider) : "",
+      transactionId: isSet(object.transactionId)
+        ? globalThis.String(object.transactionId)
+        : isSet(object.transaction_id)
+        ? globalThis.String(object.transaction_id)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: Payment): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      obj.amount = message.amount;
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      obj.currency = message.currency;
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.provider !== undefined && message.provider !== "") {
+      obj.provider = message.provider;
+    }
+    if (message.transactionId !== undefined) {
+      obj.transactionId = message.transactionId;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Payment>, I>>(base?: I): Payment {
+    return Payment.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Payment>, I>>(object: I): Payment {
+    const message = createBasePayment();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.planId = object.planId ?? undefined;
+    message.amount = object.amount ?? 0;
+    message.currency = object.currency ?? "";
+    message.status = object.status ?? "";
+    message.provider = object.provider ?? "";
+    message.transactionId = object.transactionId ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBasePlanSubscription(): PlanSubscription {
+  return {
+    id: "",
+    userId: "",
+    paymentId: "",
+    planId: "",
+    termMonths: 0,
+    paymentMethod: "",
+    walletAmount: 0,
+    topupAmount: 0,
+    startedAt: undefined,
+    expiresAt: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const PlanSubscription: MessageFns<PlanSubscription> = {
+  encode(message: PlanSubscription, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.paymentId !== undefined && message.paymentId !== "") {
+      writer.uint32(26).string(message.paymentId);
+    }
+    if (message.planId !== undefined && message.planId !== "") {
+      writer.uint32(34).string(message.planId);
+    }
+    if (message.termMonths !== undefined && message.termMonths !== 0) {
+      writer.uint32(40).int32(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined && message.paymentMethod !== "") {
+      writer.uint32(50).string(message.paymentMethod);
+    }
+    if (message.walletAmount !== undefined && message.walletAmount !== 0) {
+      writer.uint32(57).double(message.walletAmount);
+    }
+    if (message.topupAmount !== undefined && message.topupAmount !== 0) {
+      writer.uint32(65).double(message.topupAmount);
+    }
+    if (message.startedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.startedAt), writer.uint32(74).fork()).join();
+    }
+    if (message.expiresAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.expiresAt), writer.uint32(82).fork()).join();
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(90).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(98).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): PlanSubscription {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBasePlanSubscription();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.paymentId = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.termMonths = reader.int32();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.paymentMethod = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 57) {
+            break;
+          }
+
+          message.walletAmount = reader.double();
+          continue;
+        }
+        case 8: {
+          if (tag !== 65) {
+            break;
+          }
+
+          message.topupAmount = reader.double();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.startedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.expiresAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): PlanSubscription {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      paymentId: isSet(object.paymentId)
+        ? globalThis.String(object.paymentId)
+        : isSet(object.payment_id)
+        ? globalThis.String(object.payment_id)
+        : "",
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : "",
+      termMonths: isSet(object.termMonths)
+        ? globalThis.Number(object.termMonths)
+        : isSet(object.term_months)
+        ? globalThis.Number(object.term_months)
+        : 0,
+      paymentMethod: isSet(object.paymentMethod)
+        ? globalThis.String(object.paymentMethod)
+        : isSet(object.payment_method)
+        ? globalThis.String(object.payment_method)
+        : "",
+      walletAmount: isSet(object.walletAmount)
+        ? globalThis.Number(object.walletAmount)
+        : isSet(object.wallet_amount)
+        ? globalThis.Number(object.wallet_amount)
+        : 0,
+      topupAmount: isSet(object.topupAmount)
+        ? globalThis.Number(object.topupAmount)
+        : isSet(object.topup_amount)
+        ? globalThis.Number(object.topup_amount)
+        : 0,
+      startedAt: isSet(object.startedAt)
+        ? globalThis.String(object.startedAt)
+        : isSet(object.started_at)
+        ? globalThis.String(object.started_at)
+        : undefined,
+      expiresAt: isSet(object.expiresAt)
+        ? globalThis.String(object.expiresAt)
+        : isSet(object.expires_at)
+        ? globalThis.String(object.expires_at)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: PlanSubscription): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.paymentId !== undefined && message.paymentId !== "") {
+      obj.paymentId = message.paymentId;
+    }
+    if (message.planId !== undefined && message.planId !== "") {
+      obj.planId = message.planId;
+    }
+    if (message.termMonths !== undefined && message.termMonths !== 0) {
+      obj.termMonths = Math.round(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined && message.paymentMethod !== "") {
+      obj.paymentMethod = message.paymentMethod;
+    }
+    if (message.walletAmount !== undefined && message.walletAmount !== 0) {
+      obj.walletAmount = message.walletAmount;
+    }
+    if (message.topupAmount !== undefined && message.topupAmount !== 0) {
+      obj.topupAmount = message.topupAmount;
+    }
+    if (message.startedAt !== undefined) {
+      obj.startedAt = message.startedAt;
+    }
+    if (message.expiresAt !== undefined) {
+      obj.expiresAt = message.expiresAt;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<PlanSubscription>, I>>(base?: I): PlanSubscription {
+    return PlanSubscription.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<PlanSubscription>, I>>(object: I): PlanSubscription {
+    const message = createBasePlanSubscription();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.paymentId = object.paymentId ?? "";
+    message.planId = object.planId ?? "";
+    message.termMonths = object.termMonths ?? 0;
+    message.paymentMethod = object.paymentMethod ?? "";
+    message.walletAmount = object.walletAmount ?? 0;
+    message.topupAmount = object.topupAmount ?? 0;
+    message.startedAt = object.startedAt ?? undefined;
+    message.expiresAt = object.expiresAt ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseWalletTransaction(): WalletTransaction {
+  return {
+    id: "",
+    userId: "",
+    type: "",
+    amount: 0,
+    currency: "",
+    note: undefined,
+    paymentId: undefined,
+    planId: undefined,
+    termMonths: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const WalletTransaction: MessageFns<WalletTransaction> = {
+  encode(message: WalletTransaction, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(26).string(message.type);
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      writer.uint32(33).double(message.amount);
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      writer.uint32(42).string(message.currency);
+    }
+    if (message.note !== undefined) {
+      writer.uint32(50).string(message.note);
+    }
+    if (message.paymentId !== undefined) {
+      writer.uint32(58).string(message.paymentId);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(66).string(message.planId);
+    }
+    if (message.termMonths !== undefined) {
+      writer.uint32(72).int32(message.termMonths);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(82).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(90).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): WalletTransaction {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseWalletTransaction();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 33) {
+            break;
+          }
+
+          message.amount = reader.double();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.currency = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.note = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.paymentId = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.termMonths = reader.int32();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): WalletTransaction {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      amount: isSet(object.amount) ? globalThis.Number(object.amount) : 0,
+      currency: isSet(object.currency) ? globalThis.String(object.currency) : "",
+      note: isSet(object.note) ? globalThis.String(object.note) : undefined,
+      paymentId: isSet(object.paymentId)
+        ? globalThis.String(object.paymentId)
+        : isSet(object.payment_id)
+        ? globalThis.String(object.payment_id)
+        : undefined,
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+      termMonths: isSet(object.termMonths)
+        ? globalThis.Number(object.termMonths)
+        : isSet(object.term_months)
+        ? globalThis.Number(object.term_months)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: WalletTransaction): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      obj.amount = message.amount;
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      obj.currency = message.currency;
+    }
+    if (message.note !== undefined) {
+      obj.note = message.note;
+    }
+    if (message.paymentId !== undefined) {
+      obj.paymentId = message.paymentId;
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    if (message.termMonths !== undefined) {
+      obj.termMonths = Math.round(message.termMonths);
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<WalletTransaction>, I>>(base?: I): WalletTransaction {
+    return WalletTransaction.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<WalletTransaction>, I>>(object: I): WalletTransaction {
+    const message = createBaseWalletTransaction();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.type = object.type ?? "";
+    message.amount = object.amount ?? 0;
+    message.currency = object.currency ?? "";
+    message.note = object.note ?? undefined;
+    message.paymentId = object.paymentId ?? undefined;
+    message.planId = object.planId ?? undefined;
+    message.termMonths = object.termMonths ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBasePaymentHistoryItem(): PaymentHistoryItem {
+  return {
+    id: "",
+    amount: 0,
+    currency: "",
+    status: "",
+    planId: undefined,
+    planName: undefined,
+    invoiceId: "",
+    kind: "",
+    termMonths: undefined,
+    paymentMethod: undefined,
+    expiresAt: undefined,
+    createdAt: undefined,
+  };
+}
+
+export const PaymentHistoryItem: MessageFns<PaymentHistoryItem> = {
+  encode(message: PaymentHistoryItem, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      writer.uint32(17).double(message.amount);
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      writer.uint32(26).string(message.currency);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(34).string(message.status);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(42).string(message.planId);
+    }
+    if (message.planName !== undefined) {
+      writer.uint32(50).string(message.planName);
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      writer.uint32(58).string(message.invoiceId);
+    }
+    if (message.kind !== undefined && message.kind !== "") {
+      writer.uint32(66).string(message.kind);
+    }
+    if (message.termMonths !== undefined) {
+      writer.uint32(72).int32(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined) {
+      writer.uint32(82).string(message.paymentMethod);
+    }
+    if (message.expiresAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.expiresAt), writer.uint32(90).fork()).join();
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(98).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): PaymentHistoryItem {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBasePaymentHistoryItem();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 17) {
+            break;
+          }
+
+          message.amount = reader.double();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.currency = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.planName = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.invoiceId = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.kind = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.termMonths = reader.int32();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.paymentMethod = reader.string();
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.expiresAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): PaymentHistoryItem {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      amount: isSet(object.amount) ? globalThis.Number(object.amount) : 0,
+      currency: isSet(object.currency) ? globalThis.String(object.currency) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+      planName: isSet(object.planName)
+        ? globalThis.String(object.planName)
+        : isSet(object.plan_name)
+        ? globalThis.String(object.plan_name)
+        : undefined,
+      invoiceId: isSet(object.invoiceId)
+        ? globalThis.String(object.invoiceId)
+        : isSet(object.invoice_id)
+        ? globalThis.String(object.invoice_id)
+        : "",
+      kind: isSet(object.kind) ? globalThis.String(object.kind) : "",
+      termMonths: isSet(object.termMonths)
+        ? globalThis.Number(object.termMonths)
+        : isSet(object.term_months)
+        ? globalThis.Number(object.term_months)
+        : undefined,
+      paymentMethod: isSet(object.paymentMethod)
+        ? globalThis.String(object.paymentMethod)
+        : isSet(object.payment_method)
+        ? globalThis.String(object.payment_method)
+        : undefined,
+      expiresAt: isSet(object.expiresAt)
+        ? globalThis.String(object.expiresAt)
+        : isSet(object.expires_at)
+        ? globalThis.String(object.expires_at)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: PaymentHistoryItem): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      obj.amount = message.amount;
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      obj.currency = message.currency;
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    if (message.planName !== undefined) {
+      obj.planName = message.planName;
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      obj.invoiceId = message.invoiceId;
+    }
+    if (message.kind !== undefined && message.kind !== "") {
+      obj.kind = message.kind;
+    }
+    if (message.termMonths !== undefined) {
+      obj.termMonths = Math.round(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined) {
+      obj.paymentMethod = message.paymentMethod;
+    }
+    if (message.expiresAt !== undefined) {
+      obj.expiresAt = message.expiresAt;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<PaymentHistoryItem>, I>>(base?: I): PaymentHistoryItem {
+    return PaymentHistoryItem.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<PaymentHistoryItem>, I>>(object: I): PaymentHistoryItem {
+    const message = createBasePaymentHistoryItem();
+    message.id = object.id ?? "";
+    message.amount = object.amount ?? 0;
+    message.currency = object.currency ?? "";
+    message.status = object.status ?? "";
+    message.planId = object.planId ?? undefined;
+    message.planName = object.planName ?? undefined;
+    message.invoiceId = object.invoiceId ?? "";
+    message.kind = object.kind ?? "";
+    message.termMonths = object.termMonths ?? undefined;
+    message.paymentMethod = object.paymentMethod ?? undefined;
+    message.expiresAt = object.expiresAt ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseVideo(): Video {
+  return {
+    id: "",
+    userId: "",
+    title: "",
+    description: undefined,
+    url: "",
+    status: "",
+    size: 0,
+    duration: 0,
+    format: "",
+    thumbnail: undefined,
+    processingStatus: undefined,
+    storageType: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+    jobId: undefined,
+  };
+}
+
+export const Video: MessageFns<Video> = {
+  encode(message: Video, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.title !== undefined && message.title !== "") {
+      writer.uint32(26).string(message.title);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(34).string(message.description);
+    }
+    if (message.url !== undefined && message.url !== "") {
+      writer.uint32(42).string(message.url);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(50).string(message.status);
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      writer.uint32(56).int64(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      writer.uint32(64).int32(message.duration);
+    }
+    if (message.format !== undefined && message.format !== "") {
+      writer.uint32(74).string(message.format);
+    }
+    if (message.thumbnail !== undefined) {
+      writer.uint32(82).string(message.thumbnail);
+    }
+    if (message.processingStatus !== undefined) {
+      writer.uint32(90).string(message.processingStatus);
+    }
+    if (message.storageType !== undefined) {
+      writer.uint32(98).string(message.storageType);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(106).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(114).fork()).join();
+    }
+    if (message.jobId !== undefined) {
+      writer.uint32(122).string(message.jobId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Video {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseVideo();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.title = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.url = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.size = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.format = reader.string();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.thumbnail = reader.string();
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.processingStatus = reader.string();
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.storageType = reader.string();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 15: {
+          if (tag !== 122) {
+            break;
+          }
+
+          message.jobId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Video {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      title: isSet(object.title) ? globalThis.String(object.title) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      url: isSet(object.url) ? globalThis.String(object.url) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      size: isSet(object.size) ? globalThis.Number(object.size) : 0,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : 0,
+      format: isSet(object.format) ? globalThis.String(object.format) : "",
+      thumbnail: isSet(object.thumbnail) ? globalThis.String(object.thumbnail) : undefined,
+      processingStatus: isSet(object.processingStatus)
+        ? globalThis.String(object.processingStatus)
+        : isSet(object.processing_status)
+        ? globalThis.String(object.processing_status)
+        : undefined,
+      storageType: isSet(object.storageType)
+        ? globalThis.String(object.storageType)
+        : isSet(object.storage_type)
+        ? globalThis.String(object.storage_type)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+      jobId: isSet(object.jobId)
+        ? globalThis.String(object.jobId)
+        : isSet(object.job_id)
+        ? globalThis.String(object.job_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: Video): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.title !== undefined && message.title !== "") {
+      obj.title = message.title;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.url !== undefined && message.url !== "") {
+      obj.url = message.url;
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      obj.size = Math.round(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.format !== undefined && message.format !== "") {
+      obj.format = message.format;
+    }
+    if (message.thumbnail !== undefined) {
+      obj.thumbnail = message.thumbnail;
+    }
+    if (message.processingStatus !== undefined) {
+      obj.processingStatus = message.processingStatus;
+    }
+    if (message.storageType !== undefined) {
+      obj.storageType = message.storageType;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    if (message.jobId !== undefined) {
+      obj.jobId = message.jobId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Video>, I>>(base?: I): Video {
+    return Video.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Video>, I>>(object: I): Video {
+    const message = createBaseVideo();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.title = object.title ?? "";
+    message.description = object.description ?? undefined;
+    message.url = object.url ?? "";
+    message.status = object.status ?? "";
+    message.size = object.size ?? 0;
+    message.duration = object.duration ?? 0;
+    message.format = object.format ?? "";
+    message.thumbnail = object.thumbnail ?? undefined;
+    message.processingStatus = object.processingStatus ?? undefined;
+    message.storageType = object.storageType ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    message.jobId = object.jobId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminDashboard(): AdminDashboard {
+  return {
+    totalUsers: 0,
+    totalVideos: 0,
+    totalStorageUsed: 0,
+    totalPayments: 0,
+    totalRevenue: 0,
+    activeSubscriptions: 0,
+    totalAdTemplates: 0,
+    newUsersToday: 0,
+    newVideosToday: 0,
+  };
+}
+
+export const AdminDashboard: MessageFns<AdminDashboard> = {
+  encode(message: AdminDashboard, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.totalUsers !== undefined && message.totalUsers !== 0) {
+      writer.uint32(8).int64(message.totalUsers);
+    }
+    if (message.totalVideos !== undefined && message.totalVideos !== 0) {
+      writer.uint32(16).int64(message.totalVideos);
+    }
+    if (message.totalStorageUsed !== undefined && message.totalStorageUsed !== 0) {
+      writer.uint32(24).int64(message.totalStorageUsed);
+    }
+    if (message.totalPayments !== undefined && message.totalPayments !== 0) {
+      writer.uint32(32).int64(message.totalPayments);
+    }
+    if (message.totalRevenue !== undefined && message.totalRevenue !== 0) {
+      writer.uint32(41).double(message.totalRevenue);
+    }
+    if (message.activeSubscriptions !== undefined && message.activeSubscriptions !== 0) {
+      writer.uint32(48).int64(message.activeSubscriptions);
+    }
+    if (message.totalAdTemplates !== undefined && message.totalAdTemplates !== 0) {
+      writer.uint32(56).int64(message.totalAdTemplates);
+    }
+    if (message.newUsersToday !== undefined && message.newUsersToday !== 0) {
+      writer.uint32(64).int64(message.newUsersToday);
+    }
+    if (message.newVideosToday !== undefined && message.newVideosToday !== 0) {
+      writer.uint32(72).int64(message.newVideosToday);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminDashboard {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminDashboard();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.totalUsers = longToNumber(reader.int64());
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.totalVideos = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.totalStorageUsed = longToNumber(reader.int64());
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.totalPayments = longToNumber(reader.int64());
+          continue;
+        }
+        case 5: {
+          if (tag !== 41) {
+            break;
+          }
+
+          message.totalRevenue = reader.double();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.activeSubscriptions = longToNumber(reader.int64());
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.totalAdTemplates = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.newUsersToday = longToNumber(reader.int64());
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.newVideosToday = longToNumber(reader.int64());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminDashboard {
+    return {
+      totalUsers: isSet(object.totalUsers)
+        ? globalThis.Number(object.totalUsers)
+        : isSet(object.total_users)
+        ? globalThis.Number(object.total_users)
+        : 0,
+      totalVideos: isSet(object.totalVideos)
+        ? globalThis.Number(object.totalVideos)
+        : isSet(object.total_videos)
+        ? globalThis.Number(object.total_videos)
+        : 0,
+      totalStorageUsed: isSet(object.totalStorageUsed)
+        ? globalThis.Number(object.totalStorageUsed)
+        : isSet(object.total_storage_used)
+        ? globalThis.Number(object.total_storage_used)
+        : 0,
+      totalPayments: isSet(object.totalPayments)
+        ? globalThis.Number(object.totalPayments)
+        : isSet(object.total_payments)
+        ? globalThis.Number(object.total_payments)
+        : 0,
+      totalRevenue: isSet(object.totalRevenue)
+        ? globalThis.Number(object.totalRevenue)
+        : isSet(object.total_revenue)
+        ? globalThis.Number(object.total_revenue)
+        : 0,
+      activeSubscriptions: isSet(object.activeSubscriptions)
+        ? globalThis.Number(object.activeSubscriptions)
+        : isSet(object.active_subscriptions)
+        ? globalThis.Number(object.active_subscriptions)
+        : 0,
+      totalAdTemplates: isSet(object.totalAdTemplates)
+        ? globalThis.Number(object.totalAdTemplates)
+        : isSet(object.total_ad_templates)
+        ? globalThis.Number(object.total_ad_templates)
+        : 0,
+      newUsersToday: isSet(object.newUsersToday)
+        ? globalThis.Number(object.newUsersToday)
+        : isSet(object.new_users_today)
+        ? globalThis.Number(object.new_users_today)
+        : 0,
+      newVideosToday: isSet(object.newVideosToday)
+        ? globalThis.Number(object.newVideosToday)
+        : isSet(object.new_videos_today)
+        ? globalThis.Number(object.new_videos_today)
+        : 0,
+    };
+  },
+
+  toJSON(message: AdminDashboard): unknown {
+    const obj: any = {};
+    if (message.totalUsers !== undefined && message.totalUsers !== 0) {
+      obj.totalUsers = Math.round(message.totalUsers);
+    }
+    if (message.totalVideos !== undefined && message.totalVideos !== 0) {
+      obj.totalVideos = Math.round(message.totalVideos);
+    }
+    if (message.totalStorageUsed !== undefined && message.totalStorageUsed !== 0) {
+      obj.totalStorageUsed = Math.round(message.totalStorageUsed);
+    }
+    if (message.totalPayments !== undefined && message.totalPayments !== 0) {
+      obj.totalPayments = Math.round(message.totalPayments);
+    }
+    if (message.totalRevenue !== undefined && message.totalRevenue !== 0) {
+      obj.totalRevenue = message.totalRevenue;
+    }
+    if (message.activeSubscriptions !== undefined && message.activeSubscriptions !== 0) {
+      obj.activeSubscriptions = Math.round(message.activeSubscriptions);
+    }
+    if (message.totalAdTemplates !== undefined && message.totalAdTemplates !== 0) {
+      obj.totalAdTemplates = Math.round(message.totalAdTemplates);
+    }
+    if (message.newUsersToday !== undefined && message.newUsersToday !== 0) {
+      obj.newUsersToday = Math.round(message.newUsersToday);
+    }
+    if (message.newVideosToday !== undefined && message.newVideosToday !== 0) {
+      obj.newVideosToday = Math.round(message.newVideosToday);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminDashboard>, I>>(base?: I): AdminDashboard {
+    return AdminDashboard.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminDashboard>, I>>(object: I): AdminDashboard {
+    const message = createBaseAdminDashboard();
+    message.totalUsers = object.totalUsers ?? 0;
+    message.totalVideos = object.totalVideos ?? 0;
+    message.totalStorageUsed = object.totalStorageUsed ?? 0;
+    message.totalPayments = object.totalPayments ?? 0;
+    message.totalRevenue = object.totalRevenue ?? 0;
+    message.activeSubscriptions = object.activeSubscriptions ?? 0;
+    message.totalAdTemplates = object.totalAdTemplates ?? 0;
+    message.newUsersToday = object.newUsersToday ?? 0;
+    message.newVideosToday = object.newVideosToday ?? 0;
+    return message;
+  },
+};
+
+function createBaseAdminUser(): AdminUser {
+  return {
+    id: "",
+    email: "",
+    username: undefined,
+    avatar: undefined,
+    role: undefined,
+    planId: undefined,
+    planName: undefined,
+    storageUsed: 0,
+    videoCount: 0,
+    walletBalance: 0,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const AdminUser: MessageFns<AdminUser> = {
+  encode(message: AdminUser, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.email !== undefined && message.email !== "") {
+      writer.uint32(18).string(message.email);
+    }
+    if (message.username !== undefined) {
+      writer.uint32(26).string(message.username);
+    }
+    if (message.avatar !== undefined) {
+      writer.uint32(34).string(message.avatar);
+    }
+    if (message.role !== undefined) {
+      writer.uint32(42).string(message.role);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(50).string(message.planId);
+    }
+    if (message.planName !== undefined) {
+      writer.uint32(58).string(message.planName);
+    }
+    if (message.storageUsed !== undefined && message.storageUsed !== 0) {
+      writer.uint32(64).int64(message.storageUsed);
+    }
+    if (message.videoCount !== undefined && message.videoCount !== 0) {
+      writer.uint32(72).int64(message.videoCount);
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      writer.uint32(81).double(message.walletBalance);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(90).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(98).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminUser {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminUser();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.avatar = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.role = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.planName = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.storageUsed = longToNumber(reader.int64());
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.videoCount = longToNumber(reader.int64());
+          continue;
+        }
+        case 10: {
+          if (tag !== 81) {
+            break;
+          }
+
+          message.walletBalance = reader.double();
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminUser {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      email: isSet(object.email) ? globalThis.String(object.email) : "",
+      username: isSet(object.username) ? globalThis.String(object.username) : undefined,
+      avatar: isSet(object.avatar) ? globalThis.String(object.avatar) : undefined,
+      role: isSet(object.role) ? globalThis.String(object.role) : undefined,
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+      planName: isSet(object.planName)
+        ? globalThis.String(object.planName)
+        : isSet(object.plan_name)
+        ? globalThis.String(object.plan_name)
+        : undefined,
+      storageUsed: isSet(object.storageUsed)
+        ? globalThis.Number(object.storageUsed)
+        : isSet(object.storage_used)
+        ? globalThis.Number(object.storage_used)
+        : 0,
+      videoCount: isSet(object.videoCount)
+        ? globalThis.Number(object.videoCount)
+        : isSet(object.video_count)
+        ? globalThis.Number(object.video_count)
+        : 0,
+      walletBalance: isSet(object.walletBalance)
+        ? globalThis.Number(object.walletBalance)
+        : isSet(object.wallet_balance)
+        ? globalThis.Number(object.wallet_balance)
+        : 0,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminUser): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.email !== undefined && message.email !== "") {
+      obj.email = message.email;
+    }
+    if (message.username !== undefined) {
+      obj.username = message.username;
+    }
+    if (message.avatar !== undefined) {
+      obj.avatar = message.avatar;
+    }
+    if (message.role !== undefined) {
+      obj.role = message.role;
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    if (message.planName !== undefined) {
+      obj.planName = message.planName;
+    }
+    if (message.storageUsed !== undefined && message.storageUsed !== 0) {
+      obj.storageUsed = Math.round(message.storageUsed);
+    }
+    if (message.videoCount !== undefined && message.videoCount !== 0) {
+      obj.videoCount = Math.round(message.videoCount);
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      obj.walletBalance = message.walletBalance;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminUser>, I>>(base?: I): AdminUser {
+    return AdminUser.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminUser>, I>>(object: I): AdminUser {
+    const message = createBaseAdminUser();
+    message.id = object.id ?? "";
+    message.email = object.email ?? "";
+    message.username = object.username ?? undefined;
+    message.avatar = object.avatar ?? undefined;
+    message.role = object.role ?? undefined;
+    message.planId = object.planId ?? undefined;
+    message.planName = object.planName ?? undefined;
+    message.storageUsed = object.storageUsed ?? 0;
+    message.videoCount = object.videoCount ?? 0;
+    message.walletBalance = object.walletBalance ?? 0;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseReferralUserSummary(): ReferralUserSummary {
+  return { id: "", email: "", username: undefined };
+}
+
+export const ReferralUserSummary: MessageFns<ReferralUserSummary> = {
+  encode(message: ReferralUserSummary, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.email !== undefined && message.email !== "") {
+      writer.uint32(18).string(message.email);
+    }
+    if (message.username !== undefined) {
+      writer.uint32(26).string(message.username);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ReferralUserSummary {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseReferralUserSummary();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.email = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ReferralUserSummary {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      email: isSet(object.email) ? globalThis.String(object.email) : "",
+      username: isSet(object.username) ? globalThis.String(object.username) : undefined,
+    };
+  },
+
+  toJSON(message: ReferralUserSummary): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.email !== undefined && message.email !== "") {
+      obj.email = message.email;
+    }
+    if (message.username !== undefined) {
+      obj.username = message.username;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ReferralUserSummary>, I>>(base?: I): ReferralUserSummary {
+    return ReferralUserSummary.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ReferralUserSummary>, I>>(object: I): ReferralUserSummary {
+    const message = createBaseReferralUserSummary();
+    message.id = object.id ?? "";
+    message.email = object.email ?? "";
+    message.username = object.username ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminUserReferralInfo(): AdminUserReferralInfo {
+  return {
+    referrer: undefined,
+    referralEligible: false,
+    effectiveRewardPercent: 0,
+    rewardOverridePercent: undefined,
+    shareLink: undefined,
+    rewardGranted: false,
+    rewardGrantedAt: undefined,
+    rewardPaymentId: undefined,
+    rewardAmount: undefined,
+  };
+}
+
+export const AdminUserReferralInfo: MessageFns<AdminUserReferralInfo> = {
+  encode(message: AdminUserReferralInfo, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.referrer !== undefined) {
+      ReferralUserSummary.encode(message.referrer, writer.uint32(10).fork()).join();
+    }
+    if (message.referralEligible !== undefined && message.referralEligible !== false) {
+      writer.uint32(16).bool(message.referralEligible);
+    }
+    if (message.effectiveRewardPercent !== undefined && message.effectiveRewardPercent !== 0) {
+      writer.uint32(25).double(message.effectiveRewardPercent);
+    }
+    if (message.rewardOverridePercent !== undefined) {
+      writer.uint32(33).double(message.rewardOverridePercent);
+    }
+    if (message.shareLink !== undefined) {
+      writer.uint32(42).string(message.shareLink);
+    }
+    if (message.rewardGranted !== undefined && message.rewardGranted !== false) {
+      writer.uint32(48).bool(message.rewardGranted);
+    }
+    if (message.rewardGrantedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.rewardGrantedAt), writer.uint32(58).fork()).join();
+    }
+    if (message.rewardPaymentId !== undefined) {
+      writer.uint32(66).string(message.rewardPaymentId);
+    }
+    if (message.rewardAmount !== undefined) {
+      writer.uint32(73).double(message.rewardAmount);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminUserReferralInfo {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminUserReferralInfo();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.referrer = ReferralUserSummary.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.referralEligible = reader.bool();
+          continue;
+        }
+        case 3: {
+          if (tag !== 25) {
+            break;
+          }
+
+          message.effectiveRewardPercent = reader.double();
+          continue;
+        }
+        case 4: {
+          if (tag !== 33) {
+            break;
+          }
+
+          message.rewardOverridePercent = reader.double();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.shareLink = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.rewardGranted = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.rewardGrantedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.rewardPaymentId = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 73) {
+            break;
+          }
+
+          message.rewardAmount = reader.double();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminUserReferralInfo {
+    return {
+      referrer: isSet(object.referrer) ? ReferralUserSummary.fromJSON(object.referrer) : undefined,
+      referralEligible: isSet(object.referralEligible)
+        ? globalThis.Boolean(object.referralEligible)
+        : isSet(object.referral_eligible)
+        ? globalThis.Boolean(object.referral_eligible)
+        : false,
+      effectiveRewardPercent: isSet(object.effectiveRewardPercent)
+        ? globalThis.Number(object.effectiveRewardPercent)
+        : isSet(object.effective_reward_percent)
+        ? globalThis.Number(object.effective_reward_percent)
+        : 0,
+      rewardOverridePercent: isSet(object.rewardOverridePercent)
+        ? globalThis.Number(object.rewardOverridePercent)
+        : isSet(object.reward_override_percent)
+        ? globalThis.Number(object.reward_override_percent)
+        : undefined,
+      shareLink: isSet(object.shareLink)
+        ? globalThis.String(object.shareLink)
+        : isSet(object.share_link)
+        ? globalThis.String(object.share_link)
+        : undefined,
+      rewardGranted: isSet(object.rewardGranted)
+        ? globalThis.Boolean(object.rewardGranted)
+        : isSet(object.reward_granted)
+        ? globalThis.Boolean(object.reward_granted)
+        : false,
+      rewardGrantedAt: isSet(object.rewardGrantedAt)
+        ? globalThis.String(object.rewardGrantedAt)
+        : isSet(object.reward_granted_at)
+        ? globalThis.String(object.reward_granted_at)
+        : undefined,
+      rewardPaymentId: isSet(object.rewardPaymentId)
+        ? globalThis.String(object.rewardPaymentId)
+        : isSet(object.reward_payment_id)
+        ? globalThis.String(object.reward_payment_id)
+        : undefined,
+      rewardAmount: isSet(object.rewardAmount)
+        ? globalThis.Number(object.rewardAmount)
+        : isSet(object.reward_amount)
+        ? globalThis.Number(object.reward_amount)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminUserReferralInfo): unknown {
+    const obj: any = {};
+    if (message.referrer !== undefined) {
+      obj.referrer = ReferralUserSummary.toJSON(message.referrer);
+    }
+    if (message.referralEligible !== undefined && message.referralEligible !== false) {
+      obj.referralEligible = message.referralEligible;
+    }
+    if (message.effectiveRewardPercent !== undefined && message.effectiveRewardPercent !== 0) {
+      obj.effectiveRewardPercent = message.effectiveRewardPercent;
+    }
+    if (message.rewardOverridePercent !== undefined) {
+      obj.rewardOverridePercent = message.rewardOverridePercent;
+    }
+    if (message.shareLink !== undefined) {
+      obj.shareLink = message.shareLink;
+    }
+    if (message.rewardGranted !== undefined && message.rewardGranted !== false) {
+      obj.rewardGranted = message.rewardGranted;
+    }
+    if (message.rewardGrantedAt !== undefined) {
+      obj.rewardGrantedAt = message.rewardGrantedAt;
+    }
+    if (message.rewardPaymentId !== undefined) {
+      obj.rewardPaymentId = message.rewardPaymentId;
+    }
+    if (message.rewardAmount !== undefined) {
+      obj.rewardAmount = message.rewardAmount;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminUserReferralInfo>, I>>(base?: I): AdminUserReferralInfo {
+    return AdminUserReferralInfo.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminUserReferralInfo>, I>>(object: I): AdminUserReferralInfo {
+    const message = createBaseAdminUserReferralInfo();
+    message.referrer = (object.referrer !== undefined && object.referrer !== null)
+      ? ReferralUserSummary.fromPartial(object.referrer)
+      : undefined;
+    message.referralEligible = object.referralEligible ?? false;
+    message.effectiveRewardPercent = object.effectiveRewardPercent ?? 0;
+    message.rewardOverridePercent = object.rewardOverridePercent ?? undefined;
+    message.shareLink = object.shareLink ?? undefined;
+    message.rewardGranted = object.rewardGranted ?? false;
+    message.rewardGrantedAt = object.rewardGrantedAt ?? undefined;
+    message.rewardPaymentId = object.rewardPaymentId ?? undefined;
+    message.rewardAmount = object.rewardAmount ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminUserDetail(): AdminUserDetail {
+  return { user: undefined, subscription: undefined, referral: undefined };
+}
+
+export const AdminUserDetail: MessageFns<AdminUserDetail> = {
+  encode(message: AdminUserDetail, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.user !== undefined) {
+      AdminUser.encode(message.user, writer.uint32(10).fork()).join();
+    }
+    if (message.subscription !== undefined) {
+      PlanSubscription.encode(message.subscription, writer.uint32(18).fork()).join();
+    }
+    if (message.referral !== undefined) {
+      AdminUserReferralInfo.encode(message.referral, writer.uint32(26).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminUserDetail {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminUserDetail();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.user = AdminUser.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.subscription = PlanSubscription.decode(reader, reader.uint32());
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.referral = AdminUserReferralInfo.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminUserDetail {
+    return {
+      user: isSet(object.user) ? AdminUser.fromJSON(object.user) : undefined,
+      subscription: isSet(object.subscription) ? PlanSubscription.fromJSON(object.subscription) : undefined,
+      referral: isSet(object.referral) ? AdminUserReferralInfo.fromJSON(object.referral) : undefined,
+    };
+  },
+
+  toJSON(message: AdminUserDetail): unknown {
+    const obj: any = {};
+    if (message.user !== undefined) {
+      obj.user = AdminUser.toJSON(message.user);
+    }
+    if (message.subscription !== undefined) {
+      obj.subscription = PlanSubscription.toJSON(message.subscription);
+    }
+    if (message.referral !== undefined) {
+      obj.referral = AdminUserReferralInfo.toJSON(message.referral);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminUserDetail>, I>>(base?: I): AdminUserDetail {
+    return AdminUserDetail.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminUserDetail>, I>>(object: I): AdminUserDetail {
+    const message = createBaseAdminUserDetail();
+    message.user = (object.user !== undefined && object.user !== null) ? AdminUser.fromPartial(object.user) : undefined;
+    message.subscription = (object.subscription !== undefined && object.subscription !== null)
+      ? PlanSubscription.fromPartial(object.subscription)
+      : undefined;
+    message.referral = (object.referral !== undefined && object.referral !== null)
+      ? AdminUserReferralInfo.fromPartial(object.referral)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseAdminVideo(): AdminVideo {
+  return {
+    id: "",
+    userId: "",
+    title: "",
+    description: undefined,
+    url: "",
+    status: "",
+    size: 0,
+    duration: 0,
+    format: "",
+    ownerEmail: undefined,
+    adTemplateId: undefined,
+    adTemplateName: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+    processingStatus: undefined,
+    jobId: undefined,
+  };
+}
+
+export const AdminVideo: MessageFns<AdminVideo> = {
+  encode(message: AdminVideo, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.title !== undefined && message.title !== "") {
+      writer.uint32(26).string(message.title);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(34).string(message.description);
+    }
+    if (message.url !== undefined && message.url !== "") {
+      writer.uint32(42).string(message.url);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(50).string(message.status);
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      writer.uint32(56).int64(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      writer.uint32(64).int32(message.duration);
+    }
+    if (message.format !== undefined && message.format !== "") {
+      writer.uint32(74).string(message.format);
+    }
+    if (message.ownerEmail !== undefined) {
+      writer.uint32(82).string(message.ownerEmail);
+    }
+    if (message.adTemplateId !== undefined) {
+      writer.uint32(90).string(message.adTemplateId);
+    }
+    if (message.adTemplateName !== undefined) {
+      writer.uint32(98).string(message.adTemplateName);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(106).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(114).fork()).join();
+    }
+    if (message.processingStatus !== undefined) {
+      writer.uint32(122).string(message.processingStatus);
+    }
+    if (message.jobId !== undefined) {
+      writer.uint32(130).string(message.jobId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminVideo {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminVideo();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.title = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.url = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.size = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.format = reader.string();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.ownerEmail = reader.string();
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.adTemplateId = reader.string();
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.adTemplateName = reader.string();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 15: {
+          if (tag !== 122) {
+            break;
+          }
+
+          message.processingStatus = reader.string();
+          continue;
+        }
+        case 16: {
+          if (tag !== 130) {
+            break;
+          }
+
+          message.jobId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminVideo {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      title: isSet(object.title) ? globalThis.String(object.title) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      url: isSet(object.url) ? globalThis.String(object.url) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      size: isSet(object.size) ? globalThis.Number(object.size) : 0,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : 0,
+      format: isSet(object.format) ? globalThis.String(object.format) : "",
+      ownerEmail: isSet(object.ownerEmail)
+        ? globalThis.String(object.ownerEmail)
+        : isSet(object.owner_email)
+        ? globalThis.String(object.owner_email)
+        : undefined,
+      adTemplateId: isSet(object.adTemplateId)
+        ? globalThis.String(object.adTemplateId)
+        : isSet(object.ad_template_id)
+        ? globalThis.String(object.ad_template_id)
+        : undefined,
+      adTemplateName: isSet(object.adTemplateName)
+        ? globalThis.String(object.adTemplateName)
+        : isSet(object.ad_template_name)
+        ? globalThis.String(object.ad_template_name)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+      processingStatus: isSet(object.processingStatus)
+        ? globalThis.String(object.processingStatus)
+        : isSet(object.processing_status)
+        ? globalThis.String(object.processing_status)
+        : undefined,
+      jobId: isSet(object.jobId)
+        ? globalThis.String(object.jobId)
+        : isSet(object.job_id)
+        ? globalThis.String(object.job_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminVideo): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.title !== undefined && message.title !== "") {
+      obj.title = message.title;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.url !== undefined && message.url !== "") {
+      obj.url = message.url;
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      obj.size = Math.round(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.format !== undefined && message.format !== "") {
+      obj.format = message.format;
+    }
+    if (message.ownerEmail !== undefined) {
+      obj.ownerEmail = message.ownerEmail;
+    }
+    if (message.adTemplateId !== undefined) {
+      obj.adTemplateId = message.adTemplateId;
+    }
+    if (message.adTemplateName !== undefined) {
+      obj.adTemplateName = message.adTemplateName;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    if (message.processingStatus !== undefined) {
+      obj.processingStatus = message.processingStatus;
+    }
+    if (message.jobId !== undefined) {
+      obj.jobId = message.jobId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminVideo>, I>>(base?: I): AdminVideo {
+    return AdminVideo.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminVideo>, I>>(object: I): AdminVideo {
+    const message = createBaseAdminVideo();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.title = object.title ?? "";
+    message.description = object.description ?? undefined;
+    message.url = object.url ?? "";
+    message.status = object.status ?? "";
+    message.size = object.size ?? 0;
+    message.duration = object.duration ?? 0;
+    message.format = object.format ?? "";
+    message.ownerEmail = object.ownerEmail ?? undefined;
+    message.adTemplateId = object.adTemplateId ?? undefined;
+    message.adTemplateName = object.adTemplateName ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    message.processingStatus = object.processingStatus ?? undefined;
+    message.jobId = object.jobId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminPayment(): AdminPayment {
+  return {
+    id: "",
+    userId: "",
+    planId: undefined,
+    amount: 0,
+    currency: "",
+    status: "",
+    provider: "",
+    transactionId: undefined,
+    userEmail: undefined,
+    planName: undefined,
+    invoiceId: "",
+    termMonths: undefined,
+    paymentMethod: undefined,
+    expiresAt: undefined,
+    walletAmount: undefined,
+    topupAmount: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const AdminPayment: MessageFns<AdminPayment> = {
+  encode(message: AdminPayment, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.planId !== undefined) {
+      writer.uint32(26).string(message.planId);
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      writer.uint32(33).double(message.amount);
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      writer.uint32(42).string(message.currency);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(50).string(message.status);
+    }
+    if (message.provider !== undefined && message.provider !== "") {
+      writer.uint32(58).string(message.provider);
+    }
+    if (message.transactionId !== undefined) {
+      writer.uint32(66).string(message.transactionId);
+    }
+    if (message.userEmail !== undefined) {
+      writer.uint32(74).string(message.userEmail);
+    }
+    if (message.planName !== undefined) {
+      writer.uint32(82).string(message.planName);
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      writer.uint32(90).string(message.invoiceId);
+    }
+    if (message.termMonths !== undefined) {
+      writer.uint32(96).int32(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined) {
+      writer.uint32(106).string(message.paymentMethod);
+    }
+    if (message.expiresAt !== undefined) {
+      writer.uint32(114).string(message.expiresAt);
+    }
+    if (message.walletAmount !== undefined) {
+      writer.uint32(121).double(message.walletAmount);
+    }
+    if (message.topupAmount !== undefined) {
+      writer.uint32(129).double(message.topupAmount);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(138).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(146).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminPayment {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminPayment();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 33) {
+            break;
+          }
+
+          message.amount = reader.double();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.currency = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.provider = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.transactionId = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.userEmail = reader.string();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.planName = reader.string();
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.invoiceId = reader.string();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.termMonths = reader.int32();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.paymentMethod = reader.string();
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.expiresAt = reader.string();
+          continue;
+        }
+        case 15: {
+          if (tag !== 121) {
+            break;
+          }
+
+          message.walletAmount = reader.double();
+          continue;
+        }
+        case 16: {
+          if (tag !== 129) {
+            break;
+          }
+
+          message.topupAmount = reader.double();
+          continue;
+        }
+        case 17: {
+          if (tag !== 138) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 18: {
+          if (tag !== 146) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminPayment {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : undefined,
+      amount: isSet(object.amount) ? globalThis.Number(object.amount) : 0,
+      currency: isSet(object.currency) ? globalThis.String(object.currency) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      provider: isSet(object.provider) ? globalThis.String(object.provider) : "",
+      transactionId: isSet(object.transactionId)
+        ? globalThis.String(object.transactionId)
+        : isSet(object.transaction_id)
+        ? globalThis.String(object.transaction_id)
+        : undefined,
+      userEmail: isSet(object.userEmail)
+        ? globalThis.String(object.userEmail)
+        : isSet(object.user_email)
+        ? globalThis.String(object.user_email)
+        : undefined,
+      planName: isSet(object.planName)
+        ? globalThis.String(object.planName)
+        : isSet(object.plan_name)
+        ? globalThis.String(object.plan_name)
+        : undefined,
+      invoiceId: isSet(object.invoiceId)
+        ? globalThis.String(object.invoiceId)
+        : isSet(object.invoice_id)
+        ? globalThis.String(object.invoice_id)
+        : "",
+      termMonths: isSet(object.termMonths)
+        ? globalThis.Number(object.termMonths)
+        : isSet(object.term_months)
+        ? globalThis.Number(object.term_months)
+        : undefined,
+      paymentMethod: isSet(object.paymentMethod)
+        ? globalThis.String(object.paymentMethod)
+        : isSet(object.payment_method)
+        ? globalThis.String(object.payment_method)
+        : undefined,
+      expiresAt: isSet(object.expiresAt)
+        ? globalThis.String(object.expiresAt)
+        : isSet(object.expires_at)
+        ? globalThis.String(object.expires_at)
+        : undefined,
+      walletAmount: isSet(object.walletAmount)
+        ? globalThis.Number(object.walletAmount)
+        : isSet(object.wallet_amount)
+        ? globalThis.Number(object.wallet_amount)
+        : undefined,
+      topupAmount: isSet(object.topupAmount)
+        ? globalThis.Number(object.topupAmount)
+        : isSet(object.topup_amount)
+        ? globalThis.Number(object.topup_amount)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminPayment): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.planId !== undefined) {
+      obj.planId = message.planId;
+    }
+    if (message.amount !== undefined && message.amount !== 0) {
+      obj.amount = message.amount;
+    }
+    if (message.currency !== undefined && message.currency !== "") {
+      obj.currency = message.currency;
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.provider !== undefined && message.provider !== "") {
+      obj.provider = message.provider;
+    }
+    if (message.transactionId !== undefined) {
+      obj.transactionId = message.transactionId;
+    }
+    if (message.userEmail !== undefined) {
+      obj.userEmail = message.userEmail;
+    }
+    if (message.planName !== undefined) {
+      obj.planName = message.planName;
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      obj.invoiceId = message.invoiceId;
+    }
+    if (message.termMonths !== undefined) {
+      obj.termMonths = Math.round(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined) {
+      obj.paymentMethod = message.paymentMethod;
+    }
+    if (message.expiresAt !== undefined) {
+      obj.expiresAt = message.expiresAt;
+    }
+    if (message.walletAmount !== undefined) {
+      obj.walletAmount = message.walletAmount;
+    }
+    if (message.topupAmount !== undefined) {
+      obj.topupAmount = message.topupAmount;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminPayment>, I>>(base?: I): AdminPayment {
+    return AdminPayment.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminPayment>, I>>(object: I): AdminPayment {
+    const message = createBaseAdminPayment();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.planId = object.planId ?? undefined;
+    message.amount = object.amount ?? 0;
+    message.currency = object.currency ?? "";
+    message.status = object.status ?? "";
+    message.provider = object.provider ?? "";
+    message.transactionId = object.transactionId ?? undefined;
+    message.userEmail = object.userEmail ?? undefined;
+    message.planName = object.planName ?? undefined;
+    message.invoiceId = object.invoiceId ?? "";
+    message.termMonths = object.termMonths ?? undefined;
+    message.paymentMethod = object.paymentMethod ?? undefined;
+    message.expiresAt = object.expiresAt ?? undefined;
+    message.walletAmount = object.walletAmount ?? undefined;
+    message.topupAmount = object.topupAmount ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminPlan(): AdminPlan {
+  return {
+    id: "",
+    name: "",
+    description: undefined,
+    features: [],
+    price: 0,
+    cycle: "",
+    storageLimit: 0,
+    uploadLimit: 0,
+    durationLimit: 0,
+    qualityLimit: "",
+    isActive: false,
+    userCount: 0,
+    paymentCount: 0,
+    subscriptionCount: 0,
+  };
+}
+
+export const AdminPlan: MessageFns<AdminPlan> = {
+  encode(message: AdminPlan, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.features !== undefined && message.features.length !== 0) {
+      for (const v of message.features) {
+        writer.uint32(34).string(v!);
+      }
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      writer.uint32(41).double(message.price);
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      writer.uint32(50).string(message.cycle);
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      writer.uint32(56).int64(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      writer.uint32(64).int32(message.uploadLimit);
+    }
+    if (message.durationLimit !== undefined && message.durationLimit !== 0) {
+      writer.uint32(72).int32(message.durationLimit);
+    }
+    if (message.qualityLimit !== undefined && message.qualityLimit !== "") {
+      writer.uint32(82).string(message.qualityLimit);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(88).bool(message.isActive);
+    }
+    if (message.userCount !== undefined && message.userCount !== 0) {
+      writer.uint32(96).int64(message.userCount);
+    }
+    if (message.paymentCount !== undefined && message.paymentCount !== 0) {
+      writer.uint32(104).int64(message.paymentCount);
+    }
+    if (message.subscriptionCount !== undefined && message.subscriptionCount !== 0) {
+      writer.uint32(112).int64(message.subscriptionCount);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminPlan {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminPlan();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          const el = reader.string();
+          if (el !== undefined) {
+            message.features!.push(el);
+          }
+          continue;
+        }
+        case 5: {
+          if (tag !== 41) {
+            break;
+          }
+
+          message.price = reader.double();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.cycle = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.storageLimit = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.uploadLimit = reader.int32();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.durationLimit = reader.int32();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.qualityLimit = reader.string();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.userCount = longToNumber(reader.int64());
+          continue;
+        }
+        case 13: {
+          if (tag !== 104) {
+            break;
+          }
+
+          message.paymentCount = longToNumber(reader.int64());
+          continue;
+        }
+        case 14: {
+          if (tag !== 112) {
+            break;
+          }
+
+          message.subscriptionCount = longToNumber(reader.int64());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminPlan {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      features: globalThis.Array.isArray(object?.features) ? object.features.map((e: any) => globalThis.String(e)) : [],
+      price: isSet(object.price) ? globalThis.Number(object.price) : 0,
+      cycle: isSet(object.cycle) ? globalThis.String(object.cycle) : "",
+      storageLimit: isSet(object.storageLimit)
+        ? globalThis.Number(object.storageLimit)
+        : isSet(object.storage_limit)
+        ? globalThis.Number(object.storage_limit)
+        : 0,
+      uploadLimit: isSet(object.uploadLimit)
+        ? globalThis.Number(object.uploadLimit)
+        : isSet(object.upload_limit)
+        ? globalThis.Number(object.upload_limit)
+        : 0,
+      durationLimit: isSet(object.durationLimit)
+        ? globalThis.Number(object.durationLimit)
+        : isSet(object.duration_limit)
+        ? globalThis.Number(object.duration_limit)
+        : 0,
+      qualityLimit: isSet(object.qualityLimit)
+        ? globalThis.String(object.qualityLimit)
+        : isSet(object.quality_limit)
+        ? globalThis.String(object.quality_limit)
+        : "",
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+      userCount: isSet(object.userCount)
+        ? globalThis.Number(object.userCount)
+        : isSet(object.user_count)
+        ? globalThis.Number(object.user_count)
+        : 0,
+      paymentCount: isSet(object.paymentCount)
+        ? globalThis.Number(object.paymentCount)
+        : isSet(object.payment_count)
+        ? globalThis.Number(object.payment_count)
+        : 0,
+      subscriptionCount: isSet(object.subscriptionCount)
+        ? globalThis.Number(object.subscriptionCount)
+        : isSet(object.subscription_count)
+        ? globalThis.Number(object.subscription_count)
+        : 0,
+    };
+  },
+
+  toJSON(message: AdminPlan): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.features?.length) {
+      obj.features = message.features;
+    }
+    if (message.price !== undefined && message.price !== 0) {
+      obj.price = message.price;
+    }
+    if (message.cycle !== undefined && message.cycle !== "") {
+      obj.cycle = message.cycle;
+    }
+    if (message.storageLimit !== undefined && message.storageLimit !== 0) {
+      obj.storageLimit = Math.round(message.storageLimit);
+    }
+    if (message.uploadLimit !== undefined && message.uploadLimit !== 0) {
+      obj.uploadLimit = Math.round(message.uploadLimit);
+    }
+    if (message.durationLimit !== undefined && message.durationLimit !== 0) {
+      obj.durationLimit = Math.round(message.durationLimit);
+    }
+    if (message.qualityLimit !== undefined && message.qualityLimit !== "") {
+      obj.qualityLimit = message.qualityLimit;
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    if (message.userCount !== undefined && message.userCount !== 0) {
+      obj.userCount = Math.round(message.userCount);
+    }
+    if (message.paymentCount !== undefined && message.paymentCount !== 0) {
+      obj.paymentCount = Math.round(message.paymentCount);
+    }
+    if (message.subscriptionCount !== undefined && message.subscriptionCount !== 0) {
+      obj.subscriptionCount = Math.round(message.subscriptionCount);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminPlan>, I>>(base?: I): AdminPlan {
+    return AdminPlan.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminPlan>, I>>(object: I): AdminPlan {
+    const message = createBaseAdminPlan();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.features = object.features?.map((e) => e) || [];
+    message.price = object.price ?? 0;
+    message.cycle = object.cycle ?? "";
+    message.storageLimit = object.storageLimit ?? 0;
+    message.uploadLimit = object.uploadLimit ?? 0;
+    message.durationLimit = object.durationLimit ?? 0;
+    message.qualityLimit = object.qualityLimit ?? "";
+    message.isActive = object.isActive ?? false;
+    message.userCount = object.userCount ?? 0;
+    message.paymentCount = object.paymentCount ?? 0;
+    message.subscriptionCount = object.subscriptionCount ?? 0;
+    return message;
+  },
+};
+
+function createBaseAdminAdTemplate(): AdminAdTemplate {
+  return {
+    id: "",
+    userId: "",
+    name: "",
+    description: undefined,
+    vastTagUrl: "",
+    adFormat: "",
+    duration: undefined,
+    isActive: false,
+    isDefault: false,
+    ownerEmail: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const AdminAdTemplate: MessageFns<AdminAdTemplate> = {
+  encode(message: AdminAdTemplate, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(26).string(message.name);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(34).string(message.description);
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      writer.uint32(42).string(message.vastTagUrl);
+    }
+    if (message.adFormat !== undefined && message.adFormat !== "") {
+      writer.uint32(50).string(message.adFormat);
+    }
+    if (message.duration !== undefined) {
+      writer.uint32(56).int64(message.duration);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(64).bool(message.isActive);
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      writer.uint32(72).bool(message.isDefault);
+    }
+    if (message.ownerEmail !== undefined) {
+      writer.uint32(82).string(message.ownerEmail);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(90).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(98).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminAdTemplate {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminAdTemplate();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.vastTagUrl = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.adFormat = reader.string();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.duration = longToNumber(reader.int64());
+          continue;
+        }
+        case 8: {
+          if (tag !== 64) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.isDefault = reader.bool();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.ownerEmail = reader.string();
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminAdTemplate {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      vastTagUrl: isSet(object.vastTagUrl)
+        ? globalThis.String(object.vastTagUrl)
+        : isSet(object.vast_tag_url)
+        ? globalThis.String(object.vast_tag_url)
+        : "",
+      adFormat: isSet(object.adFormat)
+        ? globalThis.String(object.adFormat)
+        : isSet(object.ad_format)
+        ? globalThis.String(object.ad_format)
+        : "",
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : undefined,
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+      isDefault: isSet(object.isDefault)
+        ? globalThis.Boolean(object.isDefault)
+        : isSet(object.is_default)
+        ? globalThis.Boolean(object.is_default)
+        : false,
+      ownerEmail: isSet(object.ownerEmail)
+        ? globalThis.String(object.ownerEmail)
+        : isSet(object.owner_email)
+        ? globalThis.String(object.owner_email)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminAdTemplate): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.vastTagUrl !== undefined && message.vastTagUrl !== "") {
+      obj.vastTagUrl = message.vastTagUrl;
+    }
+    if (message.adFormat !== undefined && message.adFormat !== "") {
+      obj.adFormat = message.adFormat;
+    }
+    if (message.duration !== undefined) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    if (message.isDefault !== undefined && message.isDefault !== false) {
+      obj.isDefault = message.isDefault;
+    }
+    if (message.ownerEmail !== undefined) {
+      obj.ownerEmail = message.ownerEmail;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminAdTemplate>, I>>(base?: I): AdminAdTemplate {
+    return AdminAdTemplate.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminAdTemplate>, I>>(object: I): AdminAdTemplate {
+    const message = createBaseAdminAdTemplate();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.name = object.name ?? "";
+    message.description = object.description ?? undefined;
+    message.vastTagUrl = object.vastTagUrl ?? "";
+    message.adFormat = object.adFormat ?? "";
+    message.duration = object.duration ?? undefined;
+    message.isActive = object.isActive ?? false;
+    message.isDefault = object.isDefault ?? false;
+    message.ownerEmail = object.ownerEmail ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminPopupAd(): AdminPopupAd {
+  return {
+    id: "",
+    userId: "",
+    type: "",
+    label: "",
+    value: "",
+    isActive: false,
+    maxTriggersPerSession: 0,
+    ownerEmail: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const AdminPopupAd: MessageFns<AdminPopupAd> = {
+  encode(message: AdminPopupAd, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(18).string(message.userId);
+    }
+    if (message.type !== undefined && message.type !== "") {
+      writer.uint32(26).string(message.type);
+    }
+    if (message.label !== undefined && message.label !== "") {
+      writer.uint32(34).string(message.label);
+    }
+    if (message.value !== undefined && message.value !== "") {
+      writer.uint32(42).string(message.value);
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      writer.uint32(48).bool(message.isActive);
+    }
+    if (message.maxTriggersPerSession !== undefined && message.maxTriggersPerSession !== 0) {
+      writer.uint32(56).int32(message.maxTriggersPerSession);
+    }
+    if (message.ownerEmail !== undefined) {
+      writer.uint32(66).string(message.ownerEmail);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(74).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(82).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminPopupAd {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminPopupAd();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.type = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.label = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.isActive = reader.bool();
+          continue;
+        }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.maxTriggersPerSession = reader.int32();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.ownerEmail = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 74) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminPopupAd {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      type: isSet(object.type) ? globalThis.String(object.type) : "",
+      label: isSet(object.label) ? globalThis.String(object.label) : "",
+      value: isSet(object.value) ? globalThis.String(object.value) : "",
+      isActive: isSet(object.isActive)
+        ? globalThis.Boolean(object.isActive)
+        : isSet(object.is_active)
+        ? globalThis.Boolean(object.is_active)
+        : false,
+      maxTriggersPerSession: isSet(object.maxTriggersPerSession)
+        ? globalThis.Number(object.maxTriggersPerSession)
+        : isSet(object.max_triggers_per_session)
+        ? globalThis.Number(object.max_triggers_per_session)
+        : 0,
+      ownerEmail: isSet(object.ownerEmail)
+        ? globalThis.String(object.ownerEmail)
+        : isSet(object.owner_email)
+        ? globalThis.String(object.owner_email)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminPopupAd): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.type !== undefined && message.type !== "") {
+      obj.type = message.type;
+    }
+    if (message.label !== undefined && message.label !== "") {
+      obj.label = message.label;
+    }
+    if (message.value !== undefined && message.value !== "") {
+      obj.value = message.value;
+    }
+    if (message.isActive !== undefined && message.isActive !== false) {
+      obj.isActive = message.isActive;
+    }
+    if (message.maxTriggersPerSession !== undefined && message.maxTriggersPerSession !== 0) {
+      obj.maxTriggersPerSession = Math.round(message.maxTriggersPerSession);
+    }
+    if (message.ownerEmail !== undefined) {
+      obj.ownerEmail = message.ownerEmail;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminPopupAd>, I>>(base?: I): AdminPopupAd {
+    return AdminPopupAd.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminPopupAd>, I>>(object: I): AdminPopupAd {
+    const message = createBaseAdminPopupAd();
+    message.id = object.id ?? "";
+    message.userId = object.userId ?? "";
+    message.type = object.type ?? "";
+    message.label = object.label ?? "";
+    message.value = object.value ?? "";
+    message.isActive = object.isActive ?? false;
+    message.maxTriggersPerSession = object.maxTriggersPerSession ?? 0;
+    message.ownerEmail = object.ownerEmail ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminJob(): AdminJob {
+  return {
+    id: "",
+    status: "",
+    priority: 0,
+    userId: "",
+    name: "",
+    timeLimit: 0,
+    inputUrl: "",
+    outputUrl: "",
+    totalDuration: 0,
+    currentTime: 0,
+    progress: 0,
+    agentId: undefined,
+    logs: "",
+    config: "",
+    cancelled: false,
+    retryCount: 0,
+    maxRetries: 0,
+    createdAt: undefined,
+    updatedAt: undefined,
+    videoId: undefined,
+  };
+}
+
+export const AdminJob: MessageFns<AdminJob> = {
+  encode(message: AdminJob, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(18).string(message.status);
+    }
+    if (message.priority !== undefined && message.priority !== 0) {
+      writer.uint32(24).int32(message.priority);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      writer.uint32(34).string(message.userId);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(42).string(message.name);
+    }
+    if (message.timeLimit !== undefined && message.timeLimit !== 0) {
+      writer.uint32(48).int64(message.timeLimit);
+    }
+    if (message.inputUrl !== undefined && message.inputUrl !== "") {
+      writer.uint32(58).string(message.inputUrl);
+    }
+    if (message.outputUrl !== undefined && message.outputUrl !== "") {
+      writer.uint32(66).string(message.outputUrl);
+    }
+    if (message.totalDuration !== undefined && message.totalDuration !== 0) {
+      writer.uint32(72).int64(message.totalDuration);
+    }
+    if (message.currentTime !== undefined && message.currentTime !== 0) {
+      writer.uint32(80).int64(message.currentTime);
+    }
+    if (message.progress !== undefined && message.progress !== 0) {
+      writer.uint32(89).double(message.progress);
+    }
+    if (message.agentId !== undefined) {
+      writer.uint32(98).string(message.agentId);
+    }
+    if (message.logs !== undefined && message.logs !== "") {
+      writer.uint32(106).string(message.logs);
+    }
+    if (message.config !== undefined && message.config !== "") {
+      writer.uint32(114).string(message.config);
+    }
+    if (message.cancelled !== undefined && message.cancelled !== false) {
+      writer.uint32(120).bool(message.cancelled);
+    }
+    if (message.retryCount !== undefined && message.retryCount !== 0) {
+      writer.uint32(128).int32(message.retryCount);
+    }
+    if (message.maxRetries !== undefined && message.maxRetries !== 0) {
+      writer.uint32(136).int32(message.maxRetries);
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(146).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(154).fork()).join();
+    }
+    if (message.videoId !== undefined) {
+      writer.uint32(162).string(message.videoId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminJob {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminJob();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.priority = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.userId = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.timeLimit = longToNumber(reader.int64());
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.inputUrl = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.outputUrl = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.totalDuration = longToNumber(reader.int64());
+          continue;
+        }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.currentTime = longToNumber(reader.int64());
+          continue;
+        }
+        case 11: {
+          if (tag !== 89) {
+            break;
+          }
+
+          message.progress = reader.double();
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.agentId = reader.string();
+          continue;
+        }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.logs = reader.string();
+          continue;
+        }
+        case 14: {
+          if (tag !== 114) {
+            break;
+          }
+
+          message.config = reader.string();
+          continue;
+        }
+        case 15: {
+          if (tag !== 120) {
+            break;
+          }
+
+          message.cancelled = reader.bool();
+          continue;
+        }
+        case 16: {
+          if (tag !== 128) {
+            break;
+          }
+
+          message.retryCount = reader.int32();
+          continue;
+        }
+        case 17: {
+          if (tag !== 136) {
+            break;
+          }
+
+          message.maxRetries = reader.int32();
+          continue;
+        }
+        case 18: {
+          if (tag !== 146) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 19: {
+          if (tag !== 154) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 20: {
+          if (tag !== 162) {
+            break;
+          }
+
+          message.videoId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminJob {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      priority: isSet(object.priority) ? globalThis.Number(object.priority) : 0,
+      userId: isSet(object.userId)
+        ? globalThis.String(object.userId)
+        : isSet(object.user_id)
+        ? globalThis.String(object.user_id)
+        : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      timeLimit: isSet(object.timeLimit)
+        ? globalThis.Number(object.timeLimit)
+        : isSet(object.time_limit)
+        ? globalThis.Number(object.time_limit)
+        : 0,
+      inputUrl: isSet(object.inputUrl)
+        ? globalThis.String(object.inputUrl)
+        : isSet(object.input_url)
+        ? globalThis.String(object.input_url)
+        : "",
+      outputUrl: isSet(object.outputUrl)
+        ? globalThis.String(object.outputUrl)
+        : isSet(object.output_url)
+        ? globalThis.String(object.output_url)
+        : "",
+      totalDuration: isSet(object.totalDuration)
+        ? globalThis.Number(object.totalDuration)
+        : isSet(object.total_duration)
+        ? globalThis.Number(object.total_duration)
+        : 0,
+      currentTime: isSet(object.currentTime)
+        ? globalThis.Number(object.currentTime)
+        : isSet(object.current_time)
+        ? globalThis.Number(object.current_time)
+        : 0,
+      progress: isSet(object.progress) ? globalThis.Number(object.progress) : 0,
+      agentId: isSet(object.agentId)
+        ? globalThis.String(object.agentId)
+        : isSet(object.agent_id)
+        ? globalThis.String(object.agent_id)
+        : undefined,
+      logs: isSet(object.logs) ? globalThis.String(object.logs) : "",
+      config: isSet(object.config) ? globalThis.String(object.config) : "",
+      cancelled: isSet(object.cancelled) ? globalThis.Boolean(object.cancelled) : false,
+      retryCount: isSet(object.retryCount)
+        ? globalThis.Number(object.retryCount)
+        : isSet(object.retry_count)
+        ? globalThis.Number(object.retry_count)
+        : 0,
+      maxRetries: isSet(object.maxRetries)
+        ? globalThis.Number(object.maxRetries)
+        : isSet(object.max_retries)
+        ? globalThis.Number(object.max_retries)
+        : 0,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+      videoId: isSet(object.videoId)
+        ? globalThis.String(object.videoId)
+        : isSet(object.video_id)
+        ? globalThis.String(object.video_id)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminJob): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.priority !== undefined && message.priority !== 0) {
+      obj.priority = Math.round(message.priority);
+    }
+    if (message.userId !== undefined && message.userId !== "") {
+      obj.userId = message.userId;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.timeLimit !== undefined && message.timeLimit !== 0) {
+      obj.timeLimit = Math.round(message.timeLimit);
+    }
+    if (message.inputUrl !== undefined && message.inputUrl !== "") {
+      obj.inputUrl = message.inputUrl;
+    }
+    if (message.outputUrl !== undefined && message.outputUrl !== "") {
+      obj.outputUrl = message.outputUrl;
+    }
+    if (message.totalDuration !== undefined && message.totalDuration !== 0) {
+      obj.totalDuration = Math.round(message.totalDuration);
+    }
+    if (message.currentTime !== undefined && message.currentTime !== 0) {
+      obj.currentTime = Math.round(message.currentTime);
+    }
+    if (message.progress !== undefined && message.progress !== 0) {
+      obj.progress = message.progress;
+    }
+    if (message.agentId !== undefined) {
+      obj.agentId = message.agentId;
+    }
+    if (message.logs !== undefined && message.logs !== "") {
+      obj.logs = message.logs;
+    }
+    if (message.config !== undefined && message.config !== "") {
+      obj.config = message.config;
+    }
+    if (message.cancelled !== undefined && message.cancelled !== false) {
+      obj.cancelled = message.cancelled;
+    }
+    if (message.retryCount !== undefined && message.retryCount !== 0) {
+      obj.retryCount = Math.round(message.retryCount);
+    }
+    if (message.maxRetries !== undefined && message.maxRetries !== 0) {
+      obj.maxRetries = Math.round(message.maxRetries);
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    if (message.videoId !== undefined) {
+      obj.videoId = message.videoId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminJob>, I>>(base?: I): AdminJob {
+    return AdminJob.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminJob>, I>>(object: I): AdminJob {
+    const message = createBaseAdminJob();
+    message.id = object.id ?? "";
+    message.status = object.status ?? "";
+    message.priority = object.priority ?? 0;
+    message.userId = object.userId ?? "";
+    message.name = object.name ?? "";
+    message.timeLimit = object.timeLimit ?? 0;
+    message.inputUrl = object.inputUrl ?? "";
+    message.outputUrl = object.outputUrl ?? "";
+    message.totalDuration = object.totalDuration ?? 0;
+    message.currentTime = object.currentTime ?? 0;
+    message.progress = object.progress ?? 0;
+    message.agentId = object.agentId ?? undefined;
+    message.logs = object.logs ?? "";
+    message.config = object.config ?? "";
+    message.cancelled = object.cancelled ?? false;
+    message.retryCount = object.retryCount ?? 0;
+    message.maxRetries = object.maxRetries ?? 0;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    message.videoId = object.videoId ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminAgent(): AdminAgent {
+  return {
+    id: "",
+    name: "",
+    platform: "",
+    backend: "",
+    version: "",
+    capacity: 0,
+    status: "",
+    cpu: 0,
+    ram: 0,
+    lastHeartbeat: undefined,
+    createdAt: undefined,
+    updatedAt: undefined,
+  };
+}
+
+export const AdminAgent: MessageFns<AdminAgent> = {
+  encode(message: AdminAgent, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.name !== undefined && message.name !== "") {
+      writer.uint32(18).string(message.name);
+    }
+    if (message.platform !== undefined && message.platform !== "") {
+      writer.uint32(26).string(message.platform);
+    }
+    if (message.backend !== undefined && message.backend !== "") {
+      writer.uint32(34).string(message.backend);
+    }
+    if (message.version !== undefined && message.version !== "") {
+      writer.uint32(42).string(message.version);
+    }
+    if (message.capacity !== undefined && message.capacity !== 0) {
+      writer.uint32(48).int32(message.capacity);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      writer.uint32(58).string(message.status);
+    }
+    if (message.cpu !== undefined && message.cpu !== 0) {
+      writer.uint32(65).double(message.cpu);
+    }
+    if (message.ram !== undefined && message.ram !== 0) {
+      writer.uint32(73).double(message.ram);
+    }
+    if (message.lastHeartbeat !== undefined) {
+      Timestamp.encode(toTimestamp(message.lastHeartbeat), writer.uint32(82).fork()).join();
+    }
+    if (message.createdAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.createdAt), writer.uint32(90).fork()).join();
+    }
+    if (message.updatedAt !== undefined) {
+      Timestamp.encode(toTimestamp(message.updatedAt), writer.uint32(98).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminAgent {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminAgent();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.name = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.platform = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.backend = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.version = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.capacity = reader.int32();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 65) {
+            break;
+          }
+
+          message.cpu = reader.double();
+          continue;
+        }
+        case 9: {
+          if (tag !== 73) {
+            break;
+          }
+
+          message.ram = reader.double();
+          continue;
+        }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.lastHeartbeat = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.createdAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.updatedAt = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminAgent {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      name: isSet(object.name) ? globalThis.String(object.name) : "",
+      platform: isSet(object.platform) ? globalThis.String(object.platform) : "",
+      backend: isSet(object.backend) ? globalThis.String(object.backend) : "",
+      version: isSet(object.version) ? globalThis.String(object.version) : "",
+      capacity: isSet(object.capacity) ? globalThis.Number(object.capacity) : 0,
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      cpu: isSet(object.cpu) ? globalThis.Number(object.cpu) : 0,
+      ram: isSet(object.ram) ? globalThis.Number(object.ram) : 0,
+      lastHeartbeat: isSet(object.lastHeartbeat)
+        ? globalThis.String(object.lastHeartbeat)
+        : isSet(object.last_heartbeat)
+        ? globalThis.String(object.last_heartbeat)
+        : undefined,
+      createdAt: isSet(object.createdAt)
+        ? globalThis.String(object.createdAt)
+        : isSet(object.created_at)
+        ? globalThis.String(object.created_at)
+        : undefined,
+      updatedAt: isSet(object.updatedAt)
+        ? globalThis.String(object.updatedAt)
+        : isSet(object.updated_at)
+        ? globalThis.String(object.updated_at)
+        : undefined,
+    };
+  },
+
+  toJSON(message: AdminAgent): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.name !== undefined && message.name !== "") {
+      obj.name = message.name;
+    }
+    if (message.platform !== undefined && message.platform !== "") {
+      obj.platform = message.platform;
+    }
+    if (message.backend !== undefined && message.backend !== "") {
+      obj.backend = message.backend;
+    }
+    if (message.version !== undefined && message.version !== "") {
+      obj.version = message.version;
+    }
+    if (message.capacity !== undefined && message.capacity !== 0) {
+      obj.capacity = Math.round(message.capacity);
+    }
+    if (message.status !== undefined && message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.cpu !== undefined && message.cpu !== 0) {
+      obj.cpu = message.cpu;
+    }
+    if (message.ram !== undefined && message.ram !== 0) {
+      obj.ram = message.ram;
+    }
+    if (message.lastHeartbeat !== undefined) {
+      obj.lastHeartbeat = message.lastHeartbeat;
+    }
+    if (message.createdAt !== undefined) {
+      obj.createdAt = message.createdAt;
+    }
+    if (message.updatedAt !== undefined) {
+      obj.updatedAt = message.updatedAt;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminAgent>, I>>(base?: I): AdminAgent {
+    return AdminAgent.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminAgent>, I>>(object: I): AdminAgent {
+    const message = createBaseAdminAgent();
+    message.id = object.id ?? "";
+    message.name = object.name ?? "";
+    message.platform = object.platform ?? "";
+    message.backend = object.backend ?? "";
+    message.version = object.version ?? "";
+    message.capacity = object.capacity ?? 0;
+    message.status = object.status ?? "";
+    message.cpu = object.cpu ?? 0;
+    message.ram = object.ram ?? 0;
+    message.lastHeartbeat = object.lastHeartbeat ?? undefined;
+    message.createdAt = object.createdAt ?? undefined;
+    message.updatedAt = object.updatedAt ?? undefined;
+    return message;
+  },
+};
+
+function createBaseAdminDlqEntry(): AdminDlqEntry {
+  return { job: undefined, failureTime: undefined, reason: "", retryCount: 0 };
+}
+
+export const AdminDlqEntry: MessageFns<AdminDlqEntry> = {
+  encode(message: AdminDlqEntry, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.job !== undefined) {
+      AdminJob.encode(message.job, writer.uint32(10).fork()).join();
+    }
+    if (message.failureTime !== undefined) {
+      Timestamp.encode(toTimestamp(message.failureTime), writer.uint32(18).fork()).join();
+    }
+    if (message.reason !== undefined && message.reason !== "") {
+      writer.uint32(26).string(message.reason);
+    }
+    if (message.retryCount !== undefined && message.retryCount !== 0) {
+      writer.uint32(32).int32(message.retryCount);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AdminDlqEntry {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAdminDlqEntry();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.job = AdminJob.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.failureTime = fromTimestamp(Timestamp.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.reason = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.retryCount = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AdminDlqEntry {
+    return {
+      job: isSet(object.job) ? AdminJob.fromJSON(object.job) : undefined,
+      failureTime: isSet(object.failureTime)
+        ? globalThis.String(object.failureTime)
+        : isSet(object.failure_time)
+        ? globalThis.String(object.failure_time)
+        : undefined,
+      reason: isSet(object.reason) ? globalThis.String(object.reason) : "",
+      retryCount: isSet(object.retryCount)
+        ? globalThis.Number(object.retryCount)
+        : isSet(object.retry_count)
+        ? globalThis.Number(object.retry_count)
+        : 0,
+    };
+  },
+
+  toJSON(message: AdminDlqEntry): unknown {
+    const obj: any = {};
+    if (message.job !== undefined) {
+      obj.job = AdminJob.toJSON(message.job);
+    }
+    if (message.failureTime !== undefined) {
+      obj.failureTime = message.failureTime;
+    }
+    if (message.reason !== undefined && message.reason !== "") {
+      obj.reason = message.reason;
+    }
+    if (message.retryCount !== undefined && message.retryCount !== 0) {
+      obj.retryCount = Math.round(message.retryCount);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AdminDlqEntry>, I>>(base?: I): AdminDlqEntry {
+    return AdminDlqEntry.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AdminDlqEntry>, I>>(object: I): AdminDlqEntry {
+    const message = createBaseAdminDlqEntry();
+    message.job = (object.job !== undefined && object.job !== null) ? AdminJob.fromPartial(object.job) : undefined;
+    message.failureTime = object.failureTime ?? undefined;
+    message.reason = object.reason ?? "";
+    message.retryCount = object.retryCount ?? 0;
+    return message;
+  },
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function toTimestamp(dateStr: string): Timestamp {
+  const date = new globalThis.Date(dateStr);
+  const seconds = Math.trunc(date.getTime() / 1_000);
+  const nanos = (date.getTime() % 1_000) * 1_000_000;
+  return { seconds, nanos };
+}
+
+function fromTimestamp(t: Timestamp): string {
+  let millis = (t.seconds || 0) * 1_000;
+  millis += (t.nanos || 0) / 1_000_000;
+  return new globalThis.Date(millis).toISOString();
+}
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/payments.ts b/src/server/api/proto/app/v1/payments.ts
new file mode 100644
index 0000000..23d85f2
--- /dev/null
+++ b/src/server/api/proto/app/v1/payments.ts
@@ -0,0 +1,1038 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/payments.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientUnaryCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+import { Payment, PaymentHistoryItem, PlanSubscription, WalletTransaction } from "./common";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface CreatePaymentRequest {
+  planId?: string | undefined;
+  termMonths?: number | undefined;
+  paymentMethod?: string | undefined;
+  topupAmount?: number | undefined;
+}
+
+export interface CreatePaymentResponse {
+  payment?: Payment | undefined;
+  subscription?: PlanSubscription | undefined;
+  walletBalance?: number | undefined;
+  invoiceId?: string | undefined;
+  message?: string | undefined;
+}
+
+export interface ListPaymentHistoryRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface ListPaymentHistoryResponse {
+  payments?: PaymentHistoryItem[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+  hasPrev?: boolean | undefined;
+  hasNext?: boolean | undefined;
+}
+
+export interface TopupWalletRequest {
+  amount?: number | undefined;
+}
+
+export interface TopupWalletResponse {
+  walletTransaction?: WalletTransaction | undefined;
+  walletBalance?: number | undefined;
+  invoiceId?: string | undefined;
+}
+
+export interface DownloadInvoiceRequest {
+  id?: string | undefined;
+}
+
+export interface DownloadInvoiceResponse {
+  filename?: string | undefined;
+  contentType?: string | undefined;
+  content?: string | undefined;
+}
+
+function createBaseCreatePaymentRequest(): CreatePaymentRequest {
+  return { planId: "", termMonths: 0, paymentMethod: "", topupAmount: undefined };
+}
+
+export const CreatePaymentRequest: MessageFns<CreatePaymentRequest> = {
+  encode(message: CreatePaymentRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.planId !== undefined && message.planId !== "") {
+      writer.uint32(10).string(message.planId);
+    }
+    if (message.termMonths !== undefined && message.termMonths !== 0) {
+      writer.uint32(16).int32(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined && message.paymentMethod !== "") {
+      writer.uint32(26).string(message.paymentMethod);
+    }
+    if (message.topupAmount !== undefined) {
+      writer.uint32(33).double(message.topupAmount);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreatePaymentRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreatePaymentRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.planId = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.termMonths = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.paymentMethod = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 33) {
+            break;
+          }
+
+          message.topupAmount = reader.double();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreatePaymentRequest {
+    return {
+      planId: isSet(object.planId)
+        ? globalThis.String(object.planId)
+        : isSet(object.plan_id)
+        ? globalThis.String(object.plan_id)
+        : "",
+      termMonths: isSet(object.termMonths)
+        ? globalThis.Number(object.termMonths)
+        : isSet(object.term_months)
+        ? globalThis.Number(object.term_months)
+        : 0,
+      paymentMethod: isSet(object.paymentMethod)
+        ? globalThis.String(object.paymentMethod)
+        : isSet(object.payment_method)
+        ? globalThis.String(object.payment_method)
+        : "",
+      topupAmount: isSet(object.topupAmount)
+        ? globalThis.Number(object.topupAmount)
+        : isSet(object.topup_amount)
+        ? globalThis.Number(object.topup_amount)
+        : undefined,
+    };
+  },
+
+  toJSON(message: CreatePaymentRequest): unknown {
+    const obj: any = {};
+    if (message.planId !== undefined && message.planId !== "") {
+      obj.planId = message.planId;
+    }
+    if (message.termMonths !== undefined && message.termMonths !== 0) {
+      obj.termMonths = Math.round(message.termMonths);
+    }
+    if (message.paymentMethod !== undefined && message.paymentMethod !== "") {
+      obj.paymentMethod = message.paymentMethod;
+    }
+    if (message.topupAmount !== undefined) {
+      obj.topupAmount = message.topupAmount;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreatePaymentRequest>, I>>(base?: I): CreatePaymentRequest {
+    return CreatePaymentRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreatePaymentRequest>, I>>(object: I): CreatePaymentRequest {
+    const message = createBaseCreatePaymentRequest();
+    message.planId = object.planId ?? "";
+    message.termMonths = object.termMonths ?? 0;
+    message.paymentMethod = object.paymentMethod ?? "";
+    message.topupAmount = object.topupAmount ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreatePaymentResponse(): CreatePaymentResponse {
+  return { payment: undefined, subscription: undefined, walletBalance: 0, invoiceId: "", message: "" };
+}
+
+export const CreatePaymentResponse: MessageFns<CreatePaymentResponse> = {
+  encode(message: CreatePaymentResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.payment !== undefined) {
+      Payment.encode(message.payment, writer.uint32(10).fork()).join();
+    }
+    if (message.subscription !== undefined) {
+      PlanSubscription.encode(message.subscription, writer.uint32(18).fork()).join();
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      writer.uint32(25).double(message.walletBalance);
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      writer.uint32(34).string(message.invoiceId);
+    }
+    if (message.message !== undefined && message.message !== "") {
+      writer.uint32(42).string(message.message);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreatePaymentResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreatePaymentResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.payment = Payment.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.subscription = PlanSubscription.decode(reader, reader.uint32());
+          continue;
+        }
+        case 3: {
+          if (tag !== 25) {
+            break;
+          }
+
+          message.walletBalance = reader.double();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.invoiceId = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreatePaymentResponse {
+    return {
+      payment: isSet(object.payment) ? Payment.fromJSON(object.payment) : undefined,
+      subscription: isSet(object.subscription) ? PlanSubscription.fromJSON(object.subscription) : undefined,
+      walletBalance: isSet(object.walletBalance)
+        ? globalThis.Number(object.walletBalance)
+        : isSet(object.wallet_balance)
+        ? globalThis.Number(object.wallet_balance)
+        : 0,
+      invoiceId: isSet(object.invoiceId)
+        ? globalThis.String(object.invoiceId)
+        : isSet(object.invoice_id)
+        ? globalThis.String(object.invoice_id)
+        : "",
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+    };
+  },
+
+  toJSON(message: CreatePaymentResponse): unknown {
+    const obj: any = {};
+    if (message.payment !== undefined) {
+      obj.payment = Payment.toJSON(message.payment);
+    }
+    if (message.subscription !== undefined) {
+      obj.subscription = PlanSubscription.toJSON(message.subscription);
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      obj.walletBalance = message.walletBalance;
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      obj.invoiceId = message.invoiceId;
+    }
+    if (message.message !== undefined && message.message !== "") {
+      obj.message = message.message;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreatePaymentResponse>, I>>(base?: I): CreatePaymentResponse {
+    return CreatePaymentResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreatePaymentResponse>, I>>(object: I): CreatePaymentResponse {
+    const message = createBaseCreatePaymentResponse();
+    message.payment = (object.payment !== undefined && object.payment !== null)
+      ? Payment.fromPartial(object.payment)
+      : undefined;
+    message.subscription = (object.subscription !== undefined && object.subscription !== null)
+      ? PlanSubscription.fromPartial(object.subscription)
+      : undefined;
+    message.walletBalance = object.walletBalance ?? 0;
+    message.invoiceId = object.invoiceId ?? "";
+    message.message = object.message ?? "";
+    return message;
+  },
+};
+
+function createBaseListPaymentHistoryRequest(): ListPaymentHistoryRequest {
+  return { page: 0, limit: 0 };
+}
+
+export const ListPaymentHistoryRequest: MessageFns<ListPaymentHistoryRequest> = {
+  encode(message: ListPaymentHistoryRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPaymentHistoryRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPaymentHistoryRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListPaymentHistoryRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListPaymentHistoryRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPaymentHistoryRequest>, I>>(base?: I): ListPaymentHistoryRequest {
+    return ListPaymentHistoryRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPaymentHistoryRequest>, I>>(object: I): ListPaymentHistoryRequest {
+    const message = createBaseListPaymentHistoryRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseListPaymentHistoryResponse(): ListPaymentHistoryResponse {
+  return { payments: [], total: 0, page: 0, limit: 0, hasPrev: false, hasNext: false };
+}
+
+export const ListPaymentHistoryResponse: MessageFns<ListPaymentHistoryResponse> = {
+  encode(message: ListPaymentHistoryResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.payments !== undefined && message.payments.length !== 0) {
+      for (const v of message.payments) {
+        PaymentHistoryItem.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    if (message.hasPrev !== undefined && message.hasPrev !== false) {
+      writer.uint32(40).bool(message.hasPrev);
+    }
+    if (message.hasNext !== undefined && message.hasNext !== false) {
+      writer.uint32(48).bool(message.hasNext);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListPaymentHistoryResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListPaymentHistoryResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = PaymentHistoryItem.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.payments!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.hasPrev = reader.bool();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.hasNext = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListPaymentHistoryResponse {
+    return {
+      payments: globalThis.Array.isArray(object?.payments)
+        ? object.payments.map((e: any) => PaymentHistoryItem.fromJSON(e))
+        : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      hasPrev: isSet(object.hasPrev)
+        ? globalThis.Boolean(object.hasPrev)
+        : isSet(object.has_prev)
+        ? globalThis.Boolean(object.has_prev)
+        : false,
+      hasNext: isSet(object.hasNext)
+        ? globalThis.Boolean(object.hasNext)
+        : isSet(object.has_next)
+        ? globalThis.Boolean(object.has_next)
+        : false,
+    };
+  },
+
+  toJSON(message: ListPaymentHistoryResponse): unknown {
+    const obj: any = {};
+    if (message.payments?.length) {
+      obj.payments = message.payments.map((e) => PaymentHistoryItem.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.hasPrev !== undefined && message.hasPrev !== false) {
+      obj.hasPrev = message.hasPrev;
+    }
+    if (message.hasNext !== undefined && message.hasNext !== false) {
+      obj.hasNext = message.hasNext;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListPaymentHistoryResponse>, I>>(base?: I): ListPaymentHistoryResponse {
+    return ListPaymentHistoryResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListPaymentHistoryResponse>, I>>(object: I): ListPaymentHistoryResponse {
+    const message = createBaseListPaymentHistoryResponse();
+    message.payments = object.payments?.map((e) => PaymentHistoryItem.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.hasPrev = object.hasPrev ?? false;
+    message.hasNext = object.hasNext ?? false;
+    return message;
+  },
+};
+
+function createBaseTopupWalletRequest(): TopupWalletRequest {
+  return { amount: 0 };
+}
+
+export const TopupWalletRequest: MessageFns<TopupWalletRequest> = {
+  encode(message: TopupWalletRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.amount !== undefined && message.amount !== 0) {
+      writer.uint32(9).double(message.amount);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): TopupWalletRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseTopupWalletRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 9) {
+            break;
+          }
+
+          message.amount = reader.double();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): TopupWalletRequest {
+    return { amount: isSet(object.amount) ? globalThis.Number(object.amount) : 0 };
+  },
+
+  toJSON(message: TopupWalletRequest): unknown {
+    const obj: any = {};
+    if (message.amount !== undefined && message.amount !== 0) {
+      obj.amount = message.amount;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<TopupWalletRequest>, I>>(base?: I): TopupWalletRequest {
+    return TopupWalletRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<TopupWalletRequest>, I>>(object: I): TopupWalletRequest {
+    const message = createBaseTopupWalletRequest();
+    message.amount = object.amount ?? 0;
+    return message;
+  },
+};
+
+function createBaseTopupWalletResponse(): TopupWalletResponse {
+  return { walletTransaction: undefined, walletBalance: 0, invoiceId: "" };
+}
+
+export const TopupWalletResponse: MessageFns<TopupWalletResponse> = {
+  encode(message: TopupWalletResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.walletTransaction !== undefined) {
+      WalletTransaction.encode(message.walletTransaction, writer.uint32(10).fork()).join();
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      writer.uint32(17).double(message.walletBalance);
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      writer.uint32(26).string(message.invoiceId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): TopupWalletResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseTopupWalletResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.walletTransaction = WalletTransaction.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 17) {
+            break;
+          }
+
+          message.walletBalance = reader.double();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.invoiceId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): TopupWalletResponse {
+    return {
+      walletTransaction: isSet(object.walletTransaction)
+        ? WalletTransaction.fromJSON(object.walletTransaction)
+        : isSet(object.wallet_transaction)
+        ? WalletTransaction.fromJSON(object.wallet_transaction)
+        : undefined,
+      walletBalance: isSet(object.walletBalance)
+        ? globalThis.Number(object.walletBalance)
+        : isSet(object.wallet_balance)
+        ? globalThis.Number(object.wallet_balance)
+        : 0,
+      invoiceId: isSet(object.invoiceId)
+        ? globalThis.String(object.invoiceId)
+        : isSet(object.invoice_id)
+        ? globalThis.String(object.invoice_id)
+        : "",
+    };
+  },
+
+  toJSON(message: TopupWalletResponse): unknown {
+    const obj: any = {};
+    if (message.walletTransaction !== undefined) {
+      obj.walletTransaction = WalletTransaction.toJSON(message.walletTransaction);
+    }
+    if (message.walletBalance !== undefined && message.walletBalance !== 0) {
+      obj.walletBalance = message.walletBalance;
+    }
+    if (message.invoiceId !== undefined && message.invoiceId !== "") {
+      obj.invoiceId = message.invoiceId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<TopupWalletResponse>, I>>(base?: I): TopupWalletResponse {
+    return TopupWalletResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<TopupWalletResponse>, I>>(object: I): TopupWalletResponse {
+    const message = createBaseTopupWalletResponse();
+    message.walletTransaction = (object.walletTransaction !== undefined && object.walletTransaction !== null)
+      ? WalletTransaction.fromPartial(object.walletTransaction)
+      : undefined;
+    message.walletBalance = object.walletBalance ?? 0;
+    message.invoiceId = object.invoiceId ?? "";
+    return message;
+  },
+};
+
+function createBaseDownloadInvoiceRequest(): DownloadInvoiceRequest {
+  return { id: "" };
+}
+
+export const DownloadInvoiceRequest: MessageFns<DownloadInvoiceRequest> = {
+  encode(message: DownloadInvoiceRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DownloadInvoiceRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDownloadInvoiceRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DownloadInvoiceRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DownloadInvoiceRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DownloadInvoiceRequest>, I>>(base?: I): DownloadInvoiceRequest {
+    return DownloadInvoiceRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DownloadInvoiceRequest>, I>>(object: I): DownloadInvoiceRequest {
+    const message = createBaseDownloadInvoiceRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseDownloadInvoiceResponse(): DownloadInvoiceResponse {
+  return { filename: "", contentType: "", content: "" };
+}
+
+export const DownloadInvoiceResponse: MessageFns<DownloadInvoiceResponse> = {
+  encode(message: DownloadInvoiceResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.filename !== undefined && message.filename !== "") {
+      writer.uint32(10).string(message.filename);
+    }
+    if (message.contentType !== undefined && message.contentType !== "") {
+      writer.uint32(18).string(message.contentType);
+    }
+    if (message.content !== undefined && message.content !== "") {
+      writer.uint32(26).string(message.content);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DownloadInvoiceResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDownloadInvoiceResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.filename = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.contentType = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.content = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DownloadInvoiceResponse {
+    return {
+      filename: isSet(object.filename) ? globalThis.String(object.filename) : "",
+      contentType: isSet(object.contentType)
+        ? globalThis.String(object.contentType)
+        : isSet(object.content_type)
+        ? globalThis.String(object.content_type)
+        : "",
+      content: isSet(object.content) ? globalThis.String(object.content) : "",
+    };
+  },
+
+  toJSON(message: DownloadInvoiceResponse): unknown {
+    const obj: any = {};
+    if (message.filename !== undefined && message.filename !== "") {
+      obj.filename = message.filename;
+    }
+    if (message.contentType !== undefined && message.contentType !== "") {
+      obj.contentType = message.contentType;
+    }
+    if (message.content !== undefined && message.content !== "") {
+      obj.content = message.content;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DownloadInvoiceResponse>, I>>(base?: I): DownloadInvoiceResponse {
+    return DownloadInvoiceResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DownloadInvoiceResponse>, I>>(object: I): DownloadInvoiceResponse {
+    const message = createBaseDownloadInvoiceResponse();
+    message.filename = object.filename ?? "";
+    message.contentType = object.contentType ?? "";
+    message.content = object.content ?? "";
+    return message;
+  },
+};
+
+export type PaymentsService = typeof PaymentsService;
+export const PaymentsService = {
+  createPayment: {
+    path: "/stream.app.v1.Payments/CreatePayment",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreatePaymentRequest): Buffer => Buffer.from(CreatePaymentRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreatePaymentRequest => CreatePaymentRequest.decode(value),
+    responseSerialize: (value: CreatePaymentResponse): Buffer =>
+      Buffer.from(CreatePaymentResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreatePaymentResponse => CreatePaymentResponse.decode(value),
+  },
+  listPaymentHistory: {
+    path: "/stream.app.v1.Payments/ListPaymentHistory",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListPaymentHistoryRequest): Buffer =>
+      Buffer.from(ListPaymentHistoryRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListPaymentHistoryRequest => ListPaymentHistoryRequest.decode(value),
+    responseSerialize: (value: ListPaymentHistoryResponse): Buffer =>
+      Buffer.from(ListPaymentHistoryResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListPaymentHistoryResponse => ListPaymentHistoryResponse.decode(value),
+  },
+  topupWallet: {
+    path: "/stream.app.v1.Payments/TopupWallet",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: TopupWalletRequest): Buffer => Buffer.from(TopupWalletRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): TopupWalletRequest => TopupWalletRequest.decode(value),
+    responseSerialize: (value: TopupWalletResponse): Buffer => Buffer.from(TopupWalletResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): TopupWalletResponse => TopupWalletResponse.decode(value),
+  },
+  downloadInvoice: {
+    path: "/stream.app.v1.Payments/DownloadInvoice",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DownloadInvoiceRequest): Buffer =>
+      Buffer.from(DownloadInvoiceRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DownloadInvoiceRequest => DownloadInvoiceRequest.decode(value),
+    responseSerialize: (value: DownloadInvoiceResponse): Buffer =>
+      Buffer.from(DownloadInvoiceResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): DownloadInvoiceResponse => DownloadInvoiceResponse.decode(value),
+  },
+} as const;
+
+export interface PaymentsServer extends UntypedServiceImplementation {
+  createPayment: handleUnaryCall<CreatePaymentRequest, CreatePaymentResponse>;
+  listPaymentHistory: handleUnaryCall<ListPaymentHistoryRequest, ListPaymentHistoryResponse>;
+  topupWallet: handleUnaryCall<TopupWalletRequest, TopupWalletResponse>;
+  downloadInvoice: handleUnaryCall<DownloadInvoiceRequest, DownloadInvoiceResponse>;
+}
+
+export interface PaymentsClient extends Client {
+  createPayment(
+    request: CreatePaymentRequest,
+    callback: (error: ServiceError | null, response: CreatePaymentResponse) => void,
+  ): ClientUnaryCall;
+  createPayment(
+    request: CreatePaymentRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreatePaymentResponse) => void,
+  ): ClientUnaryCall;
+  createPayment(
+    request: CreatePaymentRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreatePaymentResponse) => void,
+  ): ClientUnaryCall;
+  listPaymentHistory(
+    request: ListPaymentHistoryRequest,
+    callback: (error: ServiceError | null, response: ListPaymentHistoryResponse) => void,
+  ): ClientUnaryCall;
+  listPaymentHistory(
+    request: ListPaymentHistoryRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListPaymentHistoryResponse) => void,
+  ): ClientUnaryCall;
+  listPaymentHistory(
+    request: ListPaymentHistoryRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListPaymentHistoryResponse) => void,
+  ): ClientUnaryCall;
+  topupWallet(
+    request: TopupWalletRequest,
+    callback: (error: ServiceError | null, response: TopupWalletResponse) => void,
+  ): ClientUnaryCall;
+  topupWallet(
+    request: TopupWalletRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: TopupWalletResponse) => void,
+  ): ClientUnaryCall;
+  topupWallet(
+    request: TopupWalletRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: TopupWalletResponse) => void,
+  ): ClientUnaryCall;
+  downloadInvoice(
+    request: DownloadInvoiceRequest,
+    callback: (error: ServiceError | null, response: DownloadInvoiceResponse) => void,
+  ): ClientUnaryCall;
+  downloadInvoice(
+    request: DownloadInvoiceRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: DownloadInvoiceResponse) => void,
+  ): ClientUnaryCall;
+  downloadInvoice(
+    request: DownloadInvoiceRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: DownloadInvoiceResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const PaymentsClient = makeGenericClientConstructor(PaymentsService, "stream.app.v1.Payments") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): PaymentsClient;
+  service: typeof PaymentsService;
+  serviceName: string;
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/video_metadata.ts b/src/server/api/proto/app/v1/video_metadata.ts
new file mode 100644
index 0000000..269de4b
--- /dev/null
+++ b/src/server/api/proto/app/v1/video_metadata.ts
@@ -0,0 +1,323 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/video_metadata.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientUnaryCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+import { AdTemplate, Domain, PlayerConfig, PopupAd, Video } from "./common";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface GetVideoMetadataRequest {
+  videoId?: string | undefined;
+}
+
+export interface GetVideoMetadataResponse {
+  video?: Video | undefined;
+  defaultPlayerConfig?: PlayerConfig | undefined;
+  adTemplate?: AdTemplate | undefined;
+  activePopupAd?: PopupAd | undefined;
+  domains?: Domain[] | undefined;
+}
+
+function createBaseGetVideoMetadataRequest(): GetVideoMetadataRequest {
+  return { videoId: "" };
+}
+
+export const GetVideoMetadataRequest: MessageFns<GetVideoMetadataRequest> = {
+  encode(message: GetVideoMetadataRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.videoId !== undefined && message.videoId !== "") {
+      writer.uint32(10).string(message.videoId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetVideoMetadataRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetVideoMetadataRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.videoId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetVideoMetadataRequest {
+    return {
+      videoId: isSet(object.videoId)
+        ? globalThis.String(object.videoId)
+        : isSet(object.video_id)
+        ? globalThis.String(object.video_id)
+        : "",
+    };
+  },
+
+  toJSON(message: GetVideoMetadataRequest): unknown {
+    const obj: any = {};
+    if (message.videoId !== undefined && message.videoId !== "") {
+      obj.videoId = message.videoId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetVideoMetadataRequest>, I>>(base?: I): GetVideoMetadataRequest {
+    return GetVideoMetadataRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetVideoMetadataRequest>, I>>(object: I): GetVideoMetadataRequest {
+    const message = createBaseGetVideoMetadataRequest();
+    message.videoId = object.videoId ?? "";
+    return message;
+  },
+};
+
+function createBaseGetVideoMetadataResponse(): GetVideoMetadataResponse {
+  return {
+    video: undefined,
+    defaultPlayerConfig: undefined,
+    adTemplate: undefined,
+    activePopupAd: undefined,
+    domains: [],
+  };
+}
+
+export const GetVideoMetadataResponse: MessageFns<GetVideoMetadataResponse> = {
+  encode(message: GetVideoMetadataResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.video !== undefined) {
+      Video.encode(message.video, writer.uint32(10).fork()).join();
+    }
+    if (message.defaultPlayerConfig !== undefined) {
+      PlayerConfig.encode(message.defaultPlayerConfig, writer.uint32(18).fork()).join();
+    }
+    if (message.adTemplate !== undefined) {
+      AdTemplate.encode(message.adTemplate, writer.uint32(26).fork()).join();
+    }
+    if (message.activePopupAd !== undefined) {
+      PopupAd.encode(message.activePopupAd, writer.uint32(34).fork()).join();
+    }
+    if (message.domains !== undefined && message.domains.length !== 0) {
+      for (const v of message.domains) {
+        Domain.encode(v!, writer.uint32(42).fork()).join();
+      }
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetVideoMetadataResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetVideoMetadataResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.video = Video.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.defaultPlayerConfig = PlayerConfig.decode(reader, reader.uint32());
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.adTemplate = AdTemplate.decode(reader, reader.uint32());
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.activePopupAd = PopupAd.decode(reader, reader.uint32());
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          const el = Domain.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.domains!.push(el);
+          }
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetVideoMetadataResponse {
+    return {
+      video: isSet(object.video) ? Video.fromJSON(object.video) : undefined,
+      defaultPlayerConfig: isSet(object.defaultPlayerConfig)
+        ? PlayerConfig.fromJSON(object.defaultPlayerConfig)
+        : isSet(object.default_player_config)
+        ? PlayerConfig.fromJSON(object.default_player_config)
+        : undefined,
+      adTemplate: isSet(object.adTemplate)
+        ? AdTemplate.fromJSON(object.adTemplate)
+        : isSet(object.ad_template)
+        ? AdTemplate.fromJSON(object.ad_template)
+        : undefined,
+      activePopupAd: isSet(object.activePopupAd)
+        ? PopupAd.fromJSON(object.activePopupAd)
+        : isSet(object.active_popup_ad)
+        ? PopupAd.fromJSON(object.active_popup_ad)
+        : undefined,
+      domains: globalThis.Array.isArray(object?.domains) ? object.domains.map((e: any) => Domain.fromJSON(e)) : [],
+    };
+  },
+
+  toJSON(message: GetVideoMetadataResponse): unknown {
+    const obj: any = {};
+    if (message.video !== undefined) {
+      obj.video = Video.toJSON(message.video);
+    }
+    if (message.defaultPlayerConfig !== undefined) {
+      obj.defaultPlayerConfig = PlayerConfig.toJSON(message.defaultPlayerConfig);
+    }
+    if (message.adTemplate !== undefined) {
+      obj.adTemplate = AdTemplate.toJSON(message.adTemplate);
+    }
+    if (message.activePopupAd !== undefined) {
+      obj.activePopupAd = PopupAd.toJSON(message.activePopupAd);
+    }
+    if (message.domains?.length) {
+      obj.domains = message.domains.map((e) => Domain.toJSON(e));
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetVideoMetadataResponse>, I>>(base?: I): GetVideoMetadataResponse {
+    return GetVideoMetadataResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetVideoMetadataResponse>, I>>(object: I): GetVideoMetadataResponse {
+    const message = createBaseGetVideoMetadataResponse();
+    message.video = (object.video !== undefined && object.video !== null) ? Video.fromPartial(object.video) : undefined;
+    message.defaultPlayerConfig = (object.defaultPlayerConfig !== undefined && object.defaultPlayerConfig !== null)
+      ? PlayerConfig.fromPartial(object.defaultPlayerConfig)
+      : undefined;
+    message.adTemplate = (object.adTemplate !== undefined && object.adTemplate !== null)
+      ? AdTemplate.fromPartial(object.adTemplate)
+      : undefined;
+    message.activePopupAd = (object.activePopupAd !== undefined && object.activePopupAd !== null)
+      ? PopupAd.fromPartial(object.activePopupAd)
+      : undefined;
+    message.domains = object.domains?.map((e) => Domain.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+export type VideoMetadataService = typeof VideoMetadataService;
+export const VideoMetadataService = {
+  getVideoMetadata: {
+    path: "/stream.app.v1.VideoMetadata/GetVideoMetadata",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetVideoMetadataRequest): Buffer =>
+      Buffer.from(GetVideoMetadataRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetVideoMetadataRequest => GetVideoMetadataRequest.decode(value),
+    responseSerialize: (value: GetVideoMetadataResponse): Buffer =>
+      Buffer.from(GetVideoMetadataResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetVideoMetadataResponse => GetVideoMetadataResponse.decode(value),
+  },
+} as const;
+
+export interface VideoMetadataServer extends UntypedServiceImplementation {
+  getVideoMetadata: handleUnaryCall<GetVideoMetadataRequest, GetVideoMetadataResponse>;
+}
+
+export interface VideoMetadataClient extends Client {
+  getVideoMetadata(
+    request: GetVideoMetadataRequest,
+    callback: (error: ServiceError | null, response: GetVideoMetadataResponse) => void,
+  ): ClientUnaryCall;
+  getVideoMetadata(
+    request: GetVideoMetadataRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetVideoMetadataResponse) => void,
+  ): ClientUnaryCall;
+  getVideoMetadata(
+    request: GetVideoMetadataRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetVideoMetadataResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const VideoMetadataClient = makeGenericClientConstructor(
+  VideoMetadataService,
+  "stream.app.v1.VideoMetadata",
+) as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): VideoMetadataClient;
+  service: typeof VideoMetadataService;
+  serviceName: string;
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/app/v1/videos.ts b/src/server/api/proto/app/v1/videos.ts
new file mode 100644
index 0000000..0fa191a
--- /dev/null
+++ b/src/server/api/proto/app/v1/videos.ts
@@ -0,0 +1,1280 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: app/v1/videos.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+import {
+  type CallOptions,
+  type ChannelCredentials,
+  Client,
+  type ClientOptions,
+  type ClientUnaryCall,
+  type handleUnaryCall,
+  makeGenericClientConstructor,
+  type Metadata,
+  type ServiceError,
+  type UntypedServiceImplementation,
+} from "@grpc/grpc-js";
+import { MessageResponse, Video } from "./common";
+
+export const protobufPackage = "stream.app.v1";
+
+export interface GetUploadUrlRequest {
+  filename?: string | undefined;
+}
+
+export interface GetUploadUrlResponse {
+  uploadUrl?: string | undefined;
+  key?: string | undefined;
+  fileId?: string | undefined;
+}
+
+export interface CreateVideoRequest {
+  title?: string | undefined;
+  description?: string | undefined;
+  url?: string | undefined;
+  size?: number | undefined;
+  duration?: number | undefined;
+  format?: string | undefined;
+}
+
+export interface CreateVideoResponse {
+  video?: Video | undefined;
+}
+
+export interface ListVideosRequest {
+  page?: number | undefined;
+  limit?: number | undefined;
+  search?: string | undefined;
+  status?: string | undefined;
+}
+
+export interface ListVideosResponse {
+  videos?: Video[] | undefined;
+  total?: number | undefined;
+  page?: number | undefined;
+  limit?: number | undefined;
+}
+
+export interface GetVideoRequest {
+  id?: string | undefined;
+}
+
+export interface GetVideoResponse {
+  video?: Video | undefined;
+}
+
+export interface UpdateVideoRequest {
+  id?: string | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+  url?: string | undefined;
+  size?: number | undefined;
+  duration?: number | undefined;
+  format?: string | undefined;
+  status?: string | undefined;
+}
+
+export interface UpdateVideoResponse {
+  video?: Video | undefined;
+}
+
+export interface DeleteVideoRequest {
+  id?: string | undefined;
+}
+
+function createBaseGetUploadUrlRequest(): GetUploadUrlRequest {
+  return { filename: "" };
+}
+
+export const GetUploadUrlRequest: MessageFns<GetUploadUrlRequest> = {
+  encode(message: GetUploadUrlRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.filename !== undefined && message.filename !== "") {
+      writer.uint32(10).string(message.filename);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetUploadUrlRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetUploadUrlRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.filename = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetUploadUrlRequest {
+    return { filename: isSet(object.filename) ? globalThis.String(object.filename) : "" };
+  },
+
+  toJSON(message: GetUploadUrlRequest): unknown {
+    const obj: any = {};
+    if (message.filename !== undefined && message.filename !== "") {
+      obj.filename = message.filename;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetUploadUrlRequest>, I>>(base?: I): GetUploadUrlRequest {
+    return GetUploadUrlRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetUploadUrlRequest>, I>>(object: I): GetUploadUrlRequest {
+    const message = createBaseGetUploadUrlRequest();
+    message.filename = object.filename ?? "";
+    return message;
+  },
+};
+
+function createBaseGetUploadUrlResponse(): GetUploadUrlResponse {
+  return { uploadUrl: "", key: "", fileId: "" };
+}
+
+export const GetUploadUrlResponse: MessageFns<GetUploadUrlResponse> = {
+  encode(message: GetUploadUrlResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.uploadUrl !== undefined && message.uploadUrl !== "") {
+      writer.uint32(10).string(message.uploadUrl);
+    }
+    if (message.key !== undefined && message.key !== "") {
+      writer.uint32(18).string(message.key);
+    }
+    if (message.fileId !== undefined && message.fileId !== "") {
+      writer.uint32(26).string(message.fileId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetUploadUrlResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetUploadUrlResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.uploadUrl = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.key = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.fileId = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetUploadUrlResponse {
+    return {
+      uploadUrl: isSet(object.uploadUrl)
+        ? globalThis.String(object.uploadUrl)
+        : isSet(object.upload_url)
+        ? globalThis.String(object.upload_url)
+        : "",
+      key: isSet(object.key) ? globalThis.String(object.key) : "",
+      fileId: isSet(object.fileId)
+        ? globalThis.String(object.fileId)
+        : isSet(object.file_id)
+        ? globalThis.String(object.file_id)
+        : "",
+    };
+  },
+
+  toJSON(message: GetUploadUrlResponse): unknown {
+    const obj: any = {};
+    if (message.uploadUrl !== undefined && message.uploadUrl !== "") {
+      obj.uploadUrl = message.uploadUrl;
+    }
+    if (message.key !== undefined && message.key !== "") {
+      obj.key = message.key;
+    }
+    if (message.fileId !== undefined && message.fileId !== "") {
+      obj.fileId = message.fileId;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetUploadUrlResponse>, I>>(base?: I): GetUploadUrlResponse {
+    return GetUploadUrlResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetUploadUrlResponse>, I>>(object: I): GetUploadUrlResponse {
+    const message = createBaseGetUploadUrlResponse();
+    message.uploadUrl = object.uploadUrl ?? "";
+    message.key = object.key ?? "";
+    message.fileId = object.fileId ?? "";
+    return message;
+  },
+};
+
+function createBaseCreateVideoRequest(): CreateVideoRequest {
+  return { title: "", description: undefined, url: "", size: 0, duration: 0, format: undefined };
+}
+
+export const CreateVideoRequest: MessageFns<CreateVideoRequest> = {
+  encode(message: CreateVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.title !== undefined && message.title !== "") {
+      writer.uint32(10).string(message.title);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(18).string(message.description);
+    }
+    if (message.url !== undefined && message.url !== "") {
+      writer.uint32(26).string(message.url);
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      writer.uint32(32).int64(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      writer.uint32(40).int32(message.duration);
+    }
+    if (message.format !== undefined) {
+      writer.uint32(50).string(message.format);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.title = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.url = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.size = longToNumber(reader.int64());
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.format = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateVideoRequest {
+    return {
+      title: isSet(object.title) ? globalThis.String(object.title) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      url: isSet(object.url) ? globalThis.String(object.url) : "",
+      size: isSet(object.size) ? globalThis.Number(object.size) : 0,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : 0,
+      format: isSet(object.format) ? globalThis.String(object.format) : undefined,
+    };
+  },
+
+  toJSON(message: CreateVideoRequest): unknown {
+    const obj: any = {};
+    if (message.title !== undefined && message.title !== "") {
+      obj.title = message.title;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.url !== undefined && message.url !== "") {
+      obj.url = message.url;
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      obj.size = Math.round(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.format !== undefined) {
+      obj.format = message.format;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateVideoRequest>, I>>(base?: I): CreateVideoRequest {
+    return CreateVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateVideoRequest>, I>>(object: I): CreateVideoRequest {
+    const message = createBaseCreateVideoRequest();
+    message.title = object.title ?? "";
+    message.description = object.description ?? undefined;
+    message.url = object.url ?? "";
+    message.size = object.size ?? 0;
+    message.duration = object.duration ?? 0;
+    message.format = object.format ?? undefined;
+    return message;
+  },
+};
+
+function createBaseCreateVideoResponse(): CreateVideoResponse {
+  return { video: undefined };
+}
+
+export const CreateVideoResponse: MessageFns<CreateVideoResponse> = {
+  encode(message: CreateVideoResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.video !== undefined) {
+      Video.encode(message.video, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): CreateVideoResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseCreateVideoResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.video = Video.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): CreateVideoResponse {
+    return { video: isSet(object.video) ? Video.fromJSON(object.video) : undefined };
+  },
+
+  toJSON(message: CreateVideoResponse): unknown {
+    const obj: any = {};
+    if (message.video !== undefined) {
+      obj.video = Video.toJSON(message.video);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<CreateVideoResponse>, I>>(base?: I): CreateVideoResponse {
+    return CreateVideoResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<CreateVideoResponse>, I>>(object: I): CreateVideoResponse {
+    const message = createBaseCreateVideoResponse();
+    message.video = (object.video !== undefined && object.video !== null) ? Video.fromPartial(object.video) : undefined;
+    return message;
+  },
+};
+
+function createBaseListVideosRequest(): ListVideosRequest {
+  return { page: 0, limit: 0, search: undefined, status: undefined };
+}
+
+export const ListVideosRequest: MessageFns<ListVideosRequest> = {
+  encode(message: ListVideosRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(8).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(16).int32(message.limit);
+    }
+    if (message.search !== undefined) {
+      writer.uint32(26).string(message.search);
+    }
+    if (message.status !== undefined) {
+      writer.uint32(34).string(message.status);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListVideosRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListVideosRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.search = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListVideosRequest {
+    return {
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+      search: isSet(object.search) ? globalThis.String(object.search) : undefined,
+      status: isSet(object.status) ? globalThis.String(object.status) : undefined,
+    };
+  },
+
+  toJSON(message: ListVideosRequest): unknown {
+    const obj: any = {};
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    if (message.search !== undefined) {
+      obj.search = message.search;
+    }
+    if (message.status !== undefined) {
+      obj.status = message.status;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListVideosRequest>, I>>(base?: I): ListVideosRequest {
+    return ListVideosRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListVideosRequest>, I>>(object: I): ListVideosRequest {
+    const message = createBaseListVideosRequest();
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    message.search = object.search ?? undefined;
+    message.status = object.status ?? undefined;
+    return message;
+  },
+};
+
+function createBaseListVideosResponse(): ListVideosResponse {
+  return { videos: [], total: 0, page: 0, limit: 0 };
+}
+
+export const ListVideosResponse: MessageFns<ListVideosResponse> = {
+  encode(message: ListVideosResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.videos !== undefined && message.videos.length !== 0) {
+      for (const v of message.videos) {
+        Video.encode(v!, writer.uint32(10).fork()).join();
+      }
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      writer.uint32(16).int64(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      writer.uint32(24).int32(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      writer.uint32(32).int32(message.limit);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListVideosResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListVideosResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          const el = Video.decode(reader, reader.uint32());
+          if (el !== undefined) {
+            message.videos!.push(el);
+          }
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.total = longToNumber(reader.int64());
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.page = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.limit = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListVideosResponse {
+    return {
+      videos: globalThis.Array.isArray(object?.videos) ? object.videos.map((e: any) => Video.fromJSON(e)) : [],
+      total: isSet(object.total) ? globalThis.Number(object.total) : 0,
+      page: isSet(object.page) ? globalThis.Number(object.page) : 0,
+      limit: isSet(object.limit) ? globalThis.Number(object.limit) : 0,
+    };
+  },
+
+  toJSON(message: ListVideosResponse): unknown {
+    const obj: any = {};
+    if (message.videos?.length) {
+      obj.videos = message.videos.map((e) => Video.toJSON(e));
+    }
+    if (message.total !== undefined && message.total !== 0) {
+      obj.total = Math.round(message.total);
+    }
+    if (message.page !== undefined && message.page !== 0) {
+      obj.page = Math.round(message.page);
+    }
+    if (message.limit !== undefined && message.limit !== 0) {
+      obj.limit = Math.round(message.limit);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<ListVideosResponse>, I>>(base?: I): ListVideosResponse {
+    return ListVideosResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<ListVideosResponse>, I>>(object: I): ListVideosResponse {
+    const message = createBaseListVideosResponse();
+    message.videos = object.videos?.map((e) => Video.fromPartial(e)) || [];
+    message.total = object.total ?? 0;
+    message.page = object.page ?? 0;
+    message.limit = object.limit ?? 0;
+    return message;
+  },
+};
+
+function createBaseGetVideoRequest(): GetVideoRequest {
+  return { id: "" };
+}
+
+export const GetVideoRequest: MessageFns<GetVideoRequest> = {
+  encode(message: GetVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetVideoRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: GetVideoRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetVideoRequest>, I>>(base?: I): GetVideoRequest {
+    return GetVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetVideoRequest>, I>>(object: I): GetVideoRequest {
+    const message = createBaseGetVideoRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+function createBaseGetVideoResponse(): GetVideoResponse {
+  return { video: undefined };
+}
+
+export const GetVideoResponse: MessageFns<GetVideoResponse> = {
+  encode(message: GetVideoResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.video !== undefined) {
+      Video.encode(message.video, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetVideoResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetVideoResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.video = Video.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetVideoResponse {
+    return { video: isSet(object.video) ? Video.fromJSON(object.video) : undefined };
+  },
+
+  toJSON(message: GetVideoResponse): unknown {
+    const obj: any = {};
+    if (message.video !== undefined) {
+      obj.video = Video.toJSON(message.video);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<GetVideoResponse>, I>>(base?: I): GetVideoResponse {
+    return GetVideoResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<GetVideoResponse>, I>>(object: I): GetVideoResponse {
+    const message = createBaseGetVideoResponse();
+    message.video = (object.video !== undefined && object.video !== null) ? Video.fromPartial(object.video) : undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateVideoRequest(): UpdateVideoRequest {
+  return {
+    id: "",
+    title: "",
+    description: undefined,
+    url: "",
+    size: 0,
+    duration: 0,
+    format: undefined,
+    status: undefined,
+  };
+}
+
+export const UpdateVideoRequest: MessageFns<UpdateVideoRequest> = {
+  encode(message: UpdateVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    if (message.title !== undefined && message.title !== "") {
+      writer.uint32(18).string(message.title);
+    }
+    if (message.description !== undefined) {
+      writer.uint32(26).string(message.description);
+    }
+    if (message.url !== undefined && message.url !== "") {
+      writer.uint32(34).string(message.url);
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      writer.uint32(40).int64(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      writer.uint32(48).int32(message.duration);
+    }
+    if (message.format !== undefined) {
+      writer.uint32(58).string(message.format);
+    }
+    if (message.status !== undefined) {
+      writer.uint32(66).string(message.status);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.title = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.description = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.url = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.size = longToNumber(reader.int64());
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.duration = reader.int32();
+          continue;
+        }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.format = reader.string();
+          continue;
+        }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateVideoRequest {
+    return {
+      id: isSet(object.id) ? globalThis.String(object.id) : "",
+      title: isSet(object.title) ? globalThis.String(object.title) : "",
+      description: isSet(object.description) ? globalThis.String(object.description) : undefined,
+      url: isSet(object.url) ? globalThis.String(object.url) : "",
+      size: isSet(object.size) ? globalThis.Number(object.size) : 0,
+      duration: isSet(object.duration) ? globalThis.Number(object.duration) : 0,
+      format: isSet(object.format) ? globalThis.String(object.format) : undefined,
+      status: isSet(object.status) ? globalThis.String(object.status) : undefined,
+    };
+  },
+
+  toJSON(message: UpdateVideoRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    if (message.title !== undefined && message.title !== "") {
+      obj.title = message.title;
+    }
+    if (message.description !== undefined) {
+      obj.description = message.description;
+    }
+    if (message.url !== undefined && message.url !== "") {
+      obj.url = message.url;
+    }
+    if (message.size !== undefined && message.size !== 0) {
+      obj.size = Math.round(message.size);
+    }
+    if (message.duration !== undefined && message.duration !== 0) {
+      obj.duration = Math.round(message.duration);
+    }
+    if (message.format !== undefined) {
+      obj.format = message.format;
+    }
+    if (message.status !== undefined) {
+      obj.status = message.status;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateVideoRequest>, I>>(base?: I): UpdateVideoRequest {
+    return UpdateVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateVideoRequest>, I>>(object: I): UpdateVideoRequest {
+    const message = createBaseUpdateVideoRequest();
+    message.id = object.id ?? "";
+    message.title = object.title ?? "";
+    message.description = object.description ?? undefined;
+    message.url = object.url ?? "";
+    message.size = object.size ?? 0;
+    message.duration = object.duration ?? 0;
+    message.format = object.format ?? undefined;
+    message.status = object.status ?? undefined;
+    return message;
+  },
+};
+
+function createBaseUpdateVideoResponse(): UpdateVideoResponse {
+  return { video: undefined };
+}
+
+export const UpdateVideoResponse: MessageFns<UpdateVideoResponse> = {
+  encode(message: UpdateVideoResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.video !== undefined) {
+      Video.encode(message.video, writer.uint32(10).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UpdateVideoResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUpdateVideoResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.video = Video.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UpdateVideoResponse {
+    return { video: isSet(object.video) ? Video.fromJSON(object.video) : undefined };
+  },
+
+  toJSON(message: UpdateVideoResponse): unknown {
+    const obj: any = {};
+    if (message.video !== undefined) {
+      obj.video = Video.toJSON(message.video);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UpdateVideoResponse>, I>>(base?: I): UpdateVideoResponse {
+    return UpdateVideoResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UpdateVideoResponse>, I>>(object: I): UpdateVideoResponse {
+    const message = createBaseUpdateVideoResponse();
+    message.video = (object.video !== undefined && object.video !== null) ? Video.fromPartial(object.video) : undefined;
+    return message;
+  },
+};
+
+function createBaseDeleteVideoRequest(): DeleteVideoRequest {
+  return { id: "" };
+}
+
+export const DeleteVideoRequest: MessageFns<DeleteVideoRequest> = {
+  encode(message: DeleteVideoRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.id !== undefined && message.id !== "") {
+      writer.uint32(10).string(message.id);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DeleteVideoRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDeleteVideoRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.id = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DeleteVideoRequest {
+    return { id: isSet(object.id) ? globalThis.String(object.id) : "" };
+  },
+
+  toJSON(message: DeleteVideoRequest): unknown {
+    const obj: any = {};
+    if (message.id !== undefined && message.id !== "") {
+      obj.id = message.id;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DeleteVideoRequest>, I>>(base?: I): DeleteVideoRequest {
+    return DeleteVideoRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DeleteVideoRequest>, I>>(object: I): DeleteVideoRequest {
+    const message = createBaseDeleteVideoRequest();
+    message.id = object.id ?? "";
+    return message;
+  },
+};
+
+export type VideosService = typeof VideosService;
+export const VideosService = {
+  getUploadUrl: {
+    path: "/stream.app.v1.Videos/GetUploadUrl",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetUploadUrlRequest): Buffer => Buffer.from(GetUploadUrlRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetUploadUrlRequest => GetUploadUrlRequest.decode(value),
+    responseSerialize: (value: GetUploadUrlResponse): Buffer =>
+      Buffer.from(GetUploadUrlResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetUploadUrlResponse => GetUploadUrlResponse.decode(value),
+  },
+  createVideo: {
+    path: "/stream.app.v1.Videos/CreateVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: CreateVideoRequest): Buffer => Buffer.from(CreateVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): CreateVideoRequest => CreateVideoRequest.decode(value),
+    responseSerialize: (value: CreateVideoResponse): Buffer => Buffer.from(CreateVideoResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): CreateVideoResponse => CreateVideoResponse.decode(value),
+  },
+  listVideos: {
+    path: "/stream.app.v1.Videos/ListVideos",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: ListVideosRequest): Buffer => Buffer.from(ListVideosRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): ListVideosRequest => ListVideosRequest.decode(value),
+    responseSerialize: (value: ListVideosResponse): Buffer => Buffer.from(ListVideosResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): ListVideosResponse => ListVideosResponse.decode(value),
+  },
+  getVideo: {
+    path: "/stream.app.v1.Videos/GetVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: GetVideoRequest): Buffer => Buffer.from(GetVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): GetVideoRequest => GetVideoRequest.decode(value),
+    responseSerialize: (value: GetVideoResponse): Buffer => Buffer.from(GetVideoResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): GetVideoResponse => GetVideoResponse.decode(value),
+  },
+  updateVideo: {
+    path: "/stream.app.v1.Videos/UpdateVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: UpdateVideoRequest): Buffer => Buffer.from(UpdateVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): UpdateVideoRequest => UpdateVideoRequest.decode(value),
+    responseSerialize: (value: UpdateVideoResponse): Buffer => Buffer.from(UpdateVideoResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): UpdateVideoResponse => UpdateVideoResponse.decode(value),
+  },
+  deleteVideo: {
+    path: "/stream.app.v1.Videos/DeleteVideo",
+    requestStream: false,
+    responseStream: false,
+    requestSerialize: (value: DeleteVideoRequest): Buffer => Buffer.from(DeleteVideoRequest.encode(value).finish()),
+    requestDeserialize: (value: Buffer): DeleteVideoRequest => DeleteVideoRequest.decode(value),
+    responseSerialize: (value: MessageResponse): Buffer => Buffer.from(MessageResponse.encode(value).finish()),
+    responseDeserialize: (value: Buffer): MessageResponse => MessageResponse.decode(value),
+  },
+} as const;
+
+export interface VideosServer extends UntypedServiceImplementation {
+  getUploadUrl: handleUnaryCall<GetUploadUrlRequest, GetUploadUrlResponse>;
+  createVideo: handleUnaryCall<CreateVideoRequest, CreateVideoResponse>;
+  listVideos: handleUnaryCall<ListVideosRequest, ListVideosResponse>;
+  getVideo: handleUnaryCall<GetVideoRequest, GetVideoResponse>;
+  updateVideo: handleUnaryCall<UpdateVideoRequest, UpdateVideoResponse>;
+  deleteVideo: handleUnaryCall<DeleteVideoRequest, MessageResponse>;
+}
+
+export interface VideosClient extends Client {
+  getUploadUrl(
+    request: GetUploadUrlRequest,
+    callback: (error: ServiceError | null, response: GetUploadUrlResponse) => void,
+  ): ClientUnaryCall;
+  getUploadUrl(
+    request: GetUploadUrlRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetUploadUrlResponse) => void,
+  ): ClientUnaryCall;
+  getUploadUrl(
+    request: GetUploadUrlRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetUploadUrlResponse) => void,
+  ): ClientUnaryCall;
+  createVideo(
+    request: CreateVideoRequest,
+    callback: (error: ServiceError | null, response: CreateVideoResponse) => void,
+  ): ClientUnaryCall;
+  createVideo(
+    request: CreateVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: CreateVideoResponse) => void,
+  ): ClientUnaryCall;
+  createVideo(
+    request: CreateVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: CreateVideoResponse) => void,
+  ): ClientUnaryCall;
+  listVideos(
+    request: ListVideosRequest,
+    callback: (error: ServiceError | null, response: ListVideosResponse) => void,
+  ): ClientUnaryCall;
+  listVideos(
+    request: ListVideosRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: ListVideosResponse) => void,
+  ): ClientUnaryCall;
+  listVideos(
+    request: ListVideosRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: ListVideosResponse) => void,
+  ): ClientUnaryCall;
+  getVideo(
+    request: GetVideoRequest,
+    callback: (error: ServiceError | null, response: GetVideoResponse) => void,
+  ): ClientUnaryCall;
+  getVideo(
+    request: GetVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: GetVideoResponse) => void,
+  ): ClientUnaryCall;
+  getVideo(
+    request: GetVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: GetVideoResponse) => void,
+  ): ClientUnaryCall;
+  updateVideo(
+    request: UpdateVideoRequest,
+    callback: (error: ServiceError | null, response: UpdateVideoResponse) => void,
+  ): ClientUnaryCall;
+  updateVideo(
+    request: UpdateVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: UpdateVideoResponse) => void,
+  ): ClientUnaryCall;
+  updateVideo(
+    request: UpdateVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: UpdateVideoResponse) => void,
+  ): ClientUnaryCall;
+  deleteVideo(
+    request: DeleteVideoRequest,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteVideo(
+    request: DeleteVideoRequest,
+    metadata: Metadata,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+  deleteVideo(
+    request: DeleteVideoRequest,
+    metadata: Metadata,
+    options: Partial<CallOptions>,
+    callback: (error: ServiceError | null, response: MessageResponse) => void,
+  ): ClientUnaryCall;
+}
+
+export const VideosClient = makeGenericClientConstructor(VideosService, "stream.app.v1.Videos") as unknown as {
+  new (address: string, credentials: ChannelCredentials, options?: Partial<ClientOptions>): VideosClient;
+  service: typeof VideosService;
+  serviceName: string;
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/google/protobuf/timestamp.ts b/src/server/api/proto/google/protobuf/timestamp.ts
new file mode 100644
index 0000000..00808e3
--- /dev/null
+++ b/src/server/api/proto/google/protobuf/timestamp.ts
@@ -0,0 +1,231 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: google/protobuf/timestamp.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+
+export const protobufPackage = "google.protobuf";
+
+/**
+ * A Timestamp represents a point in time independent of any time zone or local
+ * calendar, encoded as a count of seconds and fractions of seconds at
+ * nanosecond resolution. The count is relative to an epoch at UTC midnight on
+ * January 1, 1970, in the proleptic Gregorian calendar which extends the
+ * Gregorian calendar backwards to year one.
+ *
+ * All minutes are 60 seconds long. Leap seconds are "smeared" so that no leap
+ * second table is needed for interpretation, using a [24-hour linear
+ * smear](https://developers.google.com/time/smear).
+ *
+ * The range is from 0001-01-01T00:00:00Z to 9999-12-31T23:59:59.999999999Z. By
+ * restricting to that range, we ensure that we can convert to and from [RFC
+ * 3339](https://www.ietf.org/rfc/rfc3339.txt) date strings.
+ *
+ * # Examples
+ *
+ * Example 1: Compute Timestamp from POSIX `time()`.
+ *
+ *     Timestamp timestamp;
+ *     timestamp.set_seconds(time(NULL));
+ *     timestamp.set_nanos(0);
+ *
+ * Example 2: Compute Timestamp from POSIX `gettimeofday()`.
+ *
+ *     struct timeval tv;
+ *     gettimeofday(&tv, NULL);
+ *
+ *     Timestamp timestamp;
+ *     timestamp.set_seconds(tv.tv_sec);
+ *     timestamp.set_nanos(tv.tv_usec * 1000);
+ *
+ * Example 3: Compute Timestamp from Win32 `GetSystemTimeAsFileTime()`.
+ *
+ *     FILETIME ft;
+ *     GetSystemTimeAsFileTime(&ft);
+ *     UINT64 ticks = (((UINT64)ft.dwHighDateTime) << 32) | ft.dwLowDateTime;
+ *
+ *     // A Windows tick is 100 nanoseconds. Windows epoch 1601-01-01T00:00:00Z
+ *     // is 11644473600 seconds before Unix epoch 1970-01-01T00:00:00Z.
+ *     Timestamp timestamp;
+ *     timestamp.set_seconds((INT64) ((ticks / 10000000) - 11644473600LL));
+ *     timestamp.set_nanos((INT32) ((ticks % 10000000) * 100));
+ *
+ * Example 4: Compute Timestamp from Java `System.currentTimeMillis()`.
+ *
+ *     long millis = System.currentTimeMillis();
+ *
+ *     Timestamp timestamp = Timestamp.newBuilder().setSeconds(millis / 1000)
+ *         .setNanos((int) ((millis % 1000) * 1000000)).build();
+ *
+ * Example 5: Compute Timestamp from Java `Instant.now()`.
+ *
+ *     Instant now = Instant.now();
+ *
+ *     Timestamp timestamp =
+ *         Timestamp.newBuilder().setSeconds(now.getEpochSecond())
+ *             .setNanos(now.getNano()).build();
+ *
+ * Example 6: Compute Timestamp from current time in Python.
+ *
+ *     timestamp = Timestamp()
+ *     timestamp.GetCurrentTime()
+ *
+ * # JSON Mapping
+ *
+ * In JSON format, the Timestamp type is encoded as a string in the
+ * [RFC 3339](https://www.ietf.org/rfc/rfc3339.txt) format. That is, the
+ * format is "{year}-{month}-{day}T{hour}:{min}:{sec}[.{frac_sec}]Z"
+ * where {year} is always expressed using four digits while {month}, {day},
+ * {hour}, {min}, and {sec} are zero-padded to two digits each. The fractional
+ * seconds, which can go up to 9 digits (i.e. up to 1 nanosecond resolution),
+ * are optional. The "Z" suffix indicates the timezone ("UTC"); the timezone
+ * is required. A proto3 JSON serializer should always use UTC (as indicated by
+ * "Z") when printing the Timestamp type and a proto3 JSON parser should be
+ * able to accept both UTC and other timezones (as indicated by an offset).
+ *
+ * For example, "2017-01-15T01:30:15.01Z" encodes 15.01 seconds past
+ * 01:30 UTC on January 15, 2017.
+ *
+ * In JavaScript, one can convert a Date object to this format using the
+ * standard
+ * [toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+ * method. In Python, a standard `datetime.datetime` object can be converted
+ * to this format using
+ * [`strftime`](https://docs.python.org/2/library/time.html#time.strftime) with
+ * the time format spec '%Y-%m-%dT%H:%M:%S.%fZ'. Likewise, in Java, one can use
+ * the Joda Time's [`ISODateTimeFormat.dateTime()`](
+ * http://joda-time.sourceforge.net/apidocs/org/joda/time/format/ISODateTimeFormat.html#dateTime()
+ * ) to obtain a formatter capable of generating timestamps in this format.
+ */
+export interface Timestamp {
+  /**
+   * Represents seconds of UTC time since Unix epoch
+   * 1970-01-01T00:00:00Z. Must be from 0001-01-01T00:00:00Z to
+   * 9999-12-31T23:59:59Z inclusive.
+   */
+  seconds?:
+    | number
+    | undefined;
+  /**
+   * Non-negative fractions of a second at nanosecond resolution. Negative
+   * second values with fractions must still have non-negative nanos values
+   * that count forward in time. Must be from 0 to 999,999,999
+   * inclusive.
+   */
+  nanos?: number | undefined;
+}
+
+function createBaseTimestamp(): Timestamp {
+  return { seconds: 0, nanos: 0 };
+}
+
+export const Timestamp: MessageFns<Timestamp> = {
+  encode(message: Timestamp, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.seconds !== undefined && message.seconds !== 0) {
+      writer.uint32(8).int64(message.seconds);
+    }
+    if (message.nanos !== undefined && message.nanos !== 0) {
+      writer.uint32(16).int32(message.nanos);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Timestamp {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseTimestamp();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.seconds = longToNumber(reader.int64());
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.nanos = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Timestamp {
+    return {
+      seconds: isSet(object.seconds) ? globalThis.Number(object.seconds) : 0,
+      nanos: isSet(object.nanos) ? globalThis.Number(object.nanos) : 0,
+    };
+  },
+
+  toJSON(message: Timestamp): unknown {
+    const obj: any = {};
+    if (message.seconds !== undefined && message.seconds !== 0) {
+      obj.seconds = Math.round(message.seconds);
+    }
+    if (message.nanos !== undefined && message.nanos !== 0) {
+      obj.nanos = Math.round(message.nanos);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Timestamp>, I>>(base?: I): Timestamp {
+    return Timestamp.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Timestamp>, I>>(object: I): Timestamp {
+    const message = createBaseTimestamp();
+    message.seconds = object.seconds ?? 0;
+    message.nanos = object.nanos ?? 0;
+    return message;
+  },
+};
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/api/proto/google/protobuf/wrappers.ts b/src/server/api/proto/google/protobuf/wrappers.ts
new file mode 100644
index 0000000..1465a23
--- /dev/null
+++ b/src/server/api/proto/google/protobuf/wrappers.ts
@@ -0,0 +1,693 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.11.4
+//   protoc               unknown
+// source: google/protobuf/wrappers.proto
+
+/* eslint-disable */
+import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
+
+export const protobufPackage = "google.protobuf";
+
+/**
+ * Wrapper message for `double`.
+ *
+ * The JSON representation for `DoubleValue` is JSON number.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface DoubleValue {
+  /** The double value. */
+  value?: number | undefined;
+}
+
+/**
+ * Wrapper message for `float`.
+ *
+ * The JSON representation for `FloatValue` is JSON number.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface FloatValue {
+  /** The float value. */
+  value?: number | undefined;
+}
+
+/**
+ * Wrapper message for `int64`.
+ *
+ * The JSON representation for `Int64Value` is JSON string.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface Int64Value {
+  /** The int64 value. */
+  value?: number | undefined;
+}
+
+/**
+ * Wrapper message for `uint64`.
+ *
+ * The JSON representation for `UInt64Value` is JSON string.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface UInt64Value {
+  /** The uint64 value. */
+  value?: number | undefined;
+}
+
+/**
+ * Wrapper message for `int32`.
+ *
+ * The JSON representation for `Int32Value` is JSON number.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface Int32Value {
+  /** The int32 value. */
+  value?: number | undefined;
+}
+
+/**
+ * Wrapper message for `uint32`.
+ *
+ * The JSON representation for `UInt32Value` is JSON number.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface UInt32Value {
+  /** The uint32 value. */
+  value?: number | undefined;
+}
+
+/**
+ * Wrapper message for `bool`.
+ *
+ * The JSON representation for `BoolValue` is JSON `true` and `false`.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface BoolValue {
+  /** The bool value. */
+  value?: boolean | undefined;
+}
+
+/**
+ * Wrapper message for `string`.
+ *
+ * The JSON representation for `StringValue` is JSON string.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface StringValue {
+  /** The string value. */
+  value?: string | undefined;
+}
+
+/**
+ * Wrapper message for `bytes`.
+ *
+ * The JSON representation for `BytesValue` is JSON string.
+ *
+ * Not recommended for use in new APIs, but still useful for legacy APIs and
+ * has no plan to be removed.
+ */
+export interface BytesValue {
+  /** The bytes value. */
+  value?: Buffer | undefined;
+}
+
+function createBaseDoubleValue(): DoubleValue {
+  return { value: 0 };
+}
+
+export const DoubleValue: MessageFns<DoubleValue> = {
+  encode(message: DoubleValue, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== 0) {
+      writer.uint32(9).double(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): DoubleValue {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseDoubleValue();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 9) {
+            break;
+          }
+
+          message.value = reader.double();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): DoubleValue {
+    return { value: isSet(object.value) ? globalThis.Number(object.value) : 0 };
+  },
+
+  toJSON(message: DoubleValue): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== 0) {
+      obj.value = message.value;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<DoubleValue>, I>>(base?: I): DoubleValue {
+    return DoubleValue.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<DoubleValue>, I>>(object: I): DoubleValue {
+    const message = createBaseDoubleValue();
+    message.value = object.value ?? 0;
+    return message;
+  },
+};
+
+function createBaseFloatValue(): FloatValue {
+  return { value: 0 };
+}
+
+export const FloatValue: MessageFns<FloatValue> = {
+  encode(message: FloatValue, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== 0) {
+      writer.uint32(13).float(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): FloatValue {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseFloatValue();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 13) {
+            break;
+          }
+
+          message.value = reader.float();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): FloatValue {
+    return { value: isSet(object.value) ? globalThis.Number(object.value) : 0 };
+  },
+
+  toJSON(message: FloatValue): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== 0) {
+      obj.value = message.value;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<FloatValue>, I>>(base?: I): FloatValue {
+    return FloatValue.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<FloatValue>, I>>(object: I): FloatValue {
+    const message = createBaseFloatValue();
+    message.value = object.value ?? 0;
+    return message;
+  },
+};
+
+function createBaseInt64Value(): Int64Value {
+  return { value: 0 };
+}
+
+export const Int64Value: MessageFns<Int64Value> = {
+  encode(message: Int64Value, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== 0) {
+      writer.uint32(8).int64(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Int64Value {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseInt64Value();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.value = longToNumber(reader.int64());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Int64Value {
+    return { value: isSet(object.value) ? globalThis.Number(object.value) : 0 };
+  },
+
+  toJSON(message: Int64Value): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== 0) {
+      obj.value = Math.round(message.value);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Int64Value>, I>>(base?: I): Int64Value {
+    return Int64Value.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Int64Value>, I>>(object: I): Int64Value {
+    const message = createBaseInt64Value();
+    message.value = object.value ?? 0;
+    return message;
+  },
+};
+
+function createBaseUInt64Value(): UInt64Value {
+  return { value: 0 };
+}
+
+export const UInt64Value: MessageFns<UInt64Value> = {
+  encode(message: UInt64Value, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== 0) {
+      writer.uint32(8).uint64(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UInt64Value {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUInt64Value();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.value = longToNumber(reader.uint64());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UInt64Value {
+    return { value: isSet(object.value) ? globalThis.Number(object.value) : 0 };
+  },
+
+  toJSON(message: UInt64Value): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== 0) {
+      obj.value = Math.round(message.value);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UInt64Value>, I>>(base?: I): UInt64Value {
+    return UInt64Value.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UInt64Value>, I>>(object: I): UInt64Value {
+    const message = createBaseUInt64Value();
+    message.value = object.value ?? 0;
+    return message;
+  },
+};
+
+function createBaseInt32Value(): Int32Value {
+  return { value: 0 };
+}
+
+export const Int32Value: MessageFns<Int32Value> = {
+  encode(message: Int32Value, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== 0) {
+      writer.uint32(8).int32(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): Int32Value {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseInt32Value();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.value = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): Int32Value {
+    return { value: isSet(object.value) ? globalThis.Number(object.value) : 0 };
+  },
+
+  toJSON(message: Int32Value): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== 0) {
+      obj.value = Math.round(message.value);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<Int32Value>, I>>(base?: I): Int32Value {
+    return Int32Value.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<Int32Value>, I>>(object: I): Int32Value {
+    const message = createBaseInt32Value();
+    message.value = object.value ?? 0;
+    return message;
+  },
+};
+
+function createBaseUInt32Value(): UInt32Value {
+  return { value: 0 };
+}
+
+export const UInt32Value: MessageFns<UInt32Value> = {
+  encode(message: UInt32Value, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== 0) {
+      writer.uint32(8).uint32(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): UInt32Value {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseUInt32Value();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.value = reader.uint32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): UInt32Value {
+    return { value: isSet(object.value) ? globalThis.Number(object.value) : 0 };
+  },
+
+  toJSON(message: UInt32Value): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== 0) {
+      obj.value = Math.round(message.value);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<UInt32Value>, I>>(base?: I): UInt32Value {
+    return UInt32Value.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<UInt32Value>, I>>(object: I): UInt32Value {
+    const message = createBaseUInt32Value();
+    message.value = object.value ?? 0;
+    return message;
+  },
+};
+
+function createBaseBoolValue(): BoolValue {
+  return { value: false };
+}
+
+export const BoolValue: MessageFns<BoolValue> = {
+  encode(message: BoolValue, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== false) {
+      writer.uint32(8).bool(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): BoolValue {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseBoolValue();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.value = reader.bool();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): BoolValue {
+    return { value: isSet(object.value) ? globalThis.Boolean(object.value) : false };
+  },
+
+  toJSON(message: BoolValue): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== false) {
+      obj.value = message.value;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<BoolValue>, I>>(base?: I): BoolValue {
+    return BoolValue.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<BoolValue>, I>>(object: I): BoolValue {
+    const message = createBaseBoolValue();
+    message.value = object.value ?? false;
+    return message;
+  },
+};
+
+function createBaseStringValue(): StringValue {
+  return { value: "" };
+}
+
+export const StringValue: MessageFns<StringValue> = {
+  encode(message: StringValue, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value !== "") {
+      writer.uint32(10).string(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): StringValue {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseStringValue();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.value = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): StringValue {
+    return { value: isSet(object.value) ? globalThis.String(object.value) : "" };
+  },
+
+  toJSON(message: StringValue): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value !== "") {
+      obj.value = message.value;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<StringValue>, I>>(base?: I): StringValue {
+    return StringValue.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<StringValue>, I>>(object: I): StringValue {
+    const message = createBaseStringValue();
+    message.value = object.value ?? "";
+    return message;
+  },
+};
+
+function createBaseBytesValue(): BytesValue {
+  return { value: Buffer.alloc(0) };
+}
+
+export const BytesValue: MessageFns<BytesValue> = {
+  encode(message: BytesValue, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.value !== undefined && message.value.length !== 0) {
+      writer.uint32(10).bytes(message.value);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): BytesValue {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseBytesValue();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.value = Buffer.from(reader.bytes());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): BytesValue {
+    return { value: isSet(object.value) ? Buffer.from(bytesFromBase64(object.value)) : Buffer.alloc(0) };
+  },
+
+  toJSON(message: BytesValue): unknown {
+    const obj: any = {};
+    if (message.value !== undefined && message.value.length !== 0) {
+      obj.value = base64FromBytes(message.value);
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<BytesValue>, I>>(base?: I): BytesValue {
+    return BytesValue.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<BytesValue>, I>>(object: I): BytesValue {
+    const message = createBaseBytesValue();
+    message.value = object.value ?? Buffer.alloc(0);
+    return message;
+  },
+};
+
+function bytesFromBase64(b64: string): Uint8Array {
+  return Uint8Array.from(globalThis.Buffer.from(b64, "base64"));
+}
+
+function base64FromBytes(arr: Uint8Array): string {
+  return globalThis.Buffer.from(arr).toString("base64");
+}
+
+type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
+
+export type DeepPartial<T> = T extends Builtin ? T
+  : T extends globalThis.Array<infer U> ? globalThis.Array<DeepPartial<U>>
+  : T extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>>
+  : T extends {} ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : Partial<T>;
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type Exact<P, I extends P> = P extends Builtin ? P
+  : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
+
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
+
+export interface MessageFns<T> {
+  encode(message: T, writer?: BinaryWriter): BinaryWriter;
+  decode(input: BinaryReader | Uint8Array, length?: number): T;
+  fromJSON(object: any): T;
+  toJSON(message: T): unknown;
+  create<I extends Exact<DeepPartial<T>, I>>(base?: I): T;
+  fromPartial<I extends Exact<DeepPartial<T>, I>>(object: I): T;
+}
diff --git a/src/server/middlewares/authenticate.ts b/src/server/middlewares/authenticate.ts
new file mode 100644
index 0000000..2ded942
--- /dev/null
+++ b/src/server/middlewares/authenticate.ts
@@ -0,0 +1,65 @@
+import { MiddlewareHandler } from "hono";
+import { getCookie, setCookie } from "hono/cookie";
+import { HTTPException } from "hono/http-exception";
+import { buildInternalMetadata, getAccountClient } from "../services/grpcClient";
+import { generateAndSetTokens } from "../utils";
+export const authenticate: MiddlewareHandler = async (ctx, next) => {
+    let payload
+    let cause
+    const jwtProvider = ctx.get("jwtProvider");
+    const token = getCookie(ctx, "access_token");
+
+    if (token) {
+        try {
+            payload = await jwtProvider.parseToken(token);
+        } catch (e) {
+            cause = e
+        }
+    }
+    
+    if (!payload) {
+        const refreshToken = getCookie(ctx, "refresh_token");
+
+        if (!refreshToken) {
+            throw new HTTPException(401, {
+                message: 'Unauthorized',
+            })
+        }
+        const refreshPayload = await jwtProvider.parseToken(refreshToken);
+        if (!refreshPayload) {
+            throw new HTTPException(401)
+        }
+        const redis = ctx.get("redis");
+        const refreshUuid = refreshPayload["refresh_uuid"];
+        const userId = await redis.get("refresh_uuid:" + refreshUuid);
+        if (!userId) {
+            throw new HTTPException(401)
+        }
+        const metadata = buildInternalMetadata();
+        const user = await getAccountClient().getUserById(userId, metadata);
+        
+        const tokenPair = await generateAndSetTokens(ctx, user);
+        if (!user?.id || !user?.role || user.id !== userId) {
+            throw new HTTPException(401)
+        }
+        payload = {
+            user_id: user.id,
+            email: user.email,
+            role: user.role,
+            token_id: tokenPair.accessUUID,
+        }
+    }
+    if (!payload.user_id || !payload.role) {
+        throw new HTTPException(401, {
+            message: 'Unauthorized',
+        })
+    }
+    ctx.set('jwtPayload', payload)
+    ctx.set('userId', payload.user_id)
+    ctx.set("role", payload.role)
+    setCookie(ctx, "timestamp", Date.now().toString(), {
+        httpOnly: false,
+        secure: false,
+    });
+    await next();
+};
\ No newline at end of file
diff --git a/src/server/middlewares/setup.ts b/src/server/middlewares/setup.ts
new file mode 100644
index 0000000..8175131
--- /dev/null
+++ b/src/server/middlewares/setup.ts
@@ -0,0 +1,98 @@
+import { RedisClient } from "bun";
+import type { Hono } from "hono";
+import { contextStorage } from "hono/context-storage";
+import { cors } from "hono/cors";
+import { languageDetector } from "hono/language";
+import isMobile from "is-mobile";
+import { JwtProvider } from "../utils/token";
+type AppFetch = (
+  input: string | Request | URL,
+  requestInit?: RequestInit
+) => Response | Promise<Response>;
+
+declare module "hono" {
+  interface ContextVariableMap {
+    fetch: AppFetch;
+    isMobile: boolean;
+    redis: RedisClient;
+    jwtProvider: JwtProvider;
+    jwtPayload: Record<string, unknown>;
+    userId: string;
+    role: string;
+    email: string;
+    nonce: Uint8Array<ArrayBufferLike>;
+  }
+}
+
+let redisClientPromise: Promise<RedisClient> | null = null;
+
+const getJwtSecret = () => {
+  const secret = (process.env.JWT_SECRET || process.env.STREAM_UI_JWT_SECRET || "").trim() || "secret_is_not_configured"
+  if (!secret) {
+    throw new Error("JWT secret is not configured");
+  }
+  return secret;
+};
+
+const getRedisUrl = () => {
+  const redisUrl = (process.env.REDIS_URL || process.env.STREAM_UI_REDIS_URL || "").trim() || "redis://:pass123@47.84.62.226:6379/3";
+  if (!redisUrl) {
+    throw new Error("Redis URL is not configured");
+  }
+  return redisUrl;
+};
+
+const getRedisClient = async (): Promise<RedisClient> => {
+  if (!redisClientPromise) {
+    const client = new RedisClient(getRedisUrl())
+    await client.connect();
+    return client;
+    // redisClientPromise = import("Bun").then(async ({ RedisClient }) => {
+    //   const client = new RedisClient(getRedisUrl()) as RedisClientLike;
+    //   await client.connect();
+    //   return client;
+    // });
+  }
+  // return await redisClientPromise;
+  return Promise.resolve() as any
+};
+
+export function setupMiddlewares(app: Hono) {
+  app.use(
+    "*",
+    languageDetector({
+      supportedLanguages: ["vi", "en"],
+      fallbackLanguage: "en",
+      lookupCookie: "i18next",
+      lookupFromHeaderKey: "accept-language",
+      order: ["cookie", "header"],
+    }),
+    contextStorage(),
+    async (c, next) => {
+      c.set("jwtProvider", JwtProvider.newJWTProvider(getJwtSecret()));
+      await next();
+    }
+  );
+
+  app.use(cors(), async (c, next) => {
+    c.set("fetch", app.request.bind(app));
+
+    const ua = c.req.header("User-Agent");
+    if (!ua) {
+      return c.json({ error: "User-Agent header is missing" }, 400);
+    }
+
+    c.set("isMobile", isMobile({ ua }));
+    await next();
+  });
+  app.use(async (c, next) => {
+    try {
+      const redisClient = await getRedisClient();
+      c.set("redis", redisClient);
+      await next();
+    } catch (e) {
+      console.error("Failed to connect to Redis", e);
+      return c.json({ error: "Redis unavailable" }, 500);
+    }
+  });
+}
diff --git a/src/server/routes/auth.ts b/src/server/routes/auth.ts
new file mode 100644
index 0000000..0fa2dd2
--- /dev/null
+++ b/src/server/routes/auth.ts
@@ -0,0 +1,126 @@
+import { Context, Hono } from "hono";
+import { deleteCookie, getCookie } from "hono/cookie";
+import { HTTPException } from "hono/http-exception";
+import { getAuthClient, getInternalGrpcMetadata } from "../services/grpcClient";
+import type { User } from "@/server/api/proto/app/v1/common";
+
+const authRoute = new Hono();
+
+const defaultGoogleFinalizePath = "/auth/google/finalize";
+
+export const ensureSessionUser = (user: User | null | undefined) => {
+  if (!user?.id || !user.email) {
+    throw new HTTPException(500, { message: "Invalid auth user payload" });
+  }
+
+  return {
+    id: user.id,
+    email: user.email,
+    role: user.role ?? "USER",
+    username: user.username ?? undefined,
+    avatar: user.avatar ?? undefined,
+    googleId: user.googleId ?? undefined,
+  };
+};
+
+const forwardGrpcCookies = (c: Context, cookies: readonly string[]) => {
+  for (const cookie of cookies) {
+    c.res.headers.append("set-cookie", cookie);
+  }
+};
+
+const authService = () => getAuthClient();
+
+const googleAuthReasonMap: Record<string, string> = {
+  access_denied: "access_denied",
+  missing_code: "missing_code",
+  exchange_failed: "exchange_failed",
+  userinfo_failed: "userinfo_failed",
+  userinfo_parse_failed: "userinfo_parse_failed",
+  missing_email: "missing_email",
+  create_user_failed: "create_user_failed",
+  update_user_failed: "update_user_failed",
+  reload_user_failed: "reload_user_failed",
+  session_failed: "session_failed",
+};
+
+const normalizeGoogleAuthReason = (reason: unknown) => {
+  const code = typeof reason === "string" ? reason.trim() : "";
+  if (!code) {
+    return "google_login_failed";
+  }
+  return googleAuthReasonMap[code] ?? "google_login_failed";
+};
+
+export const clearSessionCookies = (c: Context) => {
+  deleteCookie(c, "access_token", { path: "/" });
+  deleteCookie(c, "refresh_token", { path: "/" });
+};
+
+const frontendBaseUrl = () => (process.env.FRONTEND_BASE_URL || "").trim().replace(/\/$/, "");
+
+const googleFinalizeUrl = (status: string, reason?: string) => {
+  const base = frontendBaseUrl();
+  if (!base) {
+    return "";
+  }
+
+  const finalizePath = (process.env.GOOGLE_AUTH_FINALIZE_PATH || defaultGoogleFinalizePath).trim() || defaultGoogleFinalizePath;
+  const path = finalizePath.startsWith("/") ? finalizePath : `/${finalizePath}`;
+  const url = new URL(path, `${base}/`);
+  url.searchParams.set("status", status);
+  if (reason) {
+    url.searchParams.set("reason", reason);
+  }
+  return url.toString();
+};
+
+const redirectToGoogleFinalize = (c: Context, status: string, reason?: string) => {
+  const url = googleFinalizeUrl(status, reason);
+  if (!url) {
+    throw new HTTPException(500, { message: reason || "Google auth finalize URL is not configured" });
+  }
+  return c.redirect(url, 307);
+};
+
+authRoute.get("/google/callback", async (c) => {
+  const referralCookieName = "ref_username";
+  const oauthError = c.req.query("error")?.trim();
+  if (oauthError) {
+    return redirectToGoogleFinalize(c, "error", oauthError);
+  }
+
+  const code = c.req.query("code")?.trim();
+  if (!code) {
+    return redirectToGoogleFinalize(c, "error", "missing_code");
+  }
+
+  try {
+    const grpcCookies: string[] = [];
+    const refUsername = getCookie(c, referralCookieName)?.trim();
+    await authService().completeGoogleLogin(
+      { code, refUsername: refUsername || undefined },
+      getInternalGrpcMetadata(),
+      {
+        onMetadata: (metadata) => {
+          for (const value of metadata.get("set-cookie")) {
+            if (typeof value === "string" && value) {
+              grpcCookies.push(value);
+            }
+          }
+        },
+      },
+    );
+    deleteCookie(c, referralCookieName, { path: "/" });
+    forwardGrpcCookies(c, grpcCookies);
+    return redirectToGoogleFinalize(c, "success");
+  } catch (error) {
+    deleteCookie(c, referralCookieName, { path: "/" });
+    const reason = normalizeGoogleAuthReason(error instanceof Error ? error.message : undefined);
+    return redirectToGoogleFinalize(c, "error", reason);
+  }
+});
+
+export function registerAuthRoutes(app: Hono) {
+  app.route("/auth", authRoute);
+}
diff --git a/src/server/routes/rpc/admin.ts b/src/server/routes/rpc/admin.ts
new file mode 100644
index 0000000..ea3fb44
--- /dev/null
+++ b/src/server/routes/rpc/admin.ts
@@ -0,0 +1,528 @@
+import { validateFn } from "@hiogawa/tiny-rpc";
+import { getContext } from "hono/context-storage";
+import z from "zod";
+
+const optionalTrimmed = () => z.string().trim().min(1).optional();
+export const adminMethods = {
+    getAdminDashboard: async () => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    const response = await adminClient.getAdminDashboard({}, metadata);
+    return response.dashboard ?? null;
+  },
+  listAdminUsers: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      search: optionalTrimmed(),
+      role: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminUsers(data, metadata);
+  }),
+  createAdminUser: validateFn(
+    z.object({
+      email: z.string().trim().email(),
+      username: optionalTrimmed(),
+      password: z.string().min(6),
+      role: z.string().trim().min(1),
+      planId: optionalTrimmed(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminUser(data, metadata);
+  }),
+  updateAdminUser: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      email: z.string().trim().email().optional(),
+      username: optionalTrimmed(),
+      password: z.string().min(6).optional(),
+      role: z.string().trim().min(1).optional(),
+      planId: optionalTrimmed(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminUser(data, metadata);
+  }),
+  getAdminUser: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.getAdminUser(data, metadata);
+  }),
+  updateAdminUserReferralSettings: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      refUsername: optionalTrimmed(),
+      clearReferrer: z.boolean().optional(),
+      referralEligible: z.boolean().optional(),
+      referralRewardBps: z.number().int().min(0).max(10000).optional(),
+      clearReferralRewardBps: z.boolean().optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminUserReferralSettings(data, metadata);
+  }),
+  updateAdminUserRole: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      role: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminUserRole(data, metadata);
+  }),
+  deleteAdminUser: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.deleteAdminUser(data, metadata);
+  }),
+  listAdminVideos: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      search: optionalTrimmed(),
+      userId: optionalTrimmed(),
+      status: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminVideos(data, metadata);
+  }),
+  createAdminVideo: validateFn(
+    z.object({
+      userId: z.string().trim().min(1),
+      title: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      url: z.string().trim().url(),
+      size: z.number().min(0).optional(),
+      duration: z.number().min(0).optional(),
+      format: optionalTrimmed(),
+      status: z.string().trim().min(1),
+      adTemplateId: optionalTrimmed(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminVideo(data, metadata);
+  }),
+  updateAdminVideo: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      userId: z.string().trim().min(1),
+      title: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      url: z.string().trim().url(),
+      size: z.number().min(0).optional(),
+      duration: z.number().min(0).optional(),
+      format: optionalTrimmed(),
+      status: z.string().trim().min(1),
+      adTemplateId: optionalTrimmed(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminVideo(data, metadata);
+  }),
+  deleteAdminVideo: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.deleteAdminVideo(data, metadata);
+  }),
+  listAdminPayments: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      userId: optionalTrimmed(),
+      status: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminPayments(data, metadata);
+  }),
+  createAdminPayment: validateFn(
+    z.object({
+      userId: z.string().trim().min(1),
+      planId: z.string().trim().min(1),
+      termMonths: z.number().int().min(1),
+      paymentMethod: z.string().trim().min(1),
+      topupAmount: z.number().min(0).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminPayment(data, metadata);
+  }),
+  updateAdminPayment: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      status: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminPayment(data, metadata);
+  }),
+  listAdminPlans: async () => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminPlans({}, metadata);
+  },
+  createAdminPlan: validateFn(
+    z.object({
+      name: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      features: z.array(z.string().trim().min(1)).optional(),
+      price: z.number().min(0),
+      cycle: z.string().trim().min(1),
+      storageLimit: z.number().int().min(1),
+      uploadLimit: z.number().int().min(1),
+      isActive: z.boolean(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminPlan(data, metadata);
+  }),
+  updateAdminPlan: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      name: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      features: z.array(z.string().trim().min(1)).optional(),
+      price: z.number().min(0),
+      cycle: z.string().trim().min(1),
+      storageLimit: z.number().int().min(1),
+      uploadLimit: z.number().int().min(1),
+      isActive: z.boolean(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminPlan(data, metadata);
+  }),
+  deleteAdminPlan: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.deleteAdminPlan(data, metadata);
+  }),
+  listAdminAdTemplates: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      userId: optionalTrimmed(),
+      search: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminAdTemplates(data, metadata);
+  }),
+  createAdminAdTemplate: validateFn(
+    z.object({
+      userId: z.string().trim().min(1),
+      name: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      vastTagUrl: z.string().trim().url(),
+      adFormat: z.string().trim().min(1).optional(),
+      duration: z.number().int().min(0).optional(),
+      isActive: z.boolean(),
+      isDefault: z.boolean(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminAdTemplate(data, metadata);
+  }),
+  updateAdminAdTemplate: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      userId: z.string().trim().min(1),
+      name: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      vastTagUrl: z.string().trim().url(),
+      adFormat: z.string().trim().min(1).optional(),
+      duration: z.number().int().min(0).optional(),
+      isActive: z.boolean(),
+      isDefault: z.boolean(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminAdTemplate(data, metadata);
+  }),
+  deleteAdminAdTemplate: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.deleteAdminAdTemplate(data, metadata);
+  }),
+  listAdminPopupAds: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      userId: optionalTrimmed(),
+      search: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminPopupAds(data, metadata);
+  }),
+  createAdminPopupAd: validateFn(
+    z.object({
+      userId: z.string().trim().min(1),
+      type: z.enum(['url', 'script']),
+      label: z.string().trim().min(1),
+      value: z.string().trim().min(1),
+      isActive: z.boolean().optional(),
+      maxTriggersPerSession: z.number().int().min(1).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminPopupAd(data, metadata);
+  }),
+  updateAdminPopupAd: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      userId: z.string().trim().min(1),
+      type: z.enum(['url', 'script']),
+      label: z.string().trim().min(1),
+      value: z.string().trim().min(1),
+      isActive: z.boolean().optional(),
+      maxTriggersPerSession: z.number().int().min(1).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminPopupAd(data, metadata);
+  }),
+  deleteAdminPopupAd: validateFn(
+    z.object({ id: z.string().trim().min(1) }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.deleteAdminPopupAd(data, metadata);
+  }),
+  listAdminPlayerConfigs: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      userId: optionalTrimmed(),
+      search: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminPlayerConfigs(data, metadata);
+  }),
+  createAdminPlayerConfig: validateFn(
+    z.object({
+      userId: z.string().trim().min(1),
+      name: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      autoplay: z.boolean().optional(),
+      loop: z.boolean().optional(),
+      muted: z.boolean().optional(),
+      showControls: z.boolean().optional(),
+      pip: z.boolean().optional(),
+      airplay: z.boolean().optional(),
+      chromecast: z.boolean().optional(),
+      encrytionM3u8: z.boolean().optional(),
+      logoUrl: z.string().trim().optional(),
+      isActive: z.boolean(),
+      isDefault: z.boolean(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminPlayerConfig(data, metadata);
+  }),
+  updateAdminPlayerConfig: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      userId: z.string().trim().min(1),
+      name: z.string().trim().min(1),
+      description: optionalTrimmed(),
+      autoplay: z.boolean().optional(),
+      loop: z.boolean().optional(),
+      muted: z.boolean().optional(),
+      showControls: z.boolean().optional(),
+      pip: z.boolean().optional(),
+      airplay: z.boolean().optional(),
+      chromecast: z.boolean().optional(),
+      encrytionM3u8: z.boolean().optional(),
+      logoUrl: z.string().trim().optional(),
+      isActive: z.boolean(),
+      isDefault: z.boolean(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminPlayerConfig(data, metadata);
+  }),
+  deleteAdminPlayerConfig: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.deleteAdminPlayerConfig(data, metadata);
+  }),
+  listAdminJobs: validateFn(
+    z.object({
+      cursor: optionalTrimmed(),
+      pageSize: z.number().int().min(1).max(100).optional(),
+      offset: z.number().int().min(0).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      agentId: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminJobs(data, metadata);
+  }),
+  getAdminJob: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.getAdminJob(data, metadata);
+  }),
+  getAdminJobLogs: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.getAdminJobLogs(data, metadata);
+  }),
+  createAdminJob: validateFn(
+    z.object({
+      command: z.string().trim().min(1),
+      image: optionalTrimmed(),
+      env: z.record(z.string(), z.string()).optional(),
+      priority: z.number().int().optional(),
+      userId: optionalTrimmed(),
+      name: optionalTrimmed(),
+      timeLimit: z.number().int().min(0).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.createAdminJob(data, metadata);
+  }),
+  cancelAdminJob: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.cancelAdminJob(data, metadata);
+  }),
+  retryAdminJob: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.retryAdminJob(data, metadata);
+  }),
+  listAdminAgents: async () => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.listAdminAgents({}, metadata);
+  },
+  restartAdminAgent: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.restartAdminAgent(data, metadata);
+  }),
+  updateAdminAgent: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adminClient = context.get("adminClient");
+    const metadata = context.get("grpcMetadata");
+    return await adminClient.updateAdminAgent(data, metadata);
+  }),
+}
\ No newline at end of file
diff --git a/src/server/routes/rpc/auth.ts b/src/server/routes/rpc/auth.ts
new file mode 100644
index 0000000..425326b
--- /dev/null
+++ b/src/server/routes/rpc/auth.ts
@@ -0,0 +1,107 @@
+import { clearSessionCookies, ensureSessionUser } from "@/server/routes/auth";
+import { generateAndSetTokens } from "@/server/utils";
+import { type Metadata } from "@grpc/grpc-js";
+import { validateFn } from "@hiogawa/tiny-rpc";
+import { getContext } from "hono/context-storage";
+import z from "zod";
+
+const collectGrpcCookies = (metadata: Metadata) => {
+  const context = getContext();
+
+  for (const value of metadata.get("set-cookie")) {
+    if (typeof value === "string" && value) {
+      context.res.headers.append("set-cookie", value);
+    }
+  }
+};
+
+export const publicAuthMethods = {
+  login: validateFn(
+    z.object({
+      email: z.string().email("Invalid email or password"),
+      password: z.string().min(6, "Invalid email or password"),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const authClient = context.get("authClient");
+    const metadata = context.get("internalGrpcMetadata");
+    const response = await authClient.login(data, metadata, {
+      onMetadata: collectGrpcCookies,
+    });
+    await generateAndSetTokens(context, response.user!);
+    return { user: ensureSessionUser(response.user) };
+  }),
+  register: validateFn(
+    z.object({
+      email: z.string().email("Invalid email"),
+      username: z.string().min(3, "Username must be at least 3 characters"),
+      password: z.string().min(6, "Password must be at least 6 characters"),
+      refUsername: z.string().trim().min(1).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const authClient = context.get("authClient");
+    const metadata = context.get("internalGrpcMetadata");
+    const response = await authClient.register({
+      email: data.email,
+      username: data.username,
+      password: data.password,
+      refUsername: data.refUsername,
+    }, metadata);
+
+    return { user: ensureSessionUser(response.user) };
+  }),
+  forgotPassword: validateFn(
+    z.object({
+      email: z.string().email("Invalid email"),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const authClient = context.get("authClient");
+    const metadata = context.get("internalGrpcMetadata");
+    const response = await authClient.forgotPassword(data, metadata);
+    return { message: response.message || "If email exists, a reset link has been sent" };
+  }),
+  resetPassword: validateFn(
+    z.object({
+      token: z.string().trim().min(1),
+      newPassword: z.string().min(6),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const authClient = context.get("authClient");
+    const metadata = context.get("internalGrpcMetadata");
+    const response = await authClient.resetPassword(data, metadata);
+    return { message: response.message || "Password reset successfully" };
+  }),
+  getGoogleLoginUrl: async () => {
+    const context = getContext();
+    const authClient = context.get("authClient");
+    const metadata = context.get("internalGrpcMetadata");
+    return await authClient.getGoogleLoginUrl({}, metadata);
+  },
+};
+
+export const protectedAuthMethods = {
+  changePassword: validateFn(
+    z.object({
+      currentPassword: z.string().min(6),
+      newPassword: z.string().min(6),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const authClient = context.get("authClient");
+    const metadata = context.get("grpcMetadata");
+    const response = await authClient.changePassword(data, metadata);
+    return { message: response.message || "Password changed successfully" };
+  }),
+  logout: async () => {
+    const context = getContext();
+    const authClient = context.get("authClient");
+    const metadata = context.get("internalGrpcMetadata");
+
+    await authClient.logout({}, metadata);
+    clearSessionCookies(context);
+    return { message: "Logged out" };
+  },
+};
diff --git a/src/server/routes/rpc/index.ts b/src/server/routes/rpc/index.ts
new file mode 100644
index 0000000..bcff6c1
--- /dev/null
+++ b/src/server/routes/rpc/index.ts
@@ -0,0 +1,77 @@
+import { authenticate } from "@/server/middlewares/authenticate";
+import { getGrpcMetadataFromContext } from "@/server/services/grpcClient";
+import { parse, stringify } from "@/shared/secure-json-transformer";
+import { Metadata } from "@grpc/grpc-js";
+import { exposeTinyRpc, httpServerAdapter } from "@hiogawa/tiny-rpc";
+import { Hono } from "hono";
+import { protectedAuthMethods, publicAuthMethods } from "./auth";
+import { meMethods } from "./me";
+import { getContext } from "hono/context-storage";
+import { adminMethods } from "./admin";
+
+declare module "hono" {
+  interface ContextVariableMap {
+    grpcMetadata: Metadata;
+  }
+}
+
+const protectedRoutes = {
+  health: () => ({ ok: true }),
+  ...protectedAuthMethods,
+  ...meMethods,
+  ...adminMethods
+};
+
+const publicRoutes = {
+  ...publicAuthMethods,
+};
+
+export type RpcRoutes = typeof protectedRoutes & typeof publicRoutes;
+export const endpoint = "/rpc/*";
+export const publicEndpoint = "/rpc-public/*";
+export const pathsForGET: (keyof typeof protectedRoutes)[] = ["health"];
+
+export function registerRpcRoutes(app: Hono) {
+  const JSONProcessor: JsonTransformer = {
+    parse: (v) => parse(v, () => getContext()?.req.header()),
+    stringify: (v) =>
+      stringify(v, (headers) => {
+        const ctx = getContext();
+        if (ctx) {
+          Object.entries(headers).forEach(([k, v]) => {
+            ctx.header(k, v);
+          });
+          // ctx.header()
+        }
+      }),
+  };
+  const protectedHandler = exposeTinyRpc({
+    routes: protectedRoutes,
+    adapter: httpServerAdapter({ endpoint: "/rpc", 
+      // JSON: JSONProcessor
+     }),
+  });
+  app.use(publicEndpoint, async (c, next) => {
+    const publicHandler = exposeTinyRpc({
+      routes: publicRoutes,
+      adapter: httpServerAdapter({
+        endpoint: "/rpc-public",
+        // JSON: JSONProcessor,
+      }),
+    });
+    const res = await publicHandler({ request: c.req.raw });
+    if (res) {
+      return res;
+    }
+    return await next();
+  });
+  app.use(endpoint, authenticate, async (c, next) => {
+    c.set("grpcMetadata", getGrpcMetadataFromContext());
+
+    const res = await protectedHandler({ request: c.req.raw });
+    if (res) {
+      return res;
+    }
+    return await next();
+  });
+}
diff --git a/src/server/routes/rpc/key-resolver.ts b/src/server/routes/rpc/key-resolver.ts
new file mode 100644
index 0000000..27cd82b
--- /dev/null
+++ b/src/server/routes/rpc/key-resolver.ts
@@ -0,0 +1,47 @@
+// backend/key-resolver.ts
+
+export type ServerKeyPair = {
+  kid: string;
+  publicKeyPem: string;
+  privateKeyPem: string;
+  active?: boolean;
+};
+
+export class StaticKeyResolver {
+  private readonly keys = new Map<string, ServerKeyPair>();
+  private activeKid: string;
+
+  constructor(pairs: ServerKeyPair[]) {
+    if (!pairs.length) throw new Error("At least one key pair is required");
+
+    for (const pair of pairs) {
+      this.keys.set(pair.kid, pair);
+    }
+
+    const active = pairs.find((x) => x.active) ?? pairs[0];
+    this.activeKid = active.kid;
+  }
+
+  getPrivateKeyByKid(kid: string): string | null {
+    return this.keys.get(kid)?.privateKeyPem ?? null;
+  }
+
+  getPublicConfig() {
+    const pair = this.keys.get(this.activeKid);
+    if (!pair) throw new Error("Active key not found");
+
+    return {
+      kid: pair.kid,
+      publicKeyPem: pair.publicKeyPem,
+    };
+  }
+
+  getActiveKid(): string {
+    return this.activeKid;
+  }
+
+  setActiveKid(kid: string): void {
+    if (!this.keys.has(kid)) throw new Error(`Unknown kid: ${kid}`);
+    this.activeKid = kid;
+  }
+}
\ No newline at end of file
diff --git a/src/server/routes/rpc/me.ts b/src/server/routes/rpc/me.ts
new file mode 100644
index 0000000..3a72e70
--- /dev/null
+++ b/src/server/routes/rpc/me.ts
@@ -0,0 +1,460 @@
+// import { validateFn } from "@hiogawa/tiny-rpc";
+import { validateFn } from "@/server/utils";
+import { createManifest, saveManifest, validateChunkUrls } from "@/server/utils/s3Helper";
+import { getContext } from "hono/context-storage";
+import z from "zod";
+
+const optionalTrimmed = () => z.string().trim().min(1).optional();
+
+export const meMethods = {
+  getMe: async () => {
+    const context = getContext();
+    const accountClient = context.get("accountClient");
+    const metadata = context.get("grpcMetadata");
+    const response = await accountClient.getMe({}, metadata);
+    return response.user ?? null;
+  },
+  updateMe: validateFn(
+    z.object({
+      username: z.string().min(3).optional(),
+      email: z.string().email().optional(),
+      language: z.string().optional(),
+      locale: z.string().optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const accountClient = context.get("accountClient");
+    const metadata = context.get("grpcMetadata");
+    const response = await accountClient.updateMe(data, metadata);
+    return response.user ?? null;
+  }),
+  deleteMe: async () => {
+    const context = getContext();
+    const accountClient = context.get("accountClient");
+    const metadata = context.get("grpcMetadata");
+    return await accountClient.deleteMe({}, metadata);
+  },
+  clearMyData: async () => {
+    const context = getContext();
+    const accountClient = context.get("accountClient");
+    const metadata = context.get("grpcMetadata");
+    return await accountClient.clearMyData({}, metadata);
+  },
+  listVideos: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      search: optionalTrimmed(),
+      status: optionalTrimmed(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const videosClient = context.get("videosClient");
+    const metadata = context.get("grpcMetadata");
+    return await videosClient.listVideos(data, metadata);
+  }),
+  getVideo: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const videosClient = context.get("videosClient");
+    const metadata = context.get("grpcMetadata");
+    return await videosClient.getVideo(data, metadata);
+  }),
+  updateVideo: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      title: z.string().trim().min(1),
+      description: z.string().optional(),
+      url: optionalTrimmed(),
+      size: z.number().min(0).optional(),
+      duration: z.number().min(0).optional(),
+      format: optionalTrimmed(),
+      status: optionalTrimmed(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const videosClient = context.get("videosClient");
+    const metadata = context.get("grpcMetadata");
+    return await videosClient.updateVideo(data, metadata);
+  }),
+  deleteVideo: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const videosClient = context.get("videosClient");
+    const metadata = context.get("grpcMetadata");
+    return await videosClient.deleteVideo(data, metadata);
+  }),
+  listAdTemplates: async () => {
+    const context = getContext();
+    const adTemplatesClient = context.get("adTemplatesClient");
+    const metadata = context.get("grpcMetadata");
+    return await adTemplatesClient.listAdTemplates({}, metadata);
+  },
+  createAdTemplate: validateFn(
+    z.object({
+      name: z.string().trim().min(1),
+      description: z.string().optional(),
+      vastTagUrl: z.string().trim().url(),
+      adFormat: optionalTrimmed(),
+      duration: z.number().int().min(0).optional(),
+      isActive: z.boolean().optional(),
+      isDefault: z.boolean().optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adTemplatesClient = context.get("adTemplatesClient");
+    const metadata = context.get("grpcMetadata");
+    return await adTemplatesClient.createAdTemplate(data, metadata);
+  }),
+  updateAdTemplate: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      name: z.string().trim().min(1),
+      description: z.string().optional(),
+      vastTagUrl: z.string().trim().url(),
+      adFormat: optionalTrimmed(),
+      duration: z.number().int().min(0).optional(),
+      isActive: z.boolean().optional(),
+      isDefault: z.boolean().optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adTemplatesClient = context.get("adTemplatesClient");
+    const metadata = context.get("grpcMetadata");
+    return await adTemplatesClient.updateAdTemplate(data, metadata);
+  }),
+  deleteAdTemplate: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const adTemplatesClient = context.get("adTemplatesClient");
+    const metadata = context.get("grpcMetadata");
+    return await adTemplatesClient.deleteAdTemplate(data, metadata);
+  }),
+  listPopupAds: validateFn(
+    z.object({
+      page: z.number().int().min(1).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+    }).optional().default({}),
+  )(async (data) => {
+    const context = getContext();
+    const popupAdsClient = context.get("popupAdsClient");
+    const metadata = context.get("grpcMetadata");
+    return await popupAdsClient.listPopupAds(data, metadata);
+  }),
+  createPopupAd: validateFn(
+    z.object({
+      type: z.enum(['url', 'script']),
+      label: z.string().trim().min(1),
+      value: z.string().trim().min(1),
+      isActive: z.boolean().optional(),
+      maxTriggersPerSession: z.number().int().min(1).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const popupAdsClient = context.get("popupAdsClient");
+    const metadata = context.get("grpcMetadata");
+    return await popupAdsClient.createPopupAd(data, metadata);
+  }),
+  updatePopupAd: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      type: z.enum(['url', 'script']),
+      label: z.string().trim().min(1),
+      value: z.string().trim().min(1),
+      isActive: z.boolean().optional(),
+      maxTriggersPerSession: z.number().int().min(1).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const popupAdsClient = context.get("popupAdsClient");
+    const metadata = context.get("grpcMetadata");
+    return await popupAdsClient.updatePopupAd(data, metadata);
+  }),
+  deletePopupAd: validateFn(
+    z.object({ id: z.string().trim().min(1) }),
+  )(async (data) => {
+    const context = getContext();
+    const popupAdsClient = context.get("popupAdsClient");
+    const metadata = context.get("grpcMetadata");
+    return await popupAdsClient.deletePopupAd(data, metadata);
+  }),
+  getActivePopupAd: async () => {
+    const context = getContext();
+    const popupAdsClient = context.get("popupAdsClient");
+    const metadata = context.get("grpcMetadata");
+    return await popupAdsClient.getActivePopupAd({}, metadata);
+  },
+  listPlayerConfigs: async () => {
+    const context = getContext();
+    const playerConfigsClient = context.get("playerConfigsClient");
+    const metadata = context.get("grpcMetadata");
+    return await playerConfigsClient.listPlayerConfigs({}, metadata);
+  },
+  createPlayerConfig: validateFn(
+    z.object({
+      name: z.string().trim().min(1),
+      description: z.string().optional(),
+      autoplay: z.boolean().optional(),
+      loop: z.boolean().optional(),
+      muted: z.boolean().optional(),
+      showControls: z.boolean().optional(),
+      pip: z.boolean().optional(),
+      airplay: z.boolean().optional(),
+      chromecast: z.boolean().optional(),
+      encrytionM3u8: z.boolean().optional(),
+      logoUrl: z.string().trim().optional(),
+      isActive: z.boolean().optional(),
+      isDefault: z.boolean().optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const playerConfigsClient = context.get("playerConfigsClient");
+    const metadata = context.get("grpcMetadata");
+    return await playerConfigsClient.createPlayerConfig(data, metadata);
+  }),
+  updatePlayerConfig: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+      name: z.string().trim().min(1),
+      description: z.string().optional(),
+      autoplay: z.boolean().optional(),
+      loop: z.boolean().optional(),
+      muted: z.boolean().optional(),
+      showControls: z.boolean().optional(),
+      pip: z.boolean().optional(),
+      airplay: z.boolean().optional(),
+      chromecast: z.boolean().optional(),
+      encrytionM3u8: z.boolean().optional(),
+      logoUrl: z.string().trim().optional(),
+      isActive: z.boolean().optional(),
+      isDefault: z.boolean().optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const playerConfigsClient = context.get("playerConfigsClient");
+    const metadata = context.get("grpcMetadata");
+    return await playerConfigsClient.updatePlayerConfig(data, metadata);
+  }),
+  deletePlayerConfig: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const playerConfigsClient = context.get("playerConfigsClient");
+    const metadata = context.get("grpcMetadata");
+    return await playerConfigsClient.deletePlayerConfig(data, metadata);
+  }),
+  getPreferences: async () => {
+    const context = getContext();
+    const accountClient = context.get("accountClient");
+    const metadata = context.get("grpcMetadata");
+    return await accountClient.getPreferences({}, metadata);
+  },
+  updatePreferences: validateFn(
+    z.object({
+      emailNotifications: z.boolean().optional(),
+      pushNotifications: z.boolean().optional(),
+      marketingNotifications: z.boolean().optional(),
+      telegramNotifications: z.boolean().optional(),
+      language: z.string().optional(),
+      locale: z.string().optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const accountClient = context.get("accountClient");
+    const metadata = context.get("grpcMetadata");
+    return await accountClient.updatePreferences(data, metadata);
+  }),
+  listNotifications: async () => {
+    const context = getContext();
+    const notificationsClient = context.get("notificationsClient");
+    const metadata = context.get("grpcMetadata");
+    return await notificationsClient.listNotifications({}, metadata);
+  },
+  markNotificationRead: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const notificationsClient = context.get("notificationsClient");
+    const metadata = context.get("grpcMetadata");
+    return await notificationsClient.markNotificationRead(data, metadata);
+  }),
+  markAllNotificationsRead: async () => {
+    const context = getContext();
+    const notificationsClient = context.get("notificationsClient");
+    const metadata = context.get("grpcMetadata");
+    return await notificationsClient.markAllNotificationsRead({}, metadata);
+  },
+  deleteNotification: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const notificationsClient = context.get("notificationsClient");
+    const metadata = context.get("grpcMetadata");
+    return await notificationsClient.deleteNotification(data, metadata);
+  }),
+  clearNotifications: async () => {
+    const context = getContext();
+    const notificationsClient = context.get("notificationsClient");
+    const metadata = context.get("grpcMetadata");
+    return await notificationsClient.clearNotifications({}, metadata);
+  },
+  getUploadUrl: validateFn(
+    z.object({
+      filename: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const videosClient = context.get("videosClient");
+    const metadata = context.get("grpcMetadata");
+    return await videosClient.getUploadUrl(data, metadata);
+  }),
+  createVideo: validateFn(
+    z.object({
+      title: z.string().trim().min(1),
+      description: z.string().optional(),
+      url: z.string().trim().min(1),
+      size: z.number().min(0).optional(),
+      duration: z.number().min(0).optional(),
+      format: optionalTrimmed(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const videosClient = context.get("videosClient");
+    const metadata = context.get("grpcMetadata");
+    return await videosClient.createVideo(data, metadata);
+  }),
+  getUsage: async () => {
+    const context = getContext();
+    const accountClient = context.get("accountClient");
+    const metadata = context.get("grpcMetadata");
+    return await accountClient.getUsage({}, metadata);
+  },
+  listDomains: async () => {
+    const context = getContext();
+    const domainsClient = context.get("domainsClient");
+    const metadata = context.get("grpcMetadata");
+    return await domainsClient.listDomains({}, metadata);
+  },
+  createDomain: validateFn(
+    z.object({
+      name: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const domainsClient = context.get("domainsClient");
+    const metadata = context.get("grpcMetadata");
+    return await domainsClient.createDomain(data, metadata);
+  }),
+  deleteDomain: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const domainsClient = context.get("domainsClient");
+    const metadata = context.get("grpcMetadata");
+    return await domainsClient.deleteDomain(data, metadata);
+  }),
+  listPlans: async () => {
+    const context = getContext();
+    const plansClient = context.get("plansClient");
+    const metadata = context.get("grpcMetadata");
+    return await plansClient.listPlans({}, metadata);
+  },
+  listPaymentHistory: validateFn(
+    z.number().int().min(1).optional(),
+    z.number().int().min(1).max(100).optional(),
+  )(async (page, limit) => {
+    const context = getContext();
+    const paymentsClient = context.get("paymentsClient");
+    const metadata = context.get("grpcMetadata");
+    return await paymentsClient.listPaymentHistory({ page, limit }, metadata);
+  }),
+  createPayment: validateFn(
+    z.object({
+      planId: z.string().trim().min(1),
+      termMonths: z.number().int().min(1),
+      paymentMethod: z.string().trim().min(1),
+      topupAmount: z.number().min(0).optional(),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const paymentsClient = context.get("paymentsClient");
+    const metadata = context.get("grpcMetadata");
+    return await paymentsClient.createPayment(data, metadata);
+  }),
+  topupWallet: validateFn(
+    z.object({
+      amount: z.number().min(0.01),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const paymentsClient = context.get("paymentsClient");
+    const metadata = context.get("grpcMetadata");
+    return await paymentsClient.topupWallet(data, metadata);
+  }),
+  downloadInvoice: validateFn(
+    z.object({
+      id: z.string().trim().min(1),
+    }),
+  )(async (data) => {
+    const context = getContext();
+    const paymentsClient = context.get("paymentsClient");
+    const metadata = context.get("grpcMetadata");
+    return await paymentsClient.downloadInvoice(data, metadata);
+  }),
+  merge: validateFn(
+      z.string().trim().min(6).includes("."),
+      z.array(z.url()).min(1).refine(validateChunkUrls, { message: "One or more chunk URLs are invalid or not allowed" }),
+      z.number().min(5 * 1024 * 1024),// min 5mb
+    )
+  (async (filename, chunks, size) => {
+    const manifest = createManifest(filename, chunks, size);
+    await saveManifest(manifest);
+    return manifest;
+    // return await videosClient.merge({ name, chunks, size }, metadata);
+  }),
+};
+// export function registerMergeRoutes(app: Hono) {
+//   app.post('/merge', authMiddleware, async (c) => {
+//     try {
+//       const body = await c.req.json();
+//       const { filename, chunks, size } = body;
+
+//       if (!filename || !Array.isArray(chunks) || chunks.length === 0) {
+//         return c.json({ error: 'invalid payload' }, 400);
+//       }
+
+//       const hostError = validateChunkUrls(chunks);
+//       if (hostError) return c.json({ error: hostError }, 400);
+
+//       const manifest = createManifest(filename, chunks, size);
+//       await saveManifest(manifest);
+
+//       return c.json({
+//         status: 'ok',
+//         id: manifest.id,
+//         filename: manifest.filename,
+//         total_parts: manifest.total_parts,
+//         size: manifest.size,
+//       });
+//     } catch (e: any) {
+//       return c.json({ error: e?.message ?? String(e) }, 500);
+//     }
+//   });
+// }
\ No newline at end of file
diff --git a/src/server/routes/ssr.ts b/src/server/routes/ssr.ts
new file mode 100644
index 0000000..ce00fe7
--- /dev/null
+++ b/src/server/routes/ssr.ts
@@ -0,0 +1,80 @@
+import { serializeQueryCache } from '@pinia/colada';
+import { renderSSRHead } from '@unhead/vue/server';
+import { streamText } from 'hono/streaming';
+import { renderToWebStream } from 'vue/server-renderer';
+
+import { buildBootstrapScript } from '@/lib/manifest';
+import { createApp } from '@/main';
+import { htmlEscape } from '@/server/utils/htmlEscape';
+import { useAuthStore } from '@/stores/auth';
+import type { Hono } from 'hono';
+import nacl from 'tweetnacl';
+import { toBase64 } from '@/shared/secure-json-transformer';
+
+export function registerSSRRoutes(app: Hono) {
+  app.get("*", async (c) => {
+    const nonce = nacl.randomBytes(nacl.box.nonceLength);
+    c.set("nonce", nonce);
+    const url = new URL(c.req.url);
+    const lang = c.get("language");
+    const { app: vueApp, router, head, pinia, bodyClass, queryCache } = await createApp(lang);
+
+    vueApp.provide("honoContext", c);
+
+    const auth = useAuthStore();
+    auth.$reset();
+    await auth.init();
+
+    await router.push(url.pathname);
+    await router.isReady();
+
+    return streamText(c, async (stream) => {
+      c.header("Content-Type", "text/html; charset=utf-8");
+      c.header("Content-Encoding", "Identity");
+      c.header("nonce", toBase64(nonce));
+      const ctx: Record<string, any> = {};
+      const appStream = renderToWebStream(vueApp, ctx);
+
+      // HTML Head
+      await stream.write(`<!DOCTYPE html><html lang='${auth.user?.language ?? lang}'><head>`);
+      await stream.write("<base href='" + url.origin + "'/>");
+
+      // SSR Head tags
+      const headResult = await renderSSRHead(head);
+      await stream.write(headResult.headTags.replace(/\n/g, ""));
+
+      // Fonts & Favicon
+      await stream.write('<link rel="icon" href="/favicon.ico">');
+      await stream.write(`<link rel="preconnect" href="https://fonts.googleapis.com" />`);
+      await stream.write(`<link href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap" rel="stylesheet" />`);
+
+      // Bootstrap scripts
+      await stream.write(buildBootstrapScript());
+
+      // Body start
+      await stream.write(`</head><body class='${bodyClass}'>`);
+
+      // App content
+      await stream.pipe(appStream);
+
+      // Cleanup context
+      delete ctx.teleports;
+      delete ctx.__teleportBuffers;
+      delete ctx.modules;
+
+      // Inject state
+      Object.assign(ctx, {
+        $p: pinia.state.value,
+        $colada: serializeQueryCache(queryCache),
+        $locale: auth.user?.language ?? lang,
+      });
+
+      // App data script
+      const appDataScript = `<script type="application/json" data-ssr="true" id="__APP_DATA__" nonce="${toBase64(nonce)}">${htmlEscape(JSON.stringify(ctx))}</script>`;
+      await stream.write(appDataScript);
+
+      // Close HTML
+      await stream.write("</body></html>");
+    });
+  });
+}
diff --git a/src/server/routes/wellKnown.ts b/src/server/routes/wellKnown.ts
new file mode 100644
index 0000000..b318c44
--- /dev/null
+++ b/src/server/routes/wellKnown.ts
@@ -0,0 +1,26 @@
+import type { Hono } from 'hono';
+
+export function registerWellKnownRoutes(app: Hono) {
+  app.get("/.well-known/*", (c) => {
+    return c.json({ ok: true });
+  });
+  app.get("/health/live", (c) => {
+    return c.json({ status: "alive" });
+  });
+  app.get("/health/ready", (c) => {
+    return c.json({ status: "ready" });
+  });
+  app.get("/health/detailed", (c) => {
+    return c.json({ status: "detailed", uptime: process.uptime() });
+  });
+  // app.get("/trpc-secure-config", (c) => {
+  //   return c.json({ kid: process.env.TRPC_SECURE_KID, publicKeyBase64: process.env.TRPC_SECURE_PUBLIC_KEY });
+  // });
+  app.get("/trpc-secure-config", (c) => {
+    return c.json({ kid: 'xUJh4/ADCkL/mZTsxSofIVTgLrTLw2C8h/X8/StUc0E=', publicKeyBase64: 'hvtS8b4RWXkau3B2UXbWhCV1NxS/97DGLfcftf/0TG8=' });
+  });
+  // app.get("/metrics", (c) => {
+  //   //TODO: Implement metrics endpoint/ Prometheus integration
+  //   return c.json({ message: "Metrics endpoint" });
+  // });
+}
diff --git a/src/server/services/grpcClient.ts b/src/server/services/grpcClient.ts
new file mode 100644
index 0000000..afef6bb
--- /dev/null
+++ b/src/server/services/grpcClient.ts
@@ -0,0 +1,242 @@
+import {
+  AccountClient,
+  NotificationsClient,
+  type AccountClient as AccountClientType,
+  type NotificationsClient as NotificationsClientType,
+} from "@/server/api/proto/app/v1/account";
+import {
+  AdminClient,
+  type AdminClient as AdminClientType,
+} from "@/server/api/proto/app/v1/admin";
+import {
+  AuthClient,
+  type AuthClient as AuthClientType,
+} from "@/server/api/proto/app/v1/auth";
+import {
+  AdTemplatesClient,
+  DomainsClient,
+  PlayerConfigsClient,
+  PlansClient,
+  PopupAdsClient,
+  type AdTemplatesClient as AdTemplatesClientType,
+  type DomainsClient as DomainsClientType,
+  type PlayerConfigsClient as PlayerConfigsClientType,
+  type PlansClient as PlansClientType,
+  type PopupAdsClient as PopupAdsClientType,
+} from "@/server/api/proto/app/v1/catalog";
+import {
+  PaymentsClient,
+  type PaymentsClient as PaymentsClientType,
+} from "@/server/api/proto/app/v1/payments";
+import {
+  VideosClient,
+  type VideosClient as VideosClientType,
+} from "@/server/api/proto/app/v1/videos";
+import { ChannelCredentials, Metadata, credentials } from "@grpc/grpc-js";
+import type { Hono } from "hono";
+import { tryGetContext } from "hono/context-storage";
+import { PromisifiedClient, promisifyClient } from "../utils/grpcHelper";
+
+declare module "hono" {
+  interface ContextVariableMap {
+    accountClient: PromisifiedClient<AccountClientType>;
+    authClient: PromisifiedClient<AuthClientType>;
+    adminClient: PromisifiedClient<AdminClientType>;
+    adTemplatesClient: PromisifiedClient<AdTemplatesClientType>;
+    popupAdsClient: PromisifiedClient<PopupAdsClientType>;
+    videosClient: PromisifiedClient<VideosClientType>;
+    domainsClient: PromisifiedClient<DomainsClientType>;
+    playerConfigsClient: PromisifiedClient<PlayerConfigsClientType>;
+    plansClient: PromisifiedClient<PlansClientType>;
+    paymentsClient: PromisifiedClient<PaymentsClientType>;
+    notificationsClient: PromisifiedClient<NotificationsClientType>;
+    internalGrpcMetadata: Metadata;
+  }
+}
+
+const DEFAULT_GRPC_ADDRESS = "42.96.15.109:9000";
+
+const grpcAddress = () => process.env.STREAM_API_GRPC_ADDR || DEFAULT_GRPC_ADDRESS;
+
+let sharedCredentials: ChannelCredentials | undefined;
+const getCredentials = () => {
+  if (!sharedCredentials) {
+    sharedCredentials = credentials.createInsecure();
+  }
+  return sharedCredentials;
+};
+
+const buildForwardMetadataFromHeaders = (headers: Headers): Metadata => {
+  const metadata = new Metadata();
+
+  for (const name of ["user-agent", "x-forwarded-for", "x-real-ip", "x-request-id"]) {
+    const value = headers.get(name);
+    if (value) {
+      metadata.set(name, value);
+    }
+  }
+
+  return metadata;
+};
+
+export const buildInternalMetadata = () => {
+  const context = tryGetContext();
+  const metadata = context ? buildForwardMetadataFromHeaders(context.req.raw.headers) : new Metadata();
+  const marker = process.env.STREAM_INTERNAL_AUTH_MARKER;
+
+  if (!marker) {
+    throw new Error("STREAM_INTERNAL_AUTH_MARKER is not configured");
+  }
+
+  metadata.set("x-stream-internal-auth", marker);
+  return metadata;
+};
+
+const buildActorMetadata = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to build actor metadata");
+  }
+
+  const metadata = buildInternalMetadata();
+  const userId = context.get("userId");
+  const role = context.get("role");
+  const email = context.get("email");
+
+  if (!userId || !role) {
+    throw new Error("Authenticated actor context is missing");
+  }
+
+  metadata.set("x-stream-actor-id", userId);
+  metadata.set("x-stream-actor-role", role);
+  if (email) {
+    metadata.set("x-stream-actor-email", email);
+  }
+
+  return metadata;
+};
+
+export const getAccountClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get AccountClient");
+  }
+  return context.get("accountClient");
+};
+
+export const getAuthClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get AuthClient");
+  }
+  return context.get("authClient");
+};
+
+export const getAdminClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get AdminClient");
+  }
+  return context.get("adminClient");
+};
+
+export const getAdTemplatesClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get AdTemplatesClient");
+  }
+  return context.get("adTemplatesClient");
+};
+
+export const getPopupAdsClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get PopupAdsClient");
+  }
+  return context.get("popupAdsClient");
+};
+
+export const getVideosClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get VideosClient");
+  }
+  return context.get("videosClient");
+};
+
+export const getDomainsClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get DomainsClient");
+  }
+  return context.get("domainsClient");
+};
+
+export const getPlayerConfigsClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get PlayerConfigsClient");
+  }
+  return context.get("playerConfigsClient");
+};
+
+export const getPlansClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get PlansClient");
+  }
+  return context.get("plansClient");
+};
+
+export const getPaymentsClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get PaymentsClient");
+  }
+  return context.get("paymentsClient");
+};
+
+export const getNotificationsClient = () => {
+  const context = tryGetContext();
+  if (!context) {
+    throw new Error("No context available to get NotificationsClient");
+  }
+  return context.get("notificationsClient");
+};
+
+export const getGrpcMetadataFromContext = () => buildActorMetadata();
+
+export const getInternalGrpcMetadata = () => buildInternalMetadata();
+
+export const setupServices = (app: Hono) => {
+  app.use("*", async (c, next) => {
+    const creds = getCredentials();
+
+    const accountClient = new AccountClient(grpcAddress(), creds);
+    const authClient = new AuthClient(grpcAddress(), creds);
+    const adminClient = new AdminClient(grpcAddress(), creds);
+    const adTemplatesClient = new AdTemplatesClient(grpcAddress(), creds);
+    const popupAdsClient = new PopupAdsClient(grpcAddress(), creds);
+    const videosClient = new VideosClient(grpcAddress(), creds);
+    const domainsClient = new DomainsClient(grpcAddress(), creds);
+    const playerConfigsClient = new PlayerConfigsClient(grpcAddress(), creds);
+    const plansClient = new PlansClient(grpcAddress(), creds);
+    const paymentsClient = new PaymentsClient(grpcAddress(), creds);
+    const notificationsClient = new NotificationsClient(grpcAddress(), creds);
+
+    c.set("accountClient", promisifyClient(accountClient));
+    c.set("authClient", promisifyClient(authClient));
+    c.set("adminClient", promisifyClient(adminClient));
+    c.set("adTemplatesClient", promisifyClient(adTemplatesClient));
+    c.set("popupAdsClient", promisifyClient(popupAdsClient));
+    c.set("videosClient", promisifyClient(videosClient));
+    c.set("domainsClient", promisifyClient(domainsClient));
+    c.set("playerConfigsClient", promisifyClient(playerConfigsClient));
+    c.set("plansClient", promisifyClient(plansClient));
+    c.set("paymentsClient", promisifyClient(paymentsClient));
+    c.set("notificationsClient", promisifyClient(notificationsClient));
+    c.set("internalGrpcMetadata", getInternalGrpcMetadata());
+
+    await next();
+  });
+};
diff --git a/src/server/utils/grpcHelper.ts b/src/server/utils/grpcHelper.ts
new file mode 100644
index 0000000..2aaace8
--- /dev/null
+++ b/src/server/utils/grpcHelper.ts
@@ -0,0 +1,125 @@
+import { ClientUnaryCall, Metadata, ServiceError, StatusObject, status } from "@grpc/grpc-js";
+import { class2Object } from ".";
+
+type UnaryCallback<TRes> = (error: ServiceError | null, response: TRes) => void;
+
+type ResponseOf<T> = T extends {
+  (req: any, callback: UnaryCallback<infer TRes>): ClientUnaryCall;
+  (req: any, metadata: any, callback: UnaryCallback<infer TRes>): ClientUnaryCall;
+  (req: any, metadata: any, options: any, callback: UnaryCallback<infer TRes>): ClientUnaryCall;
+} ? TRes : any;
+
+type RequestOf<T> = T extends {
+  (req: infer TReq, callback: UnaryCallback<any>): ClientUnaryCall;
+  (req: infer TReq, metadata: any, callback: UnaryCallback<any>): ClientUnaryCall;
+} ? TReq : any;
+
+type UnaryKeys<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => ClientUnaryCall ? K : never;
+}[keyof T];
+
+export type GrpcCallHooks = {
+  onMetadata?: (metadata: Metadata) => void;
+  onStatus?: (status: StatusObject) => void;
+};
+
+export type PromisifiedClient<TClient> = {
+  [K in UnaryKeys<TClient>]: (
+    req: RequestOf<TClient[K]>,
+    metadata?: Metadata,
+    hooks?: GrpcCallHooks,
+  ) => Promise<ResponseOf<TClient[K]>>;
+};
+
+export function promisifyClient<TClient extends object>(
+  clientRaw: TClient,
+): PromisifiedClient<TClient> {
+  const result = {} as any;
+  const client = class2Object(clientRaw);
+  const allKeys = new Set([
+    ...Object.getOwnPropertyNames(client),
+    ...Object.getOwnPropertyNames(Object.getPrototypeOf(client)),
+  ]);
+
+  allKeys.forEach((key) => {
+    if (key === "constructor") return;
+
+    const originalMethod = (client as any)[key];
+    if (typeof originalMethod === "function" && !key.startsWith("$")) {
+      result[key] = (
+        req: any,
+        metadata?: Metadata,
+        hooks?: GrpcCallHooks,
+      ) => new Promise((resolve, reject) => {
+        const call: ClientUnaryCall = originalMethod.call(
+          client,
+          req,
+          metadata ?? new Metadata(),
+          (error: ServiceError | null, response: any) => {
+            if (error) {
+              reject(normalizeGrpcError(error));
+              return;
+            }
+            resolve(response);
+          },
+        );
+
+        if (hooks?.onMetadata) {
+          call.on("metadata", hooks.onMetadata);
+        }
+        if (hooks?.onStatus) {
+          call.on("status", hooks.onStatus);
+        }
+      });
+    }
+  });
+
+  return result;
+}
+
+function grpcCodeToHttpStatus(code?: number) {
+  switch (code) {
+    case status.INVALID_ARGUMENT:
+      return 400;
+    case status.UNAUTHENTICATED:
+      return 401;
+    case status.PERMISSION_DENIED:
+      return 403;
+    case status.NOT_FOUND:
+      return 404;
+    default:
+      return 500;
+  }
+}
+
+function normalizeGrpcError(error: ServiceError) {
+  const normalized = new Error(error.details || error.message) as Error & {
+    status?: number;
+    code?: number;
+    body?: { code?: number; message?: string; data?: unknown };
+  };
+
+  normalized.code = error.code;
+  normalized.status = grpcCodeToHttpStatus(error.code);
+
+  const trailerBody = error.metadata?.get("x-error-body")?.[0];
+  if (typeof trailerBody === "string" && trailerBody) {
+    try {
+      normalized.body = JSON.parse(trailerBody) as {
+        code?: number;
+        message?: string;
+        data?: unknown;
+      };
+      if (normalized.body?.message) {
+        normalized.message = normalized.body.message;
+      }
+      if (typeof normalized.body?.code === "number") {
+        normalized.status = normalized.body.code;
+      }
+    } catch {
+      // ignore malformed payload
+    }
+  }
+
+  return normalized;
+}
diff --git a/src/server/utils/htmlEscape.ts b/src/server/utils/htmlEscape.ts
new file mode 100644
index 0000000..5f1161c
--- /dev/null
+++ b/src/server/utils/htmlEscape.ts
@@ -0,0 +1,13 @@
+const ESCAPE_LOOKUP: { [match: string]: string } = {
+  "&": "\\u0026",
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+export function htmlEscape(str: string): string {
+  return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}
diff --git a/src/server/utils/index.ts b/src/server/utils/index.ts
new file mode 100644
index 0000000..3a98d00
--- /dev/null
+++ b/src/server/utils/index.ts
@@ -0,0 +1,124 @@
+import type { User } from "@/server/api/proto/app/v1/common";
+import { TinyRpcError } from "@hiogawa/tiny-rpc";
+import { tinyassert } from "@hiogawa/utils";
+import { Context } from "hono";
+import { tryGetContext } from "hono/context-storage";
+import { setCookie } from "hono/cookie";
+
+export const redisClient = () => {
+  const context = tryGetContext<any>();
+  const redis = context?.get("redis")
+  if (!redis) {
+    throw new Error("Redis client not found in context");
+  }
+  return redis;
+};
+
+export async function generateAndSetTokens(c: Context, userData: User) {
+  const redis = c.get("redis");
+  const jwtProvider = c.get("jwtProvider");
+
+  return await jwtProvider
+    .generateTokenPair(userData.id!, userData.email!, userData.role!)
+    .then((td) => {
+      redis.set(
+        "refresh_uuid:" + td.refreshUUID,
+        userData.id!,
+        "EX",
+        td.rtExpires - Math.floor(Date.now() / 1000),
+      );
+
+      setCookie(c, "access_token", td.accessToken, {
+        expires: new Date(td.atExpires * 1000),
+        httpOnly: true,
+        secure: false,
+        path: "/",
+      });
+
+      setCookie(c, "refresh_token", td.refreshToken, {
+        expires: new Date(td.rtExpires * 1000),
+        httpOnly: true,
+        secure: false,
+        path: "/",
+      });
+
+      return td;
+    })
+    .catch((e: unknown) => {
+      console.error("Error generating tokens", e);
+      throw e;
+    });
+}
+export const class2Object = <T>(classConvert: T) => {
+    const keys = Object.getOwnPropertyNames(
+        Object.getPrototypeOf(classConvert)
+    ) as Array<keyof T>
+    const object = keys.reduce((classAsObj: Record<string, any>, key) => {
+        classAsObj[key as string] = (classConvert[key] as any).bind(
+            classConvert
+        )
+        return classAsObj
+    }, {})
+    return object as T
+}
+// validator agnostic function guard
+// now supports multiple schemas / multiple args
+// (it only supports zod for starter)
+
+export function validateFn<Schemas extends readonly unknown[]>(
+  ...schemas: Schemas
+) {
+  return function decorate<Out>(
+    fn: (...inputs: InferOutputs<Schemas>) => Out
+  ): (...inputRaws: InferInputs<Schemas>) => Out {
+    return function wrapper(...inputRaws) {
+      if (inputRaws.length !== schemas.length) {
+        throw new TinyRpcError(
+          `invalid argument count: expected ${schemas.length}, got ${inputRaws.length}`
+        ).setStatus(400);
+      }
+
+      const inputs = schemas.map((schema, index) => {
+        const parser = getParser(schema);
+        try {
+          return parser(inputRaws[index]);
+        } catch (e) {
+          throw TinyRpcError.fromUnknown(`Error validating argument at index ${index}: ${e instanceof Error ? e.message : 'Unknown error'}`).setStatus(400);
+        }
+      }) as InferOutputs<Schemas>;
+
+      return fn(...inputs);
+    };
+  };
+}
+
+// infer input/output from a single parser
+type InferIO<Parser> = Parser extends { _input: infer I; _output: infer O }
+  ? {
+      i: I;
+      o: O;
+    }
+  : {
+      i: never;
+      o: never;
+    };
+
+// infer tuple of raw inputs from tuple of schemas
+type InferInputs<Schemas extends readonly unknown[]> = {
+  [K in keyof Schemas]: InferIO<Schemas[K]>["i"];
+};
+
+// infer tuple of parsed outputs from tuple of schemas
+type InferOutputs<Schemas extends readonly unknown[]> = {
+  [K in keyof Schemas]: InferIO<Schemas[K]>["o"];
+};
+
+function getParser(schema: unknown): (input: unknown) => unknown {
+  tinyassert(schema && typeof schema === "object");
+
+  if ("parse" in schema && typeof schema.parse === "function") {
+    return schema.parse.bind(schema);
+  }
+
+  throw new TinyRpcError("unsupported schema", { cause: schema });
+}
\ No newline at end of file
diff --git a/src/server/utils/s3Helper.ts b/src/server/utils/s3Helper.ts
new file mode 100644
index 0000000..b3a8c68
--- /dev/null
+++ b/src/server/utils/s3Helper.ts
@@ -0,0 +1,232 @@
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+import { AwsClient } from 'aws4fetch';
+
+export type Part = {
+  index: number
+  host: string
+  url: string
+}
+
+export type Manifest = {
+  version: 1
+  id: string
+  filename: string
+  total_parts: number
+  parts: Part[]
+  createdAt: number
+  expiresAt: number
+  size: number
+}
+
+// ---------------------------------------------------------------------------
+// S3 Config
+// ---------------------------------------------------------------------------
+
+const S3_ENDPOINT = "https://minio1.webtui.vn:9000"
+const BUCKET_NAME = "bucket-lethdat"
+
+const aws = new AwsClient({
+  accessKeyId: "lethdat",
+  secretAccessKey: "D@tkhong9",
+  service: 's3',
+  region: 'auto'
+});
+
+// ---------------------------------------------------------------------------
+// S3 Operations
+// ---------------------------------------------------------------------------
+
+const OBJECT_KEY = (id: string) => `${id}.json`
+
+/** Persist a manifest as JSON in MinIO. */
+export async function saveManifest(manifest: Manifest): Promise<void> {
+  const url = `${S3_ENDPOINT}/${BUCKET_NAME}/${OBJECT_KEY(manifest.id)}`;
+
+  const response = await aws.fetch(url, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(manifest),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to save manifest: ${response.status} ${await response.text()}`)
+  }
+}
+
+/** Fetch a manifest from MinIO. */
+export async function getManifest(id: string): Promise<Manifest | null> {
+  const url = `${S3_ENDPOINT}/${BUCKET_NAME}/${OBJECT_KEY(id)}`;
+
+  try {
+    const response = await aws.fetch(url, {
+      method: 'GET',
+    });
+
+    if (response.status === 404) {
+      return null
+    }
+
+    if (!response.ok) {
+      throw new Error(`Failed to get manifest: ${response.status}`)
+    }
+
+    const text = await response.text()
+    const manifest: Manifest = JSON.parse(text)
+
+    if (manifest.expiresAt < Date.now()) {
+      await deleteManifest(id).catch(() => { })
+      return null
+    }
+
+    return manifest
+  } catch (error) {
+    return null
+  }
+}
+
+/** Remove a manifest object from MinIO. */
+export async function deleteManifest(id: string): Promise<void> {
+  const url = `${S3_ENDPOINT}/${BUCKET_NAME}/${OBJECT_KEY(id)}`;
+
+  const response = await aws.fetch(url, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok && response.status !== 404) {
+    throw new Error(`Failed to delete manifest: ${response.status}`)
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+// Allowed chunk source hosts
+const ALLOWED_HOSTS = [
+  'tmpfiles.org',
+  'gofile.io',
+  'pixeldrain.com',
+  'uploadfiles.io',
+  'anonfiles.com',
+]
+
+/** Returns an error message if any URL is disallowed, otherwise null. */
+export function validateChunkUrls(chunks: string[]): boolean {
+  for (const u of chunks) {
+    try {
+      const { hostname } = new URL(u)
+      if (!ALLOWED_HOSTS.some(h => hostname.includes(h))) {
+        return false
+      }
+    } catch {
+        return false
+    }
+  }
+  return true
+}
+
+export function sanitizeFilename(name: string): string {
+  return name.replace(/[^a-zA-Z0-9._-]/g, '_')
+}
+
+export function detectHost(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '')
+  } catch {
+    return 'unknown'
+  }
+}
+
+function formatUrl(url: string): string {
+  if (url.includes("tmpfiles.org/") && !url.includes("tmpfiles.org/dl/")) {
+    return url.trim().replace("tmpfiles.org/", 'tmpfiles.org/dl/')
+  }
+  return url.trim()
+}
+
+/** List all manifests in bucket (simple implementation). */
+export async function getListFiles(): Promise<string[]> {
+  // For now return empty array - implement listing if needed
+  // MinIO S3 ListObjectsV2 would require XML parsing
+  return []
+}
+
+/** Build a new Manifest. */
+export function createManifest(
+  filename: string,
+  chunks: string[],
+  size: number,
+  ttlMs = 60 * 60 * 1000,
+): Manifest {
+  const id = crypto.randomUUID()
+  const now = Date.now()
+  return {
+    version: 1,
+    id,
+    filename: sanitizeFilename(filename),
+    total_parts: chunks.length,
+    parts: chunks.map((url, index) => ({ index, host: detectHost(url), url: formatUrl(url) })),
+    createdAt: now,
+    expiresAt: now + ttlMs,
+    size,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Streaming
+// ---------------------------------------------------------------------------
+
+/** Streams all parts in index order as one continuous ReadableStream. */
+export function streamManifest(manifest: Manifest): ReadableStream<Uint8Array> {
+  const parts = [...manifest.parts].sort((a, b) => a.index - b.index)
+  const RETRY = 3
+  return new ReadableStream({
+    async start(controller) {
+      for (const part of parts) {
+        let attempt = 0
+        let ok = false
+        while (attempt < RETRY && !ok) {
+          attempt++
+          try {
+            const res = await fetch(formatUrl(part.url))
+            if (!res.ok) throw new Error(`HTTP ${res.status}`)
+            const reader = res.body!.getReader()
+            while (true) {
+              const { done, value } = await reader.read()
+              if (done) break
+              controller.enqueue(value)
+            }
+            ok = true
+          } catch (err: any) {
+            if (attempt >= RETRY) {
+              controller.error(new Error(`Part ${part.index} failed: ${err?.message ?? err}`))
+              return
+            }
+            await new Promise(r => setTimeout(r, 1000 * attempt))
+          }
+        }
+      }
+      controller.close()
+    },
+  })
+}
+export async function saveImageFromStream(stream: ArrayBuffer, filename: string): Promise<void> {
+  // Implement this function to save the thumbnail image stream to storage and update the database with the thumbnail URL
+  const url = `${S3_ENDPOINT}/${BUCKET_NAME}/${filename}.jpg`;
+
+  const response = await aws.fetch(url, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'image/jpeg',
+    },
+    body: stream,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to save thumbnail: ${response.status} ${await response.text()}`)
+  }
+}
\ No newline at end of file
diff --git a/src/server/utils/token.ts b/src/server/utils/token.ts
new file mode 100644
index 0000000..0acdb7a
--- /dev/null
+++ b/src/server/utils/token.ts
@@ -0,0 +1,95 @@
+import { randomUUID } from "crypto"
+import { sign, verify } from "hono/jwt"
+import { JWTPayload } from "hono/utils/jwt/types"
+
+export interface Provider {
+  generateTokenPair(
+    userID: string,
+    email: string,
+    role: string
+  ): Promise<TokenPair>
+
+  parseToken(token: string): Promise<JwtClaims>
+}
+
+export interface TokenPair {
+  accessToken: string
+  refreshToken: string
+  atExpires: number
+  rtExpires: number
+  accessUUID: string
+  refreshUUID: string
+}
+
+export interface Claims {
+  userID: string
+  email: string
+  role: string
+  tokenID: string
+}
+
+export interface JwtClaims extends JWTPayload  {
+  user_id: string
+  email: string
+  role: string
+  token_id: string
+  iss: string
+  exp: number
+}
+
+export class JwtProvider implements Provider {
+  constructor(private secret: string) {}
+
+  static newJWTProvider(secret: string): JwtProvider {
+    return new JwtProvider(secret)
+  }
+
+  async generateTokenPair(
+    userID: string,
+    email: string,
+    role: string
+  ): Promise<TokenPair> {
+    const now = Math.floor(Date.now() / 1000)
+
+    const td: TokenPair = {
+      accessToken: "",
+      refreshToken: "",
+      atExpires: now + 15 * 60,
+      rtExpires: now + 7 * 24 * 60 * 60,
+      accessUUID: randomUUID(),
+      refreshUUID: randomUUID(),
+    }
+
+    // ACCESS TOKEN
+    const accessPayload: JWTPayload = {
+      user_id: userID,
+      email,
+      role,
+      token_id: td.accessUUID,
+      iss: "stream.api",
+      exp: td.atExpires,
+    }
+
+    td.accessToken = await sign(accessPayload, this.secret)
+
+    // REFRESH TOKEN
+    const refreshPayload = {
+      refresh_uuid: td.refreshUUID,
+      user_id: userID,
+      exp: td.rtExpires,
+    }
+
+    td.refreshToken = await sign(refreshPayload, this.secret)
+
+    return td
+  }
+
+  async parseToken(token: string): Promise<JwtClaims> {
+    const payload = await verify(token, this.secret, "HS256") as JwtClaims
+
+    if (!payload) {
+      throw new Error("invalid token")
+    }
+    return payload
+  }
+}
\ No newline at end of file
diff --git a/src/shared/secure-json-transformer.ts b/src/shared/secure-json-transformer.ts
new file mode 100644
index 0000000..e098e3c
--- /dev/null
+++ b/src/shared/secure-json-transformer.ts
@@ -0,0 +1,172 @@
+// src/shared/trpc-secure-transformer.ts
+import superjson from "superjson";
+import nacl from "tweetnacl";
+
+const kp = nacl.box.keyPair();
+
+const uToBase64 = (u8: Uint8Array) => btoa(String.fromCharCode(...u8));
+const secureConfig = { kid: uToBase64(kp.secretKey), publicKeyBase64: uToBase64(kp.publicKey) };
+export type SecureEnvelopeV1 = {
+  kid: string;
+  nonce: string;   // base64
+  pk: string;      // client public key, base64
+  data: string;    // ciphertext, base64
+};
+
+export type ServerPublicKeyConfig = {
+  kid: string;
+  publicKeyBase64: string;
+};
+
+export function toBase64(bytes: Uint8Array): string {
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(bytes).toString("base64");
+  }
+  let s = "";
+  for (const b of bytes) s += String.fromCharCode(b);
+  return btoa(s);
+}
+
+export function fromBase64(base64: string): Uint8Array {
+  if (typeof Buffer !== "undefined") {
+    return new Uint8Array(Buffer.from(base64, "base64"));
+  }
+  const s = atob(base64);
+  const out = new Uint8Array(s.length);
+  for (let i = 0; i < s.length; i++) out[i] = s.charCodeAt(i);
+  return out;
+}
+
+function utf8Encode(value: string): Uint8Array {
+  return new TextEncoder().encode(value);
+}
+
+function utf8Decode(value: Uint8Array): string {
+  return new TextDecoder().decode(value);
+}
+
+function isSecureEnvelope(value: unknown): value is SecureEnvelopeV1 {
+  if (!value || typeof value !== "object") return false;
+  const v = value as Record<string, unknown>;
+  return (
+    typeof v.kid === "string" &&
+    typeof v.nonce === "string" &&
+    typeof v.pk === "string" &&
+    typeof v.data === "string"
+  );
+}
+
+export function createClientKeypair() {
+  const keyPair = nacl.box.keyPair();
+  return {
+    publicKey: keyPair.publicKey,
+    secretKey: keyPair.secretKey,
+  };
+}
+
+export function createEncryptedInputTransformer(opts: {
+  serverKid: string;
+  serverPublicKeyBase64: string;
+  clientKeypair: { publicKey: Uint8Array; secretKey: Uint8Array };
+}): JsonTransformer {
+  const serverPublicKey = fromBase64(opts.serverPublicKeyBase64);
+
+  return {
+    stringify(object: any) {
+      const payload = superjson.serialize(object);
+      const plaintext = utf8Encode(JSON.stringify(payload));
+      const nonce = nacl.randomBytes(nacl.box.nonceLength);
+      
+      const cipher = nacl.box(
+        plaintext,
+        nonce,
+        serverPublicKey,
+        opts.clientKeypair.secretKey,
+      );
+
+      return JSON.stringify({
+        kid: opts.serverKid,
+        nonce: toBase64(nonce),
+        pk: toBase64(opts.clientKeypair.publicKey),
+        data: toBase64(cipher),
+      });
+    },
+
+    parse(object: unknown): unknown {
+      // Trên client, input transformer hầu như không cần dùng deserialize.
+      return object;
+    },
+  };
+}
+export function stringify(object: any, setHeader?: (headers: Record<string, string>) => void): string {
+      const clientKeypair = createClientKeypair();
+      const payload = superjson.serialize(object);
+      const plaintext = utf8Encode(JSON.stringify(payload));
+      const nonce = nacl.randomBytes(nacl.box.nonceLength);
+
+      const cipher = nacl.box(
+        plaintext,
+        nonce,
+        fromBase64(secureConfig.publicKeyBase64), // for testing, should be replaced with real server public key retrieval
+        // serverPublicKey,
+        clientKeypair.secretKey,
+      );
+      setHeader?.({
+        kid: secureConfig.kid,
+        nonce: toBase64(nonce),
+        pk: toBase64(clientKeypair.publicKey),
+      });
+      // return JSON.stringify({
+      //   kid: secureConfig.kid,
+      //   nonce: toBase64(nonce),
+      //   pk: toBase64(clientKeypair.publicKey),
+      //   data: toBase64(cipher),
+      // });
+      return toBase64(cipher);
+    }
+export function parse(d: string, getHeader?: () => Record<string, string>): any {
+      // const object = typeof d === "string" ? JSON.parse(d) : d;
+      // if (!isSecureEnvelope(object)) {
+      //   // console.log("parse RPC payload:", object);
+      //   return object;
+      // }
+      const headers = getHeader ? getHeader() : {};
+      // const serverSecretKey = opts.getSecretKeyByKid(object.kid);
+      // if (!serverSecretKey) {
+      //   throw new Error(`Unknown secure transformer kid: ${object.kid}`);
+      // }
+      const nonce = fromBase64(headers.nonce);
+      const clientPublicKey = fromBase64(headers.pk);
+      const ciphertext = fromBase64(d);
+
+      const opened = nacl.box.open(
+        ciphertext,
+        nonce,
+        clientPublicKey,
+        // serverSecretKey
+        fromBase64(headers.kid), // for testing, should be replaced with real secret key retrieval
+      );
+      if (!opened) {
+        throw new Error("Failed to decrypt tRPC input payload");
+      }
+      const parsed = JSON.parse(utf8Decode(opened));
+      return superjson.deserialize(parsed);
+    }
+export const clientJSON: JsonTransformer = {
+  stringify,
+  parse,
+}
+// export function createServerInputDecryptor(opts?: {
+//   getSecretKeyByKid: (kid: string) => Uint8Array | null;
+// }): Partial<JsonTransformer> {
+//   return {
+//     // stringify(object: unknown): any {
+//     //   console.log("stringify Payload:", object);
+
+//     //   // Trên server, input transformer hầu như không cần dùng serialize.
+//     //   return object;
+//     // },
+
+//     parse,
+//   };
+// }
\ No newline at end of file
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index b347404..1848f8d 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,119 +1,264 @@
-import { defineStore } from 'pinia';
-import { useRouter } from 'vue-router';
-// import { client } from '@/api/rpcclient'; // client no longer used for auth actions
-import { ref, onMounted } from 'vue';
-import { emailAuth, signUp, auth, googleAuth } from '@/lib/firebase';
-import { onAuthStateChanged, signOut, User as FirebaseUser } from 'firebase/auth';
+import { client as rpcClient } from "@/api/rpcclient";
+import { TinyMqttClient } from "@/lib/liteMqtt";
+import type { User } from "@/server/api/proto/app/v1/common";
+import { useTranslation } from "i18next-vue";
+import { defineStore } from "pinia";
+import { computed, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useNotifications } from "@/composables/useNotifications";
 
-interface User {
-    id: string;
-    username: string;
-    email: string;
-    name: string;
-}
+type ProfileUpdatePayload = {
+  username?: string;
+  email?: string;
+  language?: string;
+  locale?: string;
+};
 
-export const useAuthStore = defineStore('auth', () => {
-    const user = ref<User | null>(null);
-    const router = useRouter();
-    const loading = ref(false);
-    const error = ref<string | null>(null);
-    const initialized = ref(false);
+type AuthUserPayload = User & {
+  plan_id?: string;
+  plan_expires_at?: string;
+  plan_expiring_soon?: boolean;
+  wallet_balance?: number;
+};
 
-    // Check auth status on init using Firebase observer
-    async function init() {
-        if (initialized.value) return;
+const mqttBrokerUrl = "wss://mqtt-dashboard.com:8884/mqtt";
+const userNotificationTopic = (userId: string) => ["picpic", "notifications", userId].join("/");
 
-        return new Promise<void>((resolve) => {
-            const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
-                if (currentUser) {
-                    user.value = mapFirebaseUser(currentUser);
-                } else {
-                    user.value = null;
-                }
-                initialized.value = true;
-                resolve();
-                // We could unsubscribe here if we only want initial load, 
-                // but keeping it listens for changes (token refresh etc)
-                // However, 'init' usually implies just ONCE waiter.
-                // For reactivity, user.value is updated.
-            });
-            // Note: onAuthStateChanged returns an unsubscribe function.
-            // If we want to keep listening, we shouldn't unsubscribe immediately, 
-            // but for 'await auth.init()' we just want to wait for the first known state.
-        });
+const normalizeUser = (user: User | null): AuthUserPayload | null => {
+  if (!user) return null;
+
+  return {
+    ...user,
+    plan_id: user.planId,
+    plan_expires_at: user.planExpiresAt,
+    plan_expiring_soon: user.planExpiringSoon,
+    wallet_balance: user.walletBalance,
+  };
+};
+
+export const useAuthStore = defineStore("auth", () => {
+  const user = ref<AuthUserPayload | null>(null);
+  const router = useRouter();
+  const { t, i18next } = useTranslation();
+  const notificationStore = useNotifications();
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const initialized = ref(false);
+  const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US');
+  const currencyFormatter = computed(() => new Intl.NumberFormat(localeTag.value, {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 2,
+  }));
+  const shortDateFormatter = computed(() => new Intl.DateTimeFormat(localeTag.value, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+  }));
+  const formatHistoryDate = (value?: string) => {
+      if (!value) return '-';
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) return '-';
+      return shortDateFormatter.value.format(date);
+  };
+  const formatMoney = (amount: number) => currencyFormatter.value.format(amount);
+
+  let mqttClient: TinyMqttClient | undefined;
+  const clearMqttClient = () => {
+    mqttClient?.disconnect();
+    mqttClient = undefined;
+  };
+
+  const clearState = () => {
+    user.value = null;
+    loading.value = false;
+    error.value = null;
+    initialized.value = false;
+  };
+
+  watch(
+    () => user.value?.id,
+    (userId) => {
+      if (import.meta.env.SSR) return;
+
+      clearMqttClient();
+      if (!userId) return;
+
+      mqttClient = new TinyMqttClient(
+        mqttBrokerUrl,
+        [userNotificationTopic(userId)],
+        (topic, message) => {
+          notificationStore.ingestRealtimeNotification(message);
+        },
+      );
+      mqttClient.connect();
+    },
+    { immediate: true },
+  );
+
+  watch(() => user.value?.language, (lng) => i18next.changeLanguage(lng));
+
+  async function fetchMe() {
+    const response = await rpcClient.getMe();
+    const normalized = normalizeUser(response as User | null);
+    user.value = normalized;
+    i18next.changeLanguage(normalized?.language || "en");
+    return normalized;
+  }
+
+  async function init() {
+    if (initialized.value) return;
+
+    try {
+      await fetchMe();
+    } catch {
+      user.value = null;
+    } finally {
+      initialized.value = true;
+    }
+  }
+
+  async function login(email: string, password: string) {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const response = await rpcClient.login({ email, password });
+      const nextUser = normalizeUser(response.user ?? null);
+
+      if (!nextUser) {
+        throw new Error(t("auth.errors.loginNoUserData"));
+      }
+
+      user.value = nextUser;
+      await router.push("/");
+    } catch (e: any) {
+      error.value = t("auth.errors.loginFailed", {
+        error: e.message || t("auth.errors.unknown"),
+      });
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function loginWithGoogle(refUsername?: string) {
+    if (typeof window === "undefined") return;
+    if (refUsername?.trim()) {
+      document.cookie = `ref_username=${encodeURIComponent(refUsername.trim())}; Path=/; Max-Age=900; SameSite=Lax`;
+    } else {
+      document.cookie = "ref_username=; Path=/; Max-Age=0; SameSite=Lax";
+    }
+    const response = await rpcClient.getGoogleLoginUrl();
+    if (!response.url) {
+      throw new Error(t("auth.errors.unknown"));
+    }
+    window.location.assign(response.url);
+  }
+
+  async function register(username: string, email: string, password: string, refUsername?: string) {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      await rpcClient.register({ username, email, password, refUsername: refUsername?.trim() || undefined });
+      await router.push("/login");
+    } catch (e: any) {
+      error.value = t("auth.errors.registrationFailed", {
+        error: e.message || t("auth.errors.unknown"),
+      });
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function updateProfile(data: ProfileUpdatePayload) {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const response = await rpcClient.updateMe(data);
+      const nextUser = normalizeUser(response as User | null);
+      if (nextUser) {
+        user.value = { ...(user.value ?? {}), ...nextUser };
+      }
+      return true;
+    } catch (e: any) {
+      error.value = t("auth.errors.updateProfileFailed", {
+        error: e.message || t("auth.errors.unknown"),
+      });
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function setLanguage(locale: string) {
+    if (!user.value?.id) {
+      return { ok: true as const, fallbackOnly: true as const };
     }
 
-    function mapFirebaseUser(fwUser: FirebaseUser): User {
-        return {
-            id: fwUser.uid,
-            username: fwUser.email?.split('@')[0] || 'user', // fallback
-            email: fwUser.email || '',
-            name: fwUser.displayName || fwUser.email?.split('@')[0] || 'User'
-        };
+    try {
+      await updateProfile({ language: locale, locale });
+      return { ok: true as const, fallbackOnly: false as const };
+    } catch (e) {
+      return { ok: false as const, fallbackOnly: true as const, error: e };
     }
+  }
 
-    async function login(username: string, password: string) {
-        loading.value = true;
-        error.value = null;
-        // Assuming username is email for Firebase, or we need to look it up?
-        // Firebase works with Email. If input is username, this might fail.
-        // For now assume email.
-        return emailAuth(username, password).then((userCredential) => {
-            user.value = mapFirebaseUser(userCredential.user);
-            router.push('/');
-        }).catch((e: any) => {
-            console.error(e);
-            error.value = 'Login failed: ' + (e.message || 'Unknown error');
-            throw e;
-        }).finally(() => {
-            loading.value = false;
-        });
-    }
+  async function changePassword(currentPassword: string, newPassword: string) {
+    loading.value = true;
+    error.value = null;
 
-    async function loginWithGoogle() {
-        loading.value = true;
-        error.value = null;
-        return googleAuth().then((result) => {
-            user.value = mapFirebaseUser(result.user);
-            router.push('/');
-        }).catch((e: any) => {
-            console.error(e);
-            error.value = 'Google Login failed';
-            throw e;
-        }).finally(() => {
-            loading.value = false;
-        });
+    try {
+      await rpcClient.changePassword({ currentPassword, newPassword });
+      return true;
+    } catch (e: any) {
+      error.value = t("auth.errors.changePasswordFailed", {
+        error: e.message || t("auth.errors.unknown"),
+      });
+      throw e;
+    } finally {
+      loading.value = false;
     }
+  }
 
-    async function register(username: string, email: string, password: string) {
-        loading.value = true;
-        error.value = null;
-        return signUp(email, password).then((fwUser) => {
-            // update profile with username?
-            // updateProfile(fwUser, { displayName: username });
-            user.value = mapFirebaseUser(fwUser);
-            router.push('/');
-        }).catch((e: any) => {
-            console.error(e);
-            error.value = 'Registration failed: ' + (e.message || 'Unknown error');
-            throw e;
-        }).finally(() => {
-            loading.value = false;
-        });
-    }
+  async function logout() {
+    loading.value = true;
+    error.value = null;
 
-    async function logout() {
-        return signOut(auth).then(() => {
-            user.value = null;
-            router.push('/');
-        })
+    try {
+      await rpcClient.logout();
+    } catch {
+      // ignore
+    } finally {
+      clearMqttClient();
+      user.value = null;
+      loading.value = false;
+      await router.push("/login");
     }
-    return {
-        user, loading, error, initialized, init, login, loginWithGoogle, register, logout, $reset: () => {
-            user.value = null;
-            loading.value = false;
-            error.value = null;
-            initialized.value = false;
-        }
-    };
+  }
+
+  return {
+    user,
+    loading,
+    error,
+    initialized,
+    init,
+    fetchMe,
+    login,
+    loginWithGoogle,
+    register,
+    updateProfile,
+    changePassword,
+    setLanguage,
+    logout,
+    formatHistoryDate,
+    formatMoney,
+    $reset: () => {
+      clearMqttClient();
+      clearState();
+    },
+  };
 });
diff --git a/src/stores/uiState.ts b/src/stores/uiState.ts
new file mode 100644
index 0000000..c5673ad
--- /dev/null
+++ b/src/stores/uiState.ts
@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUIState = defineStore('uiState', () => {
+    const uploadDialogVisible = ref(false);
+
+    return {
+        uploadDialogVisible,
+        toggleUploadDialog: () => {
+            uploadDialogVisible.value = !uploadDialogVisible.value;
+        },
+    };
+});
\ No newline at end of file
diff --git a/src/type.d.ts b/src/type.d.ts
index cf68c16..42d1879 100644
--- a/src/type.d.ts
+++ b/src/type.d.ts
@@ -1,11 +1,23 @@
 /// <reference types="vite/client" />
 /// <reference types="unplugin-vue-components/types/vue" />
 
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
+
 declare module "@httpClientAdapter" {
     import { TinyRpcClientAdapter } from "@hiogawa/tiny-rpc";
     export function httpClientAdapter(opts: {
         url: string;
         pathsForGET?: string[];
-        headers?: () => Promise<{ Authorization?: undefined; } | { Authorization: string; }>
+        JSON?: Partial<JsonTransformer>;
+        headers?: () => Promise<Record<string, string>>;
     }): TinyRpcClientAdapter;
+}
+
+interface JsonTransformer {
+  parse: (v: string, getHeader?: () => Record<string, string>) => any; // TODO: eliminate proto pollution at least on server by default cf. https://github.com/fastify/secure-json-parse
+  stringify: (v: any, setHeader?: (headers: Record<string, string>) => void) => string;
 }
\ No newline at end of file
diff --git a/src/worker/html.ts b/src/worker/html.ts
deleted file mode 100644
index 3283b89..0000000
--- a/src/worker/html.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * @module
- * html Helper for Hono.
- */
-
-import { escapeToBuffer, raw, resolveCallbackSync, stringBufferToString } from 'hono/utils/html'
-import type { HtmlEscaped, HtmlEscapedString, StringBufferWithCallbacks } from 'hono/utils/html'
-
-
-export const html = (
-  strings: TemplateStringsArray,
-  ...values: unknown[]
-): HtmlEscapedString | Promise<HtmlEscapedString> => {
-  const buffer: StringBufferWithCallbacks = [''] as StringBufferWithCallbacks
-
-  for (let i = 0, len = strings.length - 1; i < len; i++) {
-    buffer[0] += strings[i]
-
-    const children = Array.isArray(values[i])
-      ? (values[i] as Array<unknown>).flat(Infinity)
-      : [values[i]]
-    for (let i = 0, len = children.length; i < len; i++) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const child = children[i] as any
-      if (typeof child === 'string') {
-        escapeToBuffer(child, buffer)
-      } else if (typeof child === 'number') {
-        ;(buffer[0] as string) += child
-      } else if (typeof child === 'boolean' || child === null || child === undefined) {
-        continue
-      } else if (typeof child === 'object' && (child as HtmlEscaped).isEscaped) {
-        if ((child as HtmlEscapedString).callbacks) {
-          buffer.unshift('', child)
-        } else {
-          const tmp = child.toString()
-          if (tmp instanceof Promise) {
-            buffer.unshift('', tmp)
-          } else {
-            buffer[0] += tmp
-          }
-        }
-      } else if (child instanceof Promise) {
-        buffer.unshift('', child)
-      } else {
-        escapeToBuffer(child.toString(), buffer)
-      }
-    }
-  }
-  buffer[0] += strings.at(-1) as string
-
-  return buffer.length === 1
-    ? 'callbacks' in buffer
-      ? raw(resolveCallbackSync(raw(buffer[0], buffer.callbacks)))
-      : raw(buffer[0])
-    : stringBufferToString(buffer, buffer.callbacks)
-}
diff --git a/src/worker/ssrLayout.ts b/src/worker/ssrLayout.ts
deleted file mode 100644
index 647447a..0000000
--- a/src/worker/ssrLayout.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createContext, jsx, Suspense } from "hono/jsx";
-import { renderToReadableStream, StreamingContext } from "hono/jsx/streaming";
-import { HtmlEscapedCallback, HtmlEscapedString, raw } from "hono/utils/html";
-// import { jsxs } from "hono/jsx-renderer";
-import { Context } from "hono";
-import type {
-  FC,
-  Context as JSXContext,
-  JSXNode
-} from "hono/jsx";
-import { jsxTemplate } from "hono/jsx/jsx-runtime";
-export const RequestContext: JSXContext<Context<any, any, {}> | null> =
-  createContext<Context | null>(null);
-export function renderSSRLayout(c: Context, appStream: ReadableStream) {
-  const body = jsxTemplate`${raw("<!DOCTYPE html>")}${_c(
-    RequestContext.Provider,
-    { value: c },
-    //   currentLayout as any
-    _c(
-      "html",
-      { lang: "en" },
-      _c(
-        "head",
-        null,
-        raw('<meta charset="UTF-8"/>'),
-        raw(
-          '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>'
-        ),
-        raw('<link rel="icon" href="/favicon.ico" />'),
-        raw(`<base href="${new URL(c.req.url).origin}/"/>`)
-      ),
-      _c(
-        "body",
-        {
-          class:
-            "font-sans bg-[#f9fafd] text-gray-800 antialiased flex flex-col",
-        },
-        _c(
-          StreamingContext,
-          { value: { scriptNonce: "random-nonce-value" } },
-          _c(
-            Suspense,
-            { fallback: _c("div", { class: "loading" }, raw("Loading...")) },
-            raw(appStream.getReader())
-          )
-        ),
-        _c("script", {
-          dangerouslySetInnerHTML: {
-            __html: `window.__SSR_STATE__ = ${JSON.stringify(
-              JSON.stringify(c.get("ssrContext") || {})
-            )};`,
-          },
-        })
-      )
-    )
-  )}`;
-  return renderToReadableStream(body);
-}
-function _c(
-  tag: string | FC<any>,
-  props: any,
-  ...children: (JSXNode | HtmlEscapedCallback | HtmlEscapedString | null)[]
-): JSXNode {
-  return jsx(tag, props, ...(children as any));
-}
diff --git a/ssrPlugin.ts b/ssrPlugin.ts
index 21dce38..5c654f8 100644
--- a/ssrPlugin.ts
+++ b/ssrPlugin.ts
@@ -32,10 +32,11 @@ export function clientFirstBuild(): Plugin {
         // Client build first
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (clientEnvironment) {
-          // console.log("Client First Build Plugin: Building client...", clientEnvironment.resolve);
+          // clientEnvironment.config.build.outDir = "dist/client";
+          // console.log("Client First Build Plugin: Building client...", Object.keys());
           await builder.build(clientEnvironment);
         }
-
+        // console.log("Client First Build Plugin: Client build complete.", workerEnvironments);
         // Then worker builds
         for (const workerEnv of workerEnvironments) {
           await builder.build(workerEnv);
@@ -110,12 +111,12 @@ export default function ssrPlugin(): Plugin[] {
     },
     resolveId(id, importer, options) {
       if (!id.startsWith('@httpClientAdapter')) return
-
+      const pwd = process.cwd()
       return path.resolve(
         __dirname,
         options?.ssr
-          ? "./src/api/httpClientAdapter.server.ts"
-          : "./src/api/httpClientAdapter.client.ts"
+          ? pwd+"/src/api/httpClientAdapter.server.ts"
+          : pwd+"/src/api/httpClientAdapter.client.ts"
       );
     },
     async configResolved(config) {
@@ -134,7 +135,8 @@ export default function ssrPlugin(): Plugin[] {
       const clientBuild = viteConfig.environments.client.build;
       clientBuild.manifest = true;
       clientBuild.rollupOptions = clientBuild.rollupOptions || {};
-      clientBuild.rollupOptions.input = "src/client.ts";
+      // clientBuild.rollupOptions.input = "src/client.ts";
+      // clientBuild.outDir = "dist/client";
       if (!viteConfig.environments.ssr) {
           const manifestPath = path.join(clientBuild.outDir as string, '.vite/manifest.json')
           try {
@@ -150,4 +152,4 @@ export default function ssrPlugin(): Plugin[] {
   plugins.push(injectManifest());
 
   return plugins;
-}
+}
\ No newline at end of file
diff --git a/temp.html b/temp.html
new file mode 100644
index 0000000..491d48d
--- /dev/null
+++ b/temp.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mượt mà Chunk Upload - Pro</title>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; justify-content: center; padding: 50px; background: #f4f7f6; }
+        .upload-container { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 100%; max-width: 500px; }
+        h2 { margin-top: 0; color: #333; font-size: 1.2rem; }
+        
+        input[type="file"] { margin-bottom: 20px; width: 100%; }
+        
+        .progress-wrapper { margin: 20px 0; position: relative; }
+        progress { width: 100%; height: 20px; appearance: none; border-radius: 10px; overflow: hidden; }
+        progress::-webkit-progress-bar { background-color: #eee; border-radius: 10px; }
+        progress::-webkit-progress-value { background-color: #2ecc71; transition: width 0.3s ease; }
+        
+        .status-text { display: flex; justify-content: space-between; font-size: 0.9rem; color: #666; margin-top: 5px; }
+        
+        .btn-group { display: flex; gap: 10px; }
+        button { flex: 1; padding: 10px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: opacity 0.2s; }
+        .btn-start { background: #3498db; color: white; }
+        .btn-cancel { background: #e74c3c; color: white; }
+        button:disabled { opacity: 0.5; cursor: not-allowed; }
+        
+        #log { margin-top: 20px; font-size: 0.85rem; color: #444; background: #f9f9f9; padding: 10px; border-radius: 4px; max-height: 100px; overflow-y: auto; border: 1px solid #ddd; }
+    </style>
+</head>
+<body>
+
+<div class="upload-container">
+    <h2>Tải lên đa luồng (Smooth)</h2>
+    
+    <input type="file" id="fileInput">
+    
+    <div class="btn-group">
+        <button id="startBtn" class="btn-start" onclick="startUpload()">Bắt đầu tải</button>
+        <button id="cancelBtn" class="btn-cancel" onclick="cancelUpload()" disabled>Hủy</button>
+    </div>
+
+    <div class="progress-wrapper">
+        <progress id="progressBar" value="0" max="100"></progress>
+        <div class="status-text">
+            <span id="percent">0.0%</span>
+            <span id="speed">Sẵn sàng</span>
+        </div>
+    </div>
+
+    <p id="status" style="word-break: break-all; font-size: 0.8rem; color: #27ae60;"></p>
+    <div id="log">Lịch sử hoạt động...</div>
+</div>
+
+<script>
+const CHUNK_SIZE = 90 * 1024 * 1024; // 10MB mỗi chunk (nhỏ hơn giúp mượt hơn trên mạng yếu)
+const MAX_PARALLEL = 3; 
+const MAX_RETRY = 3;
+
+let cancelled = false;
+let activeCount = 0;
+let queue = [];
+let fileGlobal;
+let session = { uploadedUrls: [] };
+let progressMap = new Map(); // Lưu tiến độ từng chunk theo index
+
+function log(msg) {
+    const logDiv = document.getElementById("log");
+    logDiv.innerHTML += `<div>> ${msg}</div>`;
+    logDiv.scrollTop = logDiv.scrollHeight;
+}
+
+async function startUpload() {
+    const file = document.getElementById("fileInput").files[0];
+    if (!file) return alert("Vui lòng chọn file!");
+
+    // Reset trạng thái
+    cancelled = false;
+    fileGlobal = file;
+    activeCount = 0;
+    progressMap.clear();
+    session.uploadedUrls = [];
+    
+    document.getElementById("startBtn").disabled = true;
+    document.getElementById("cancelBtn").disabled = false;
+    log(`Bắt đầu xử lý file: ${file.name}`);
+
+    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+    queue = Array.from({length: totalChunks}, (_, i) => i);
+
+    processQueue();
+}
+
+function cancelUpload() {
+    cancelled = true;
+    location.reload(); // Cách đơn giản nhất để reset hoàn toàn luồng XHR
+}
+
+function processQueue() {
+    if (cancelled) return;
+
+    while (activeCount < MAX_PARALLEL && queue.length) {
+        const index = queue.shift();
+        activeCount++;
+        uploadChunk(index).then(() => {
+            activeCount--;
+            processQueue();
+        });
+    }
+
+    // Khi tất cả đã xong
+    if (activeCount === 0 && queue.length === 0 && !cancelled) {
+        completeUpload();
+    }
+}
+
+function uploadChunk(index) {
+    return new Promise((resolve) => {
+        let retry = 0;
+
+        function attempt() {
+            if (cancelled) return resolve();
+
+            const start = index * CHUNK_SIZE;
+            const end = Math.min(start + CHUNK_SIZE, fileGlobal.size);
+            const chunk = fileGlobal.slice(start, end);
+
+            const formData = new FormData();
+            formData.append("file", chunk, fileGlobal.name);
+
+            const xhr = new XMLHttpRequest();
+            xhr.open("POST", "https://tmpfiles.org/api/v1/upload");
+
+            // Cập nhật progress mượt mà
+            xhr.upload.onprogress = (e) => {
+                if (e.lengthComputable) {
+                    progressMap.set(index, e.loaded);
+                    updateUI();
+                }
+            };
+
+            xhr.onload = function() {
+                if (xhr.status === 200) {
+                    const res = JSON.parse(xhr.responseText);
+                    if (res.status === "success") {
+                        progressMap.set(index, chunk.size); // Chốt 100% chunk này
+                        session.uploadedUrls[index] = res.data.url;
+                        updateUI();
+                        log(`Xong chunk ${index + 1}`);
+                        return resolve();
+                    }
+                }
+                handleError();
+            };
+
+            xhr.onerror = handleError;
+
+            function handleError() {
+                retry++;
+                if (retry <= MAX_RETRY) {
+                    log(`Thử lại chunk ${index + 1} (Lần ${retry})`);
+                    setTimeout(attempt, 2000);
+                } else {
+                    log(`Thất bại vĩnh viễn chunk ${index + 1}`);
+                    resolve();
+                }
+            }
+
+            xhr.send(formData);
+        }
+
+        attempt();
+    });
+}
+
+function updateUI() {
+    requestAnimationFrame(() => {
+        let totalUploaded = 0;
+        progressMap.forEach(value => {
+            totalUploaded += value;
+        });
+
+        const percent = ((totalUploaded / fileGlobal.size) * 100).toFixed(1);
+        document.getElementById("progressBar").value = percent;
+        document.getElementById("percent").innerText = percent + "%";
+        document.getElementById("speed").innerText = `Đang tải ${activeCount} luồng...`;
+    });
+}
+
+function completeUpload() {
+    log("Đang tổng hợp file...");
+    document.getElementById("speed").innerText = "Đang hoàn tất...";
+
+    // Gửi danh sách URL tới server để tạo manifest (POST /merge) — không cần merge vật lý
+    fetch("/merge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            filename: fileGlobal.name,
+            chunks: session.uploadedUrls
+        })
+    })
+    .then(async (res) => {
+        const data = await res.json();
+        if (!res.ok) {
+            log('Server error: ' + (data.error || res.status));
+            document.getElementById("status").innerText = "Lỗi khi tạo manifest.";
+            document.getElementById("startBtn").disabled = false;
+            return;
+        }
+        const { id, filename, total_parts } = data;
+        log(`Manifest đã tạo: id=${id}, ${total_parts} part(s)`);
+        const downloadUrl = `/download/${id}`;
+        document.getElementById("status").innerHTML =
+            `Sẵn sàng! <a href="${downloadUrl}" download="${filename}" style="color:#2980b9;font-weight:600">⬇ Tải xuống ${filename}</a>`;
+        document.getElementById("speed").innerText = "Hoàn thành";
+        document.getElementById("startBtn").disabled = false;
+        log("Tất cả tiến trình kết thúc.");
+    })
+    .catch(() => {
+        log("Lỗi khi gọi server merge.");
+        document.getElementById("startBtn").disabled = false;
+    });
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 93c252f..d2fd5f3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "Bundler",
@@ -8,7 +10,7 @@
     "lib": [
       "ESNext", "DOM"
     ],
-    "types": ["vite/client"],
+    "types": ["vite/client", "bun"],
     "jsx": "preserve",
     "jsxImportSource": "vue",
     "baseUrl": ".",
diff --git a/uno.config.ts b/uno.config.ts
index ff0c40b..135f101 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, presetAttributify, presetTypography, presetWind4, transformerCompileClass, transformerVariantGroup } from 'unocss'
+import { defineConfig, presetAttributify, presetTypography, presetWind4, transformerCompileClass, transformerVariantGroup } from 'unocss';
 import { presetBootstrapBtn } from "./bootstrap_btn";
 
 export default defineConfig({
@@ -27,38 +27,129 @@ export default defineConfig({
   theme: {
     colors: {
       primary: {
+        DEFAULT: "#1f883d",
+        50: "#effcf3",
+        100: "#dcf9e2",
+        200: "#bbf0c8",
+        300: "#86efac",
+        400: "#4ade80",
+        500: "#1f883d",
+        600: "#16a34a",
+        700: "#15803d",
+        800: "#166534",
+        900: "#14532d",
+        950: "#052e16",
+        light: "#4ade80",
+        active: "#15803d",
+        "active-light": "#bbf0c8",
+        dark: "#14532d",
+      },
+      accent: {
         DEFAULT: "#14a74b",
-        light: "#76da83",
-        active: "#119c45",
-        "active-light": "#aff6b8",
-        dark: "#025c15",
+        50:  "#ecfdf3",
+        100: "#d1fae5",
+        200: "#a7f3d0",
+        300: "#6ee7b7",
+        400: "#34d399",
+        500: "#14a74b",
+        600: "#0f8a3d",
+        700: "#0c6f33",
+        800: "#095a2a",
+        900: "#064622",
+        950: "#032814",
       },
       success: {
-        DEFAULT: "#2dc76b",
-        light: "#17c653",
+        DEFAULT: "#22c55e",
+        50: "#f0fdf4",
+        100: "#dcfce7",
+        200: "#bbf7d0",
+        300: "#86efac",
+        400: "#4ade80",
+        500: "#22c55e",
+        600: "#16a34a",
+        700: "#15803d",
+        800: "#166534",
+        900: "#14532d",
+        950: "#052e16",
+        light: "#4ade80",
       },
       info: {
-        DEFAULT: "#39a6ea",
-        light: "#39c1ea",
-      },
-      danger: {
-        DEFAULT: "#f8285a",
-        light: "#f8285a",
-        active: "#d1214c",
+        DEFAULT: "#0ea5e9",
+        50: "#f0f9ff",
+        100: "#e0f2fe",
+        200: "#bae6fd",
+        300: "#7dd3fc",
+        400: "#38bdf8",
+        500: "#0ea5e9",
+        600: "#0284c7",
+        700: "#0369a1",
+        800: "#075985",
+        900: "#0c4a6e",
+        950: "#082f49",
+        light: "#38bdf8",
       },
       warning: {
-        DEFAULT: "#f0f9ff",
-        light: "#f0f9ff",
+        DEFAULT: "#f59e0b",
+        50: "#fffbeb",
+        100: "#fef3c7",
+        200: "#fde68a",
+        300: "#fcd34d",
+        400: "#fbbf24",
+        500: "#f59e0b",
+        600: "#d97706",
+        700: "#b45309",
+        800: "#92400e",
+        900: "#78350f",
+        950: "#451a03",
+        light: "#fbbf24",
+      },
+      danger: {
+        DEFAULT: "#ef4444",
+        50: "#fef2f2",
+        100: "#fee2e2",
+        200: "#fecaca",
+        300: "#fca5a5",
+        400: "#f87171",
+        500: "#ef4444",
+        600: "#dc2626",
+        700: "#b91c1c",
+        800: "#991b1b",
+        900: "#7f1d1d",
+        950: "#450a0a",
+        light: "#f87171",
+        active: "#dc2626",
       },
       secondary: {
         DEFAULT: "#fd7906",
-        light: "#fbb06f",
+        50: "#fff7ed",
+        100: "#ffedd5",
+        200: "#fed7aa",
+        300: "#fdba74",
+        400: "#fb923c",
+        500: "#fd7906",
+        600: "#ea580c",
+        700: "#c2410c",
+        800: "#9a3412",
+        900: "#7c2d12",
+        950: "#431407",
+        light: "#fb923c",
         inverse: "#4b5675",
-        dark: "#b34700",
+        dark: "#c2410c",
       },
       dark: {
-        DEFAULT: "#161f2d",
-        light: "#4d4d4d",
+        DEFAULT: "#111827",
+        light: "#374151",
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        500: "#6b7280",
+        600: "#4b5563",
+        700: "#374151",
+        800: "#1f2937",
+        900: "#111827",
+        950: "#030712",
       },
       white: {
         DEFAULT: "#ffffff",
@@ -69,6 +160,35 @@ export default defineConfig({
         light: "#e2e6ea",
         dark: "#e2e6ea",
       },
+      foreground: {
+        DEFAULT: "#111827",
+        light: "#374151",
+        dark: "#000000",
+      },
+      muted: {
+        DEFAULT: "#f3f4f6",
+        light: "#fafafa",
+        dark: "#e5e7eb",
+      },
+      page: {
+        DEFAULT: "#faf8f8",
+        light: "#f8f9fa",
+      },
+      surface: {
+        DEFAULT: "#fafafa",
+        light: "#f8f9fa",
+      },
+      border: {
+        DEFAULT: "#d0d7de",
+        light: "#f8f9fa",
+      },
+      header: '#f6f8fa',
+      // bg: {
+      //   page:    "#faf8f8", // nền toàn trang
+      //   surface: "#ffffff", // card, modal, table
+      //   muted:   "#f5f4f2", // section phụ
+      //   border:  "#e6e7e2", // viền
+      // }
     },
     boxShadow: {
       "primary-box": "2px 2px 10px #aff6b8",
@@ -93,6 +213,9 @@ export default defineConfig({
     ],
     ["animate-loadingBar", ["animation", "loadingBar 1.5s linear infinite"]],
   ],
+  rules: [
+    ['animate-spring-card', { animation: 'card-spring-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both' }],
+  ],
   transformers: [transformerVariantGroup(), transformerCompileClass({
     classPrefix: "_",
   })],
@@ -100,9 +223,29 @@ export default defineConfig({
     {
       getCSS: (context) => {
         return `
+      html {
+        scrollbar-gutter: stable;
+      }
+      body {
+        scrollbar-gutter: stable !important;
+      }
       :root {
-        --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        --font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
         --font-serif: 'Playfair Display', serif, 'Times New Roman', Times, serif;
+        --glow-stop-1: #ffc400;
+        --glow-stop-2: #ff9100;
+        --glow-stop-3: #f8682f;
+        --glow-stop-4: #e62c6d;
+        --glow-stop-5: #b25aff;
+        --capra-ramp-1: #ffc400;
+        --capra-ramp-2: #ff9100;
+        --capra-ramp-3: #ff530f;
+        --capra-ramp-4: #e62c6d;
+        --capra-ramp-5: #b25aff;
+        --fill1: color-mix(in srgb, currentColor 40%, transparent);
+        --fill2: color-mix(in srgb, currentColor 60%, transparent);
+        --fill3: color-mix(in srgb, currentColor 80%, transparent);
+        --fill4: currentColor;
       }
       :focus {
         outline-color: ${context.theme.colors?.primary?.active};
@@ -132,6 +275,62 @@ export default defineConfig({
 .fade-leave-to {
   opacity: 0;
 }
+@keyframes card-spring-in {
+  0%   { transform: scale(0.82) translateY(12px); opacity: 0; }
+  60%  { transform: scale(1.04) translateY(-2px); opacity: 1; }
+  80%  { transform: scale(0.98) translateY(1px); }
+  100% { transform: scale(1) translateY(0); }
+}
+@keyframes glow-enter-blur {
+    0% {
+      opacity: 0;
+      filter: blur(0);
+      }
+      100% {
+        opacity: 0.5;
+        filter: blur(60px);
+    }
+}
+@keyframes glow-enter-stroke {
+    0% {
+    background-position-x: 0%;
+    background-position-y: 0%;
+    }
+    100% {
+    background-position-x: 100%;
+    background-position-y: 100%;
+      }
+}
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 0%;
+  }
+  12.5% {
+    background-position: 75% 25%;
+  }
+  25% {
+    background-position: 100% 50%;
+  }
+  37.5% {
+    background-position: 75% 75%;
+  }
+  50% {
+    background-position: 50% 100%;
+  }
+  62.5% {
+    background-position: 25% 75%;
+  }
+  75% {
+    background-position: 25% 50%;
+  }
+  87.5% {
+    background-position: 25% 25%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
 
       `;
       },
diff --git a/vite-plugin-ssr-middleware.ts b/vite-plugin-ssr-middleware.ts
new file mode 100644
index 0000000..caa772e
--- /dev/null
+++ b/vite-plugin-ssr-middleware.ts
@@ -0,0 +1,117 @@
+import type { Connect, Plugin } from "vite";
+import { name as packageName } from "./package.json";
+import { createMiddleware } from "@hattip/adapter-node";
+import { pathToFileURL } from "url";
+
+
+export function vitePluginSsrMiddleware({
+  entry,
+  preview,
+  mode = "ssrLoadModule",
+}: {
+  entry: string;
+  preview?: string;
+  mode?: "ssrLoadModule" | "ModuleRunner" | "ModuleRunner-HMR";
+}): Plugin {
+  return {
+    name: packageName,
+
+    apply(config, env) {
+      // skip client build
+      return Boolean(env.command === "serve" || config.build?.ssr);
+    },
+
+    config(config, env) {
+      if (env.command === "serve") {
+        return {
+          // disable builtin HTML middleware, which would rewrite `req.url` to "/index.html"
+          appType: "custom",
+        };
+      }
+      if (env.command === "build" && config.build?.ssr) {
+        return {
+          build: {
+            rollupOptions: {
+              input: {
+                index: entry,
+              },
+            },
+          },
+        };
+      }
+      return;
+    },
+
+    async configureServer(server) {
+      let loadModule = server.ssrLoadModule;
+      if (mode === "ModuleRunner" || mode === "ModuleRunner-HMR") {
+        const { createServerModuleRunner } = await import("vite");
+        const runner = createServerModuleRunner(server.environments.ssr, {
+          hmr: mode === "ModuleRunner-HMR" ? undefined : false,
+        });
+        loadModule = (id: string) => runner.import(id);
+      }
+// const mod = await loadModule(entry);
+      const handler: Connect.NextHandleFunction = async (req, res, next) => {
+        // expose ViteDevServer via request
+        Object.defineProperty(req, "viteDevServer", { value: server });
+
+        try {
+          const mod = await loadModule(entry);
+        // console.log("preview module loaded:", mod);
+          await createMiddleware((ctx) => mod["default"].fetch(ctx.request))(req, res, next);
+        //   await mod["default"](req, res, next);
+        } catch (e) {
+          next(e);
+        }
+      };
+      return () => server.middlewares.use(handler);
+    },
+
+    async configurePreviewServer(server) {
+      if (preview) {
+        const mod = await import( pathToFileURL(preview).href);
+        return () => server.middlewares.use(createMiddleware((ctx) => mod["default"].fetch(ctx.request)));
+      }
+      return;
+    },
+  };
+}
+
+// minimal logger inspired by
+// https://github.com/koajs/logger
+// https://github.com/honojs/hono/blob/25beca878f2662fedd84ed3fbf80c6a515609cea/src/middleware/logger/index.ts
+
+export function vitePluginLogger(): Plugin {
+  return {
+    name: vitePluginLogger.name,
+    configureServer(server) {
+      return () => server.middlewares.use(loggerMiddleware());
+    },
+    configurePreviewServer(server) {
+      return () => server.middlewares.use(loggerMiddleware());
+    },
+  };
+}
+
+function loggerMiddleware(): Connect.NextHandleFunction {
+  return (req, res, next) => {
+    const url = new URL(req.originalUrl!, "https://test.local");
+    console.log("  -->", req.method, url.pathname);
+    const startTime = Date.now();
+    res.once("close", () => {
+      console.log(
+        "  <--",
+        req.method,
+        url.pathname,
+        res.statusCode,
+        formatDuration(Date.now() - startTime),
+      );
+    });
+    next();
+  };
+}
+
+function formatDuration(ms: number) {
+  return ms < 1000 ? `${Math.floor(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 5566f1f..9a3599a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,3 @@
-import { cloudflare } from "@cloudflare/vite-plugin";
-import { PrimeVueResolver } from "@primevue/auto-import-resolver";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import path from "node:path";
@@ -8,9 +6,13 @@ import Components from "unplugin-vue-components/vite";
 import AutoImport from "unplugin-auto-import/vite";
 import { defineConfig } from "vite";
 import ssrPlugin from "./ssrPlugin";
+import { vitePluginSsrMiddleware } from "./vite-plugin-ssr-middleware";
 export default defineConfig((env) => {
   // console.log("env:", env, import.meta.env);
   return {
+    server: {
+	    host: '0.0.0.0'
+	  },
     plugins: [
       unocss(),
       vue(),
@@ -25,11 +27,32 @@ export default defineConfig((env) => {
         dts: true,
         dtsTsx: true,
         directives: false,
-        resolvers: [PrimeVueResolver()],
       }),
       ssrPlugin(),
-      cloudflare(),
+      vitePluginSsrMiddleware({
+                entry: "/src/index.tsx",
+                preview: path.resolve("dist/server/index.js"),
+            }),
     ],
+    environments: {
+            client: {
+                build: {
+                    outDir: "dist/client",
+                    rollupOptions: {
+                        input: { index: "/src/client.ts" },
+                    },
+                },
+            },
+            server: {
+                build: {
+                    outDir: "dist/server",
+                    copyPublicDir: false,
+                    rollupOptions: {
+                        input: { index: "/src/index.tsx" },
+                    },
+                },
+            },
+        },
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
@@ -40,8 +63,8 @@ export default defineConfig((env) => {
       exclude: ["vue"],
     },
 
-    ssr: {
-      noExternal: ["vue"],
-    },
+    // ssr: {
+    //   noExternal: ["vue"],
+    // },
   };
 });
diff --git a/wrangler.jsonc b/wrangler.jsonc
deleted file mode 100644
index 39fdfba..0000000
--- a/wrangler.jsonc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "node_modules/wrangler/config-schema.json",
-  "name": "holistream",
-  "compatibility_date": "2025-08-03",
-  "main": "./src/index.tsx",
-  "compatibility_flags": [
-    "nodejs_compat"
-  ]
-}
\ No newline at end of file