diff --git a/docs/online-update.md b/docs/online-update.md
new file mode 100644
index 000000000..131bb7b5c
--- /dev/null
+++ b/docs/online-update.md
@@ -0,0 +1,269 @@
+# 在线更新方案
+
+本文档定义 Codex Proxy RS 的应用包在线更新方案。目标是支持管理端检查更新，并在管理员点击按钮后完成一键更新。
+
+## 目标
+
+- 管理端可以显示当前版本、最新版本、更新说明和部署模式。
+- 管理端可以手动检查更新。
+- 管理端可以触发一键更新。
+- Docker 部署是主要场景。
+- 裸机二进制部署可以作为后续兼容场景。
+- 更新过程必须保留数据卷、配置和日志，不覆盖运行数据。
+
+## 非目标
+
+- 不在运行中的 Rust 进程里热加载新代码。
+- 不在 Docker 容器内部直接替换当前容器的二进制作为主方案。
+- 不默认把宿主机 Docker socket 挂进主应用容器。
+- 不在没有迁移机制前执行高风险数据库结构变更。
+
+## 部署模式
+
+### Docker 模式
+
+Docker 模式下，一键更新应更新镜像并重建容器：
+
+1. 管理端调用后端更新接口。
+2. 后端完成管理员鉴权和并发锁控制。
+3. 后端调用 updater。
+4. updater 在宿主机或 sidecar 中执行镜像更新。
+5. updater 拉取新镜像。
+6. updater 重新创建 `codex-proxy-rs` 服务。
+7. 数据卷继续挂载，SQLite、日志和配置保持不变。
+
+推荐结构：
+
+```text
+browser
+  -> codex-proxy-rs admin api
+    -> updater sidecar / host updater
+      -> docker pull
+      -> docker compose up -d codex-proxy-rs
+```
+
+主应用容器不应直接拥有 Docker daemon 权限。updater 可以是一个独立容器，也可以是宿主机 systemd 服务。updater 只暴露给同一 Docker network 或 `127.0.0.1`，并使用共享 token 鉴权。
+
+当前 `docker-compose.yml` 使用 `build: .`，这种模式无法可靠在线更新到远端版本。要支持 Docker 一键更新，compose 应改为使用远端镜像：
+
+```yaml
+services:
+  codex-proxy-rs:
+    image: ghcr.io/<owner>/codex-proxy-rs:latest
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./data:/app/data
+      - ./logs:/app/logs
+      - ./config.yaml:/app/config.yaml:ro
+    environment:
+      CPR_DEPLOYMENT_MODE: docker
+      CPR_VERSION: 0.1.0
+      CPR_UPDATE_CHANNEL: stable
+      CPR_UPDATER_URL: http://codex-proxy-rs-updater:8090
+      CPR_UPDATER_TOKEN: ${CPR_UPDATER_TOKEN}
+```
+
+如果继续使用 `build: .`，管理端只能检查上游是否有新版本，不能安全地完成远端包更新。
+
+### 二进制模式
+
+二进制模式可以采用 Sub2API 类似方案：
+
+1. 请求 GitHub Releases latest。
+2. 匹配当前 OS/arch 的压缩包。
+3. 下载 release asset。
+4. 校验 `checksums.txt`。
+5. 解压新二进制和 `web/dist`。
+6. 备份旧二进制和旧 `web/dist`。
+7. 原子替换。
+8. 返回 `needRestart: true`。
+9. 管理端触发重启，进程退出后由 systemd/supervisor 拉起。
+
+二进制模式不是当前 Docker 部署的主路径，但可以复用检查更新、版本展示、更新锁和前端 UI。
+
+## 版本与发布产物
+
+发布时应同时产出 Docker 镜像和 release 元数据：
+
+- Git tag：`v0.1.0`
+- Docker image：`ghcr.io/<owner>/codex-proxy-rs:0.1.0`
+- Docker image：`ghcr.io/<owner>/codex-proxy-rs:latest`
+- Release archive：`codex-proxy-rs_0.1.0_linux_x86_64.tar.gz`
+- Checksum：`checksums.txt`
+
+后端应在构建时注入版本信息：
+
+- `CPR_VERSION`
+- `CPR_GIT_SHA`
+- `CPR_BUILD_TIME`
+- `CPR_DEPLOYMENT_MODE`
+- `CPR_IMAGE_REPOSITORY`
+- `CPR_IMAGE_TAG`
+
+Docker 模式下，检查更新可以优先使用 GitHub Releases 的 tag 做语义版本比较；真正更新时由 updater 拉取指定镜像 tag 或 digest。
+
+## 后端 API
+
+建议新增管理端接口：
+
+```http
+GET  /api/admin/system/version
+GET  /api/admin/system/check-updates?force=true
+POST /api/admin/system/update
+POST /api/admin/system/rollback
+POST /api/admin/system/restart
+```
+
+所有接口必须要求管理员会话或管理员 API Key。
+
+`GET /api/admin/system/version` 返回：
+
+```json
+{
+  "version": "0.1.0",
+  "gitSha": "abc1234",
+  "buildTime": "2026-07-01T00:00:00Z",
+  "deploymentMode": "docker",
+  "image": "ghcr.io/<owner>/codex-proxy-rs:0.1.0"
+}
+```
+
+`GET /api/admin/system/check-updates` 返回：
+
+```json
+{
+  "currentVersion": "0.1.0",
+  "latestVersion": "0.2.0",
+  "hasUpdate": true,
+  "deploymentMode": "docker",
+  "releaseUrl": "https://github.com/<owner>/codex-proxy-rs/releases/tag/v0.2.0",
+  "notes": "...",
+  "cached": false,
+  "updateSupported": true,
+  "unsupportedReason": null
+}
+```
+
+`POST /api/admin/system/update` 在 Docker 模式下返回：
+
+```json
+{
+  "operationId": "sysop-...",
+  "deploymentMode": "docker",
+  "message": "Update started",
+  "needReconnect": true
+}
+```
+
+如果当前部署不支持一键更新，应返回明确原因：
+
+```json
+{
+  "updateSupported": false,
+  "unsupportedReason": "Docker one-click update requires CPR_UPDATER_URL and a remote image deployment"
+}
+```
+
+## Updater 服务
+
+Docker 一键更新的关键是 updater。updater 负责真正操作 Docker：
+
+```http
+POST /update
+Authorization: Bearer <CPR_UPDATER_TOKEN>
+Content-Type: application/json
+```
+
+请求：
+
+```json
+{
+  "service": "codex-proxy-rs",
+  "image": "ghcr.io/<owner>/codex-proxy-rs:0.2.0",
+  "composeProject": "codex-proxy-rs"
+}
+```
+
+updater 行为：
+
+1. 校验 token。
+2. 校验 image 仓库白名单。
+3. 执行 `docker pull ghcr.io/<owner>/codex-proxy-rs:0.2.0`。
+4. 执行 `docker compose up -d codex-proxy-rs` 或 Docker API 等价操作。
+5. 记录当前镜像 digest，支持失败诊断。
+
+updater 不应暴露到公网。若使用 sidecar 容器，建议挂载 Docker socket 到 updater，而不是主应用：
+
+```yaml
+services:
+  codex-proxy-rs-updater:
+    image: ghcr.io/<owner>/codex-proxy-rs-updater:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ./docker-compose.yml:/workspace/docker-compose.yml:ro
+    environment:
+      CPR_UPDATER_TOKEN: ${CPR_UPDATER_TOKEN}
+      CPR_ALLOWED_IMAGE_REPOSITORY: ghcr.io/<owner>/codex-proxy-rs
+    networks:
+      - default
+```
+
+如果后续不想维护自研 updater，可以评估 Watchtower 的 HTTP API 模式，但仍需要后端把“检查更新、按钮触发、操作结果展示”封装到管理端。
+
+## 安全约束
+
+- 所有更新接口必须走管理员鉴权。
+- 更新任务必须有全局锁，避免并发更新。
+- GitHub release 下载 URL 必须限制为可信 HTTPS host。
+- Docker image 仓库必须白名单校验。
+- 下载包必须限制大小。
+- 二进制包必须校验 checksum。
+- Docker 更新必须保留 `data`、`logs`、`config.yaml` 挂载。
+- 不允许通过管理端传入任意 shell 命令。
+- updater token 只能通过环境变量或密钥文件配置，不能写入前端。
+
+## 前端交互
+
+管理端系统页建议包含：
+
+- 当前版本。
+- 部署模式。
+- 最新版本。
+- 更新说明。
+- 检查更新按钮。
+- 一键更新按钮。
+- 更新中状态。
+- 更新后重连提示。
+- 不支持一键更新时的明确原因。
+
+Docker 更新会导致容器重建，前端连接会短暂断开。UI 应在触发更新后轮询 `/api/admin/system/version`，服务恢复后提示已更新。
+
+## 数据库迁移约束
+
+当前项目启动时执行 `schema.sql`，主要依赖 `create table if not exists`。在加入在线更新前，建议补充迁移版本表，例如：
+
+```sql
+create table if not exists schema_migrations (
+  version integer primary key,
+  applied_at text not null
+);
+```
+
+发布新版本时：
+
+- 向前兼容的字段新增可以自动迁移。
+- 删除字段、重命名字段、不可逆数据迁移需要显式 release note。
+- 一键更新前可以在检查结果里标注 `requiresBackup: true`。
+
+## 推荐落地顺序
+
+1. 建立 GitHub Release 和 GHCR 镜像发布流程。
+2. 为后端注入版本、commit、构建时间和部署模式。
+3. 增加系统版本与检查更新 API。
+4. 增加管理端系统更新页。
+5. 增加 Docker updater sidecar。
+6. 接入一键更新按钮。
+7. 补充数据库迁移机制。
+8. 再考虑二进制模式的原子替换和 rollback。
+
diff --git a/web/src/views/login/components/LoginBackground.vue b/web/src/views/login/components/LoginBackground.vue
new file mode 100644
index 000000000..90d8837c1
--- /dev/null
+++ b/web/src/views/login/components/LoginBackground.vue
@@ -0,0 +1,382 @@
+<script setup lang="ts">
+type RouteCluster = {
+  id: string
+  labels: readonly string[]
+  className: string
+}
+
+const ingressProtocols = ['HTTP JSON', 'HTTP SSE', 'WS JSON', 'WS SSE'] as const
+const upstreamProtocols = ['RESPONSES', 'CHAT', 'REALTIME', 'TRACE'] as const
+const routeClusters: readonly RouteCluster[] = [
+  { id: 'edge', labels: ['edge', 'cache', 'keys'], className: 'login-route-cluster--edge' },
+  { id: 'retry', labels: ['retry', 'trace', 'sse'], className: 'login-route-cluster--retry' },
+  { id: 'audit', labels: ['audit', 'events', 'logs'], className: 'login-route-cluster--audit' },
+  { id: 'model', labels: ['model', 'tools', 'quota'], className: 'login-route-cluster--model' },
+]
+</script>
+
+<template>
+  <div class="pointer-events-none absolute inset-0 z-[-1] overflow-hidden" aria-hidden="true">
+    <div class="login-bg-base" />
+    <div class="login-bg-grid" />
+    <div class="login-bg-striations" />
+    <div class="login-bg-grain" />
+
+    <span
+      class="login-watermark absolute top-[9.63%] left-[6.15%] whitespace-nowrap font-mono text-[13px] leading-none font-medium text-(--login-watermark)"
+    >
+      CODEX_PROXY_RS // ROUTE_TOPOLOGY // AUTH_GATEWAY
+    </span>
+
+    <div class="login-protocol-stack login-protocol-stack--ingress">
+      <span
+        v-for="protocol in ingressProtocols"
+        :key="protocol"
+        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--login-stack-bg) px-2.5 py-1.75 opacity-(--login-stack-item-opacity) before:size-1.5 before:shrink-0 before:rounded-full before:bg-(--login-stack-dot) before:content-['']"
+      >
+        {{ protocol }}
+      </span>
+    </div>
+
+    <div class="login-protocol-stack login-protocol-stack--upstream">
+      <span
+        v-for="protocol in upstreamProtocols"
+        :key="protocol"
+        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--login-stack-bg) px-2.5 py-1.75 opacity-(--login-stack-item-opacity) before:size-1.5 before:shrink-0 before:rounded-full before:bg-(--login-stack-dot) before:content-['']"
+      >
+        {{ protocol }}
+      </span>
+    </div>
+
+    <svg
+      class="login-topology"
+      viewBox="0 0 1920 1080"
+      preserveAspectRatio="xMidYMid slice"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <g class="login-route-lines">
+        <path
+          class="login-route-line--bundle"
+          d="M0 32c132 0 166 48 270 84 94 32 202 32 370 30 172 0 276-8 410-28 148-22 229-74 329-76m-1379 50c112 0 170 12 274 36 96 22 222 22 366 18 178 0 286 4 426 0 148-4 262-30 313-32m-1379 42c132 0 184-12 294-14 126-2 216 4 346 4 176 0 282 22 426 38 166 20 280 36 313 36m-1379 4c160 0 202-34 316-60 108-24 204-18 324-18 140 0 262 12 378 26 102 12 216 22 361 16"
+          transform="translate(286 382)"
+        />
+        <path
+          class="login-route-line--stream"
+          d="M1030 48c-170-30-320-20-478 30-160 52-292 48-552 10m870-26c-150 10-242 42-358 64-126 24-260 28-440 16"
+          transform="translate(510 316)"
+        />
+        <path
+          class="login-route-line--audit"
+          d="M980 24c-196 54-352 66-512 34-138-28-294-16-468 30m690-24c-134 26-262 30-380 12-106-16-194-8-276 20"
+          transform="translate(440 704)"
+        />
+      </g>
+
+      <g class="login-particle-tracks">
+        <path
+          id="login-track-a"
+          d="M286 414 C418 414 452 462 556 498 C650 530 758 530 926 528 C1098 528 1202 520 1336 500 C1484 478 1565 426 1665 424"
+        />
+        <path
+          id="login-track-b"
+          d="M286 474 C398 474 456 486 560 510 C656 532 782 532 926 528 C1104 528 1212 532 1352 528 C1500 524 1614 498 1665 496"
+        />
+        <path
+          id="login-track-c"
+          d="M286 538 C418 538 470 526 580 524 C706 522 796 528 926 528 C1102 528 1208 550 1352 566 C1518 586 1632 602 1665 602"
+        />
+        <path
+          id="login-track-d"
+          d="M286 606 C446 606 488 572 602 546 C710 522 806 528 926 528 C1066 528 1188 540 1304 554 C1406 566 1520 576 1665 570"
+        />
+        <path
+          id="login-track-return"
+          d="M1540 364 C1370 334 1220 344 1062 394 C902 446 770 442 510 404"
+        />
+      </g>
+
+      <g class="login-particle">
+        <circle r="3.2" />
+        <animateMotion dur="7.2s" repeatCount="indefinite" rotate="auto">
+          <mpath href="#login-track-a" />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;1;1;0"
+          keyTimes="0;0.12;0.82;1"
+          dur="7.2s"
+          repeatCount="indefinite"
+        />
+      </g>
+      <g class="login-particle">
+        <circle r="2.8" />
+        <animateMotion dur="8.8s" begin="-2.1s" repeatCount="indefinite" rotate="auto">
+          <mpath href="#login-track-b" />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;0.82;0.82;0"
+          keyTimes="0;0.14;0.82;1"
+          dur="8.8s"
+          begin="-2.1s"
+          repeatCount="indefinite"
+        />
+      </g>
+      <g class="login-particle">
+        <circle r="2.6" />
+        <animateMotion dur="9.4s" begin="-4.4s" repeatCount="indefinite" rotate="auto">
+          <mpath href="#login-track-c" />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;0.78;0.78;0"
+          keyTimes="0;0.13;0.84;1"
+          dur="9.4s"
+          begin="-4.4s"
+          repeatCount="indefinite"
+        />
+      </g>
+      <g class="login-particle">
+        <circle r="2.5" />
+        <animateMotion dur="10.8s" begin="-5.2s" repeatCount="indefinite" rotate="auto">
+          <mpath href="#login-track-d" />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;0.7;0.7;0"
+          keyTimes="0;0.16;0.8;1"
+          dur="10.8s"
+          begin="-5.2s"
+          repeatCount="indefinite"
+        />
+      </g>
+      <g class="login-particle">
+        <circle r="2.3" />
+        <animateMotion dur="11.4s" begin="-1.8s" repeatCount="indefinite" rotate="auto">
+          <mpath href="#login-track-return" />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          values="0;0.55;0.55;0"
+          keyTimes="0;0.16;0.78;1"
+          dur="11.4s"
+          begin="-1.8s"
+          repeatCount="indefinite"
+        />
+      </g>
+
+      <g class="login-packets login-packets--semantic">
+        <circle cx="420" cy="410" r="3" />
+        <circle cx="626" cy="524" r="3" />
+        <circle cx="812" cy="524" r="3" />
+        <circle cx="1262" cy="502" r="3" />
+        <circle cx="1540" cy="422" r="3" />
+        <circle cx="614" cy="459" r="2.5" />
+        <circle cx="780" cy="528" r="2.5" />
+        <circle cx="982" cy="528" r="2.5" />
+        <circle cx="1390" cy="496" r="2.5" />
+      </g>
+    </svg>
+
+    <div
+      v-for="cluster in routeClusters"
+      :key="cluster.id"
+      class="login-route-cluster absolute grid gap-1.5 font-mono text-[10px] leading-none font-medium text-(--login-cluster-text)"
+      :class="cluster.className"
+    >
+      <span
+        v-for="label in cluster.labels"
+        :key="label"
+        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--login-cluster-bg) px-2 py-1"
+      >
+        <i
+          class="inline-block h-0.5 w-4.5 rounded-xs bg-(--login-cluster-pulse)"
+          aria-hidden="true"
+        />
+        {{ label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-bg-base,
+.login-bg-base::after,
+.login-bg-grid,
+.login-bg-striations,
+.login-bg-grain,
+.login-topology {
+  position: absolute;
+  inset: 0;
+}
+
+.login-bg-base {
+  background:
+    radial-gradient(
+      ellipse 59% 48% at 55% 48%,
+      var(--login-base-a) 0%,
+      var(--login-base-b) 50%,
+      var(--login-base-c) 100%
+    ),
+    var(--login-base-c);
+}
+
+.login-bg-base::after {
+  content: '';
+  background: radial-gradient(
+    ellipse 52.5% 44% at 54% 47%,
+    transparent 0%,
+    var(--login-edge-mid) 72%,
+    var(--login-edge-end) 100%
+  );
+}
+
+.login-bg-grid {
+  background:
+    repeating-linear-gradient(90deg, var(--login-grid) 0 1px, transparent 1px 80px),
+    repeating-linear-gradient(180deg, var(--login-grid) 0 1px, transparent 1px 80px);
+}
+
+.login-bg-striations {
+  background:
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 126px / 100% 1px no-repeat,
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 214px / 100% 1px no-repeat,
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 338px / 100% 1px no-repeat,
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 462px / 100% 1px no-repeat,
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 586px / 100% 1px no-repeat,
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 714px / 100% 1px no-repeat,
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 846px / 100% 1px no-repeat,
+    linear-gradient(var(--login-striation), var(--login-striation)) 0 982px / 100% 1px no-repeat;
+}
+
+.login-bg-grain {
+  opacity: 0.68;
+  background-image:
+    linear-gradient(var(--login-grain), var(--login-grain)) 139px 109px / 3px 2px no-repeat,
+    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 288px 192px / 1px 1px
+      no-repeat,
+    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 437px 275px / 1px 1px
+      no-repeat,
+    linear-gradient(var(--login-grain), var(--login-grain)) 586px 358px / 2px 1px no-repeat,
+    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 735px 441px / 1px 2px
+      no-repeat,
+    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 884px 524px / 3px 1px
+      no-repeat,
+    linear-gradient(var(--login-grain), var(--login-grain)) 1033px 607px / 2px 1px no-repeat,
+    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 1182px 690px / 1px 1px
+      no-repeat,
+    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 1331px 773px / 1px 2px
+      no-repeat,
+    linear-gradient(var(--login-grain), var(--login-grain)) 1480px 856px / 2px 1px no-repeat,
+    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 1629px 939px / 3px 1px
+      no-repeat,
+    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 1778px 67px / 1px 1px
+      no-repeat;
+}
+
+.login-protocol-stack {
+  position: absolute;
+  display: grid;
+  gap: 8px;
+  width: 156px;
+  color: var(--login-stack-text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.login-protocol-stack--ingress {
+  top: 36.1111%;
+  left: 6.5625%;
+  --login-stack-item-opacity: var(--login-stack-opacity);
+}
+
+.login-protocol-stack--upstream {
+  top: 36.1111%;
+  right: 3.4375%;
+  --login-stack-item-opacity: var(--login-stack-upstream-opacity);
+}
+
+.login-topology {
+  width: 100%;
+  height: 100%;
+}
+
+.login-topology path,
+.login-topology ellipse,
+.login-topology circle {
+  vector-effect: non-scaling-stroke;
+}
+
+.login-route-lines path {
+  fill: transparent;
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+
+.login-route-line--bundle {
+  stroke: var(--login-route-bundle);
+}
+
+.login-route-line--stream {
+  stroke: var(--login-route-stream);
+}
+
+.login-route-line--audit {
+  stroke: var(--login-route-audit);
+}
+
+.login-particle-tracks path {
+  fill: transparent;
+  stroke: none;
+}
+
+.login-particle {
+  opacity: 0;
+  filter: drop-shadow(0 0 8px var(--login-particle-glow));
+}
+
+.login-particle circle {
+  fill: var(--login-particle);
+}
+
+.login-packets--semantic circle {
+  fill: var(--login-semantic);
+}
+
+.login-route-cluster--edge {
+  top: 28.2407%;
+  left: 23.4375%;
+}
+
+.login-route-cluster--retry {
+  top: 26.2963%;
+  left: 63.0208%;
+}
+
+.login-route-cluster--audit {
+  top: 69.4444%;
+  left: 23.6979%;
+}
+
+.login-route-cluster--model {
+  top: 68.7037%;
+  left: 66.6667%;
+}
+
+@media (max-width: 720px) {
+  .login-watermark,
+  .login-protocol-stack,
+  .login-route-cluster {
+    opacity: 0.48;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .login-particle {
+    display: none;
+  }
+}
+</style>
diff --git a/web/src/views/login/components/LoginPanel.vue b/web/src/views/login/components/LoginPanel.vue
new file mode 100644
index 000000000..07d247395
--- /dev/null
+++ b/web/src/views/login/components/LoginPanel.vue
@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import { ArrowRight, Cat, CircleAlert, Eye, EyeOff, KeyRound, Mail, Moon, Sun } from '@lucide/vue'
+import { computed, shallowRef } from 'vue'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+import BaseCard from '@/components/base/BaseCard.vue'
+import BaseInput from '@/components/base/BaseInput.vue'
+
+type ThemeName = 'light' | 'dark'
+type PasswordInputType = 'password' | 'text'
+
+const props = defineProps<{
+  error?: string | null
+  loading: boolean
+  submitDisabled: boolean
+  effectiveTheme: ThemeName
+}>()
+
+const emit = defineEmits<{
+  submit: []
+  toggleTheme: [event: MouseEvent]
+}>()
+
+const username = defineModel<string>('username', { required: true })
+const password = defineModel<string>('password', { required: true })
+const isPasswordVisible = shallowRef(false)
+
+const passwordType = computed<PasswordInputType>(() =>
+  isPasswordVisible.value ? 'text' : 'password',
+)
+const passwordToggleLabel = computed<string>(() =>
+  isPasswordVisible.value ? '隐藏密码' : '显示密码',
+)
+const submitLabel = computed<string>(() => (props.loading ? '正在进入...' : '进入控制台'))
+const themeToggleLabel = computed<string>(() =>
+  props.effectiveTheme === 'dark' ? '切换浅色模式' : '切换暗黑模式',
+)
+const themeToggleClasses = computed<Record<string, boolean>>(() => ({
+  'is-dark': props.effectiveTheme === 'dark',
+}))
+
+function togglePasswordVisible(): void {
+  isPasswordVisible.value = !isPasswordVisible.value
+}
+</script>
+
+<template>
+  <BaseCard
+    as="form"
+    :padded="false"
+    variant="elevated"
+    class="login-form relative grid min-h-129.25 w-[min(450px,100%)] gap-4 rounded-lg px-7.5 pt-6.5 pb-6 max-[560px]:min-h-auto max-[560px]:gap-4 max-[560px]:p-5.5"
+    @submit.prevent="emit('submit')"
+  >
+    <div class="login-form-line" aria-hidden="true" />
+
+    <header class="flex min-w-0 items-center justify-between gap-4.5 max-[560px]:gap-3.5">
+      <div class="flex min-w-0 items-center gap-3">
+        <span class="login-logo">
+          <Cat :size="20" :stroke-width="2.1" />
+        </span>
+        <span class="grid min-w-0 gap-1">
+          <strong
+            class="text-[17px] leading-[1.12] font-semibold text-(--login-brand-title) max-[560px]:text-[15px]"
+          >
+            Codex Proxy RS
+          </strong>
+          <span
+            class="font-mono text-[10px] leading-[1.2] font-normal text-(--login-brand-caption)"
+          >
+            ADMIN REALM
+          </span>
+        </span>
+      </div>
+
+      <button
+        class="login-theme-toggle"
+        :class="themeToggleClasses"
+        type="button"
+        :aria-label="themeToggleLabel"
+        :title="themeToggleLabel"
+        @click="emit('toggleTheme', $event)"
+      >
+        <Sun :size="16" />
+        <span class="login-theme-knob" aria-hidden="true" />
+        <Moon :size="16" />
+      </button>
+    </header>
+
+    <section class="grid min-w-0 gap-2.5" aria-labelledby="login-title">
+      <h1
+        id="login-title"
+        class="m-0 text-[34px] leading-[1.02] font-semibold text-(--login-title) max-[560px]:text-[30px]"
+      >
+        控制台登录
+      </h1>
+      <p class="m-0 text-sm leading-[1.45] font-normal text-(--login-description)">
+        使用管理员账号进入 Codex Proxy RS，管理路由、密钥、账号池与链路观测。
+      </p>
+    </section>
+
+    <div class="grid gap-3">
+      <div v-if="props.error" class="login-error" role="alert">
+        <CircleAlert :size="16" />
+        <p>{{ props.error }}</p>
+      </div>
+
+      <label class="grid min-w-0 gap-2">
+        <span class="text-[13px] leading-[1.1] font-bold text-(--login-label)">管理员账号</span>
+        <BaseInput v-model="username" placeholder="admin@example.com" autocomplete="username">
+          <template #prefix>
+            <Mail :size="17" />
+          </template>
+        </BaseInput>
+      </label>
+
+      <label class="grid min-w-0 gap-2">
+        <span class="text-[13px] leading-[1.1] font-bold text-(--login-label)">访问密钥</span>
+        <BaseInput
+          v-model="password"
+          placeholder="输入会话密钥"
+          :type="passwordType"
+          autocomplete="current-password"
+        >
+          <template #prefix>
+            <KeyRound :size="17" />
+          </template>
+          <template #suffix>
+            <BaseButton
+              icon-only
+              variant="ghost"
+              size="sm"
+              class="login-password-toggle"
+              :label="passwordToggleLabel"
+              @mousedown.prevent
+              @click="togglePasswordVisible"
+            >
+              <EyeOff v-if="isPasswordVisible" :size="16" />
+              <Eye v-else :size="16" />
+            </BaseButton>
+          </template>
+        </BaseInput>
+      </label>
+
+      <div class="min-w-0 mb-2">
+        <BaseButton
+          size="lg"
+          type="submit"
+          class="login-submit"
+          :loading="props.loading"
+          :disabled="props.submitDisabled"
+        >
+          <span>{{ submitLabel }}</span>
+          <ArrowRight v-if="!props.loading" :size="18" />
+        </BaseButton>
+      </div>
+    </div>
+  </BaseCard>
+</template>
+
+<style scoped>
+.login-form {
+  --cp-bg-surface: transparent;
+  --cp-bg-subtle: var(--login-toggle-bg);
+  --cp-bg-muted: var(--login-input-bg);
+  --cp-text-primary: var(--login-title);
+  --cp-text-secondary: var(--login-description);
+  --cp-text-muted: var(--login-placeholder);
+  --cp-info: var(--login-button);
+  --cp-info-hover: var(--login-button-hover);
+  --cp-info-pressed: var(--login-button-active);
+  --cp-info-on: var(--cp-white);
+  --cp-info-border: var(--login-input-icon);
+  --cp-danger-bg: var(--login-error-bg);
+  --cp-danger-border: transparent;
+  --cp-danger-text: var(--login-error-text);
+  --cp-danger: var(--login-error-icon);
+  --cp-disabled-bg: var(--login-disabled-bg);
+  --cp-disabled-text: var(--login-disabled-text);
+  --cp-disabled-icon: var(--login-disabled-text);
+  --cp-button-radius-base: 6px;
+  --cp-icon-button-radius: 6px;
+  --cp-shadow-control: none;
+  --cp-shadow-popover: none;
+  --cp-input-height-default: 43px;
+
+  background:
+    linear-gradient(
+      118deg,
+      var(--login-form-bg-a),
+      var(--login-form-bg-b) 56%,
+      var(--login-form-bg-c)
+    ),
+    var(--login-form-bg-b);
+  box-shadow: 0 18px 38px -20px var(--login-form-shadow);
+  backdrop-filter: blur(18px) saturate(1.08);
+  -webkit-backdrop-filter: blur(18px) saturate(1.08);
+}
+
+.login-form-line {
+  position: absolute;
+  top: 0;
+  left: 22px;
+  width: calc(100% - 44px);
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--cp-transparent),
+    var(--login-form-line),
+    var(--cp-transparent)
+  );
+  opacity: 0.42;
+  pointer-events: none;
+}
+
+:global(html[data-theme='dark'] .login-form-line) {
+  opacity: 0.3;
+}
+
+.login-logo {
+  display: inline-flex;
+  width: 38px;
+  height: 38px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: var(--login-logo-bg);
+  color: var(--login-logo-text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.login-theme-toggle {
+  position: relative;
+  display: inline-grid;
+  width: 66px;
+  height: 32px;
+  flex: 0 0 auto;
+  grid-template-columns: 1fr 1fr;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 20px;
+  background: var(--login-toggle-bg);
+  color: var(--login-toggle-moon);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background 0.16s ease,
+    color 0.16s ease;
+}
+
+.login-theme-toggle:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--login-input-icon) 46%, transparent);
+}
+
+.login-theme-toggle > svg {
+  position: relative;
+  z-index: 1;
+}
+
+.login-theme-toggle > svg:first-child {
+  color: var(--login-toggle-sun);
+}
+
+.login-theme-toggle > svg:last-child {
+  color: var(--login-toggle-moon);
+}
+
+.login-theme-knob {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--login-toggle-knob);
+  box-shadow: 0 0 10px var(--login-toggle-shadow);
+  transition: transform 0.2s ease;
+}
+
+.login-theme-toggle.is-dark .login-theme-knob {
+  transform: translateX(34px);
+}
+
+.login-error {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  background: var(--login-error-bg);
+  padding: 0 12px;
+  color: var(--login-error-icon);
+}
+
+.login-error p {
+  min-width: 0;
+  margin: 0;
+  color: var(--login-error-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.login-password-toggle {
+  --cp-bg-subtle: color-mix(in srgb, var(--cp-input-context-bg-hover) 62%, transparent);
+  --cp-bg-muted: color-mix(in srgb, var(--cp-input-context-bg-hover) 88%, transparent);
+
+  color: var(--login-placeholder);
+  border-radius: 6px;
+}
+
+.login-password-toggle:hover {
+  color: var(--login-title);
+}
+
+.login-submit {
+  width: 100%;
+  height: 44px;
+  box-shadow: 0 14px 24px -18px var(--login-button-shadow);
+}
+
+.login-submit:disabled {
+  background: var(--login-disabled-bg);
+  box-shadow: none;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .login-theme-knob,
+  .login-submit,
+  .login-theme-toggle {
+    transition: none;
+  }
+}
+</style>
diff --git a/web/src/views/login/index.vue b/web/src/views/login/index.vue
index 80fd75369..3c666f8a1 100644
--- a/web/src/views/login/index.vue
+++ b/web/src/views/login/index.vue
@@ -2,14 +2,13 @@
 import { storeToRefs } from 'pinia'
 import { computed, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
-import { ArrowRight, Cat, CircleAlert, Eye, EyeOff, KeyRound, Mail, Moon, Sun } from '@lucide/vue'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-import BaseCard from '@/components/base/BaseCard.vue'
-import BaseInput from '@/components/base/BaseInput.vue'
 import { useAuthStore } from '@/stores/modules/auth'
 import { useUiStore } from '@/stores/modules/ui'
 
+import LoginBackground from './components/LoginBackground.vue'
+import LoginPanel from './components/LoginPanel.vue'
+
 const router = useRouter()
 const authStore = useAuthStore()
 const uiStore = useUiStore()
@@ -18,29 +17,10 @@ const { toggleTheme } = uiStore
 
 const username = shallowRef('')
 const password = shallowRef('')
-const passwordVisible = shallowRef(false)
-const passwordType = computed(() => (passwordVisible.value ? 'text' : 'password'))
-const passwordToggleLabel = computed(() => (passwordVisible.value ? '隐藏密码' : '显示密码'))
-const canSubmit = computed(() => !!username.value.trim() && !!password.value.trim())
-const submitDisabled = computed(() => authStore.loading || !canSubmit.value)
-const themeToggleLabel = computed(() =>
-  effectiveTheme.value === 'dark' ? '切换浅色模式' : '切换暗黑模式',
-)
+const canSubmit = computed<boolean>(() => !!username.value.trim() && !!password.value.trim())
+const submitDisabled = computed<boolean>(() => authStore.loading || !canSubmit.value)
 
-const ingressProtocols = ['HTTP JSON', 'HTTP SSE', 'WS JSON', 'WS SSE']
-const upstreamProtocols = ['RESPONSES', 'CHAT', 'REALTIME', 'TRACE']
-const routeClusters = [
-  { id: 'edge', labels: ['edge', 'cache', 'keys'], className: 'login-route-cluster--edge' },
-  { id: 'retry', labels: ['retry', 'trace', 'sse'], className: 'login-route-cluster--retry' },
-  { id: 'audit', labels: ['audit', 'events', 'logs'], className: 'login-route-cluster--audit' },
-  { id: 'model', labels: ['model', 'tools', 'quota'], className: 'login-route-cluster--model' },
-]
-
-function togglePasswordVisible() {
-  passwordVisible.value = !passwordVisible.value
-}
-
-async function handleSubmit() {
+async function handleSubmit(): Promise<void> {
   if (!canSubmit.value) {
     return
   }
@@ -57,340 +37,94 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <main class="login-page">
-    <div class="login-bg" aria-hidden="true">
-      <div class="login-bg-base" />
-      <div class="login-bg-grid" />
-      <div class="login-bg-striations" />
-      <div class="login-bg-grain" />
+  <main class="login-page relative isolate min-h-dvh overflow-hidden text-(--login-title)">
+    <LoginBackground />
 
-      <span class="login-watermark">CODEX_PROXY_RS // ROUTE_TOPOLOGY // AUTH_GATEWAY</span>
-
-      <div class="login-protocol-stack login-protocol-stack--ingress">
-        <span v-for="protocol in ingressProtocols" :key="protocol">{{ protocol }}</span>
-      </div>
-
-      <div class="login-protocol-stack login-protocol-stack--upstream">
-        <span v-for="protocol in upstreamProtocols" :key="protocol">{{ protocol }}</span>
-      </div>
-
-      <svg
-        class="login-topology"
-        viewBox="0 0 1920 1080"
-        preserveAspectRatio="xMidYMid slice"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <g class="login-route-lines">
-          <path
-            class="login-route-line--bundle"
-            d="M0 32c132 0 166 48 270 84 94 32 202 32 370 30 172 0 276-8 410-28 148-22 229-74 329-76m-1379 50c112 0 170 12 274 36 96 22 222 22 366 18 178 0 286 4 426 0 148-4 262-30 313-32m-1379 42c132 0 184-12 294-14 126-2 216 4 346 4 176 0 282 22 426 38 166 20 280 36 313 36m-1379 4c160 0 202-34 316-60 108-24 204-18 324-18 140 0 262 12 378 26 102 12 216 22 361 16"
-            transform="translate(286 382)"
-          />
-          <path
-            class="login-route-line--stream"
-            d="M1030 48c-170-30-320-20-478 30-160 52-292 48-552 10m870-26c-150 10-242 42-358 64-126 24-260 28-440 16"
-            transform="translate(510 316)"
-          />
-          <path
-            class="login-route-line--audit"
-            d="M980 24c-196 54-352 66-512 34-138-28-294-16-468 30m690-24c-134 26-262 30-380 12-106-16-194-8-276 20"
-            transform="translate(440 704)"
-          />
-        </g>
-
-        <g class="login-particle-tracks">
-          <path
-            id="login-track-a"
-            d="M286 414 C418 414 452 462 556 498 C650 530 758 530 926 528 C1098 528 1202 520 1336 500 C1484 478 1565 426 1665 424"
-          />
-          <path
-            id="login-track-b"
-            d="M286 474 C398 474 456 486 560 510 C656 532 782 532 926 528 C1104 528 1212 532 1352 528 C1500 524 1614 498 1665 496"
-          />
-          <path
-            id="login-track-c"
-            d="M286 538 C418 538 470 526 580 524 C706 522 796 528 926 528 C1102 528 1208 550 1352 566 C1518 586 1632 602 1665 602"
-          />
-          <path
-            id="login-track-d"
-            d="M286 606 C446 606 488 572 602 546 C710 522 806 528 926 528 C1066 528 1188 540 1304 554 C1406 566 1520 576 1665 570"
-          />
-          <path
-            id="login-track-return"
-            d="M1540 364 C1370 334 1220 344 1062 394 C902 446 770 442 510 404"
-          />
-        </g>
-
-        <g class="login-particle">
-          <circle r="3.2" />
-          <animateMotion dur="7.2s" repeatCount="indefinite" rotate="auto">
-            <mpath href="#login-track-a" />
-          </animateMotion>
-          <animate
-            attributeName="opacity"
-            values="0;1;1;0"
-            keyTimes="0;0.12;0.82;1"
-            dur="7.2s"
-            repeatCount="indefinite"
-          />
-        </g>
-        <g class="login-particle">
-          <circle r="2.8" />
-          <animateMotion dur="8.8s" begin="-2.1s" repeatCount="indefinite" rotate="auto">
-            <mpath href="#login-track-b" />
-          </animateMotion>
-          <animate
-            attributeName="opacity"
-            values="0;0.82;0.82;0"
-            keyTimes="0;0.14;0.82;1"
-            dur="8.8s"
-            begin="-2.1s"
-            repeatCount="indefinite"
-          />
-        </g>
-        <g class="login-particle">
-          <circle r="2.6" />
-          <animateMotion dur="9.4s" begin="-4.4s" repeatCount="indefinite" rotate="auto">
-            <mpath href="#login-track-c" />
-          </animateMotion>
-          <animate
-            attributeName="opacity"
-            values="0;0.78;0.78;0"
-            keyTimes="0;0.13;0.84;1"
-            dur="9.4s"
-            begin="-4.4s"
-            repeatCount="indefinite"
-          />
-        </g>
-        <g class="login-particle">
-          <circle r="2.5" />
-          <animateMotion dur="10.8s" begin="-5.2s" repeatCount="indefinite" rotate="auto">
-            <mpath href="#login-track-d" />
-          </animateMotion>
-          <animate
-            attributeName="opacity"
-            values="0;0.7;0.7;0"
-            keyTimes="0;0.16;0.8;1"
-            dur="10.8s"
-            begin="-5.2s"
-            repeatCount="indefinite"
-          />
-        </g>
-        <g class="login-particle">
-          <circle r="2.3" />
-          <animateMotion dur="11.4s" begin="-1.8s" repeatCount="indefinite" rotate="auto">
-            <mpath href="#login-track-return" />
-          </animateMotion>
-          <animate
-            attributeName="opacity"
-            values="0;0.55;0.55;0"
-            keyTimes="0;0.16;0.78;1"
-            dur="11.4s"
-            begin="-1.8s"
-            repeatCount="indefinite"
-          />
-        </g>
-
-        <g class="login-packets login-packets--semantic">
-          <circle cx="420" cy="410" r="3" />
-          <circle cx="626" cy="524" r="3" />
-          <circle cx="812" cy="524" r="3" />
-          <circle cx="1262" cy="502" r="3" />
-          <circle cx="1540" cy="422" r="3" />
-          <circle cx="614" cy="459" r="2.5" />
-          <circle cx="780" cy="528" r="2.5" />
-          <circle cx="982" cy="528" r="2.5" />
-          <circle cx="1390" cy="496" r="2.5" />
-        </g>
-      </svg>
-
-      <div
-        v-for="cluster in routeClusters"
-        :key="cluster.id"
-        class="login-route-cluster"
-        :class="cluster.className"
-      >
-        <span v-for="label in cluster.labels" :key="label">
-          <i aria-hidden="true" />
-          {{ label }}
-        </span>
-      </div>
-    </div>
-
-    <section class="login-stage" aria-label="Codex Proxy RS 登录">
-      <BaseCard
-        as="form"
-        :padded="false"
-        variant="elevated"
-        class="login-form"
-        @submit.prevent="handleSubmit"
-      >
-        <div class="login-form-line" aria-hidden="true" />
-
-        <header class="login-topbar">
-          <div class="login-brand">
-            <span class="login-logo">
-              <Cat :size="20" :stroke-width="2.1" />
-            </span>
-            <span class="login-brand-text">
-              <strong>Codex Proxy RS</strong>
-              <span>ADMIN REALM</span>
-            </span>
-          </div>
-
-          <button
-            class="login-theme-toggle"
-            :class="{ 'is-dark': effectiveTheme === 'dark' }"
-            type="button"
-            :aria-label="themeToggleLabel"
-            :title="themeToggleLabel"
-            @click="toggleTheme($event)"
-          >
-            <Sun :size="16" />
-            <span class="login-theme-knob" aria-hidden="true" />
-            <Moon :size="16" />
-          </button>
-        </header>
-
-        <section class="login-form-header" aria-labelledby="login-title">
-          <h1 id="login-title">控制台登录</h1>
-          <p>使用管理员账号进入 Codex Proxy RS，管理路由、密钥、账号池与链路观测。</p>
-        </section>
-
-        <div class="login-fields">
-          <div v-if="authStore.error" class="login-error" role="alert">
-            <CircleAlert :size="16" />
-            <p>{{ authStore.error }}</p>
-          </div>
-
-          <label class="login-field-group">
-            <span>管理员账号</span>
-            <BaseInput v-model="username" placeholder="admin@example.com" autocomplete="username">
-              <template #prefix>
-                <Mail :size="17" />
-              </template>
-            </BaseInput>
-          </label>
-
-          <label class="login-field-group">
-            <span>访问密钥</span>
-            <BaseInput
-              v-model="password"
-              placeholder="输入会话密钥"
-              :type="passwordType"
-              autocomplete="current-password"
-            >
-              <template #prefix>
-                <KeyRound :size="17" />
-              </template>
-              <template #suffix>
-                <BaseButton
-                  icon-only
-                  variant="ghost"
-                  size="sm"
-                  class="login-password-toggle"
-                  :label="passwordToggleLabel"
-                  @mousedown.prevent
-                  @click="togglePasswordVisible"
-                >
-                  <EyeOff v-if="passwordVisible" :size="16" />
-                  <Eye v-else :size="16" />
-                </BaseButton>
-              </template>
-            </BaseInput>
-          </label>
-
-          <div class="login-submit-slot">
-            <BaseButton
-              size="lg"
-              type="submit"
-              class="login-submit"
-              :loading="authStore.loading"
-              :disabled="submitDisabled"
-            >
-              <span>{{ authStore.loading ? '正在进入...' : '进入控制台' }}</span>
-              <ArrowRight v-if="!authStore.loading" :size="18" />
-            </BaseButton>
-          </div>
-
-          <footer class="login-form-footer">
-            <span>Zzz</span>
-            <span>v0.1 admin realm</span>
-          </footer>
-        </div>
-      </BaseCard>
+    <section
+      class="grid min-h-dvh items-center justify-items-center px-5 py-[clamp(24px,5vh,64px)] min-[980px]:justify-items-end min-[980px]:pr-[clamp(48px,17.3vw,332px)] max-[560px]:p-4.5"
+      aria-label="Codex Proxy RS 登录"
+    >
+      <LoginPanel
+        v-model:username="username"
+        v-model:password="password"
+        :error="authStore.error"
+        :loading="authStore.loading"
+        :submit-disabled="submitDisabled"
+        :effective-theme="effectiveTheme"
+        @submit="handleSubmit"
+        @toggle-theme="toggleTheme"
+      />
     </section>
   </main>
 </template>
 
 <style scoped>
 .login-page {
-  --login-page-a: #f7fafc;
-  --login-page-b: #eef4fa;
-  --login-page-c: #e6eef5;
-  --login-base-a: #ffffff;
-  --login-base-b: #f3f7fb;
-  --login-base-c: #e8eff6;
-  --login-edge-mid: #c8d7e733;
-  --login-edge-end: #8da1b840;
-  --login-grid: #5b708607;
-  --login-striation: #5b708632;
-  --login-grain: #60798f22;
-  --login-grain-alt-a: #60798f22;
-  --login-grain-alt-b: #60798f22;
-  --login-route-bundle: #2e526b32;
-  --login-route-stream: #2f7fb028;
-  --login-route-audit: #52697d24;
-  --login-semantic: #2f7fb044;
-  --login-particle: #2f7fb0;
-  --login-particle-glow: #2f7fb099;
-  --login-watermark: #2f465d8c;
-  --login-stack-text: #294157d8;
-  --login-stack-bg: #ffffffb8;
-  --login-stack-dot: #1f78aa9e;
+  --login-page-a: color-mix(in srgb, var(--cp-bg-page) 82%, var(--cp-white));
+  --login-page-b: color-mix(in srgb, var(--cp-bg-page) 72%, var(--cp-info-bg));
+  --login-page-c: color-mix(in srgb, var(--cp-bg-muted) 78%, var(--cp-info-bg));
+  --login-base-a: var(--cp-bg-surface);
+  --login-base-b: color-mix(in srgb, var(--cp-bg-page) 70%, var(--cp-white));
+  --login-base-c: color-mix(in srgb, var(--cp-bg-muted) 78%, var(--cp-info-bg));
+  --login-edge-mid: color-mix(in srgb, var(--cp-border-primary) 55%, transparent);
+  --login-edge-end: color-mix(in srgb, var(--cp-text-secondary) 32%, transparent);
+  --login-grid: color-mix(in srgb, var(--cp-text-secondary) 5%, transparent);
+  --login-striation: color-mix(in srgb, var(--cp-text-secondary) 18%, transparent);
+  --login-grain: color-mix(in srgb, var(--cp-text-secondary) 13%, transparent);
+  --login-grain-alt-a: color-mix(in srgb, var(--cp-info) 11%, transparent);
+  --login-grain-alt-b: color-mix(in srgb, var(--cp-normal) 9%, transparent);
+  --login-route-bundle: color-mix(in srgb, var(--cp-text-secondary) 20%, transparent);
+  --login-route-stream: color-mix(in srgb, var(--cp-info) 17%, transparent);
+  --login-route-audit: color-mix(in srgb, var(--cp-text-tertiary) 18%, transparent);
+  --login-semantic: color-mix(in srgb, var(--cp-info) 26%, transparent);
+  --login-particle: color-mix(in srgb, var(--cp-info) 76%, var(--cp-normal));
+  --login-particle-glow: color-mix(in srgb, var(--cp-info) 62%, transparent);
+  --login-watermark: color-mix(in srgb, var(--cp-text-primary) 55%, transparent);
+  --login-stack-text: color-mix(in srgb, var(--cp-text-primary) 84%, transparent);
+  --login-stack-bg: color-mix(in srgb, var(--cp-bg-surface) 72%, transparent);
+  --login-stack-dot: color-mix(in srgb, var(--cp-info) 62%, transparent);
   --login-stack-opacity: 0.55;
   --login-stack-upstream-opacity: 0.62;
-  --login-cluster-bg: #ffffffb8;
-  --login-cluster-pulse: #1f78aaa8;
-  --login-cluster-text: #294157c8;
-  --login-form-bg-a: #fffffff2;
-  --login-form-bg-b: #f8fbffe8;
-  --login-form-bg-c: #edf3f9ea;
-  --login-form-shadow: #27415633;
-  --login-form-line: #6e8fae66;
-  --login-logo-bg: #e7f0f8e6;
-  --login-logo-text: #2d6f98;
-  --login-title: #101a27;
-  --login-brand-title: #172536;
-  --login-brand-caption: #64748b;
-  --login-description: #536579;
-  --login-label: #243447;
-  --login-input-bg: #f3f7fb;
-  --login-input-bg-hover: #edf4fa;
-  --login-input-focus: #ffffff;
-  --login-input-icon: #2f6f98;
-  --login-placeholder: #64748b;
-  --login-error-bg: #fff1f2;
-  --login-error-icon: #dc2626;
-  --login-error-text: #b91c1c;
-  --login-button: #2f7fb0;
-  --login-button-hover: #3b90c5;
-  --login-button-active: #256c99;
-  --login-button-shadow: #2f7fb04d;
-  --login-footer: #66798c;
-  --login-toggle-bg: #e7eef6e6;
-  --login-toggle-sun: #2d6f98;
-  --login-toggle-moon: #64748b;
-  --login-toggle-knob: #ffffff;
-  --login-toggle-shadow: #2d6f9833;
-  --login-disabled-bg: #e5edf4;
-  --login-disabled-text: #8797a8;
+  --login-cluster-bg: color-mix(in srgb, var(--cp-bg-surface) 72%, transparent);
+  --login-cluster-pulse: color-mix(in srgb, var(--cp-info) 66%, transparent);
+  --login-cluster-text: color-mix(in srgb, var(--cp-text-primary) 78%, transparent);
+  --login-form-bg-a: color-mix(in srgb, var(--cp-bg-surface) 95%, transparent);
+  --login-form-bg-b: color-mix(in srgb, var(--cp-bg-surface) 82%, var(--cp-info-bg));
+  --login-form-bg-c: color-mix(in srgb, var(--cp-bg-muted) 78%, var(--cp-info-bg));
+  --login-form-shadow: color-mix(in srgb, var(--cp-text-primary) 20%, transparent);
+  --login-form-line: color-mix(in srgb, var(--cp-info-border) 54%, transparent);
+  --login-logo-bg: color-mix(in srgb, var(--cp-info-bg) 74%, var(--cp-bg-surface));
+  --login-logo-text: color-mix(in srgb, var(--cp-info) 72%, var(--cp-normal));
+  --login-title: var(--cp-text-primary);
+  --login-brand-title: var(--cp-text-strong);
+  --login-brand-caption: var(--cp-text-secondary);
+  --login-description: color-mix(in srgb, var(--cp-text-secondary) 82%, var(--cp-text-primary));
+  --login-label: color-mix(in srgb, var(--cp-text-primary) 84%, var(--cp-text-secondary));
+  --login-input-bg: color-mix(in srgb, var(--cp-input-soft-bg) 82%, var(--cp-bg-surface));
+  --login-input-bg-hover: color-mix(
+    in srgb,
+    var(--cp-input-soft-bg-hover) 86%,
+    var(--cp-bg-surface)
+  );
+  --login-input-focus: var(--cp-input-soft-bg-focus);
+  --login-input-icon: var(--cp-info);
+  --login-placeholder: var(--cp-text-secondary);
+  --login-error-bg: var(--cp-danger-bg);
+  --login-error-icon: var(--cp-danger);
+  --login-error-text: var(--cp-danger-text);
+  --login-button: color-mix(in srgb, var(--cp-info) 74%, var(--cp-normal));
+  --login-button-hover: color-mix(in srgb, var(--cp-info-hover) 74%, var(--cp-normal-hover));
+  --login-button-active: color-mix(in srgb, var(--cp-info-pressed) 74%, var(--cp-normal-pressed));
+  --login-button-shadow: color-mix(in srgb, var(--cp-info) 30%, transparent);
+  --login-footer: color-mix(in srgb, var(--cp-text-secondary) 82%, var(--cp-text-tertiary));
+  --login-toggle-bg: color-mix(in srgb, var(--cp-bg-muted) 74%, transparent);
+  --login-toggle-sun: var(--login-logo-text);
+  --login-toggle-moon: var(--cp-text-secondary);
+  --login-toggle-knob: var(--cp-bg-surface);
+  --login-toggle-shadow: color-mix(in srgb, var(--cp-info) 20%, transparent);
+  --login-disabled-bg: var(--cp-disabled-bg);
+  --login-disabled-text: var(--cp-disabled-text);
 
-  position: relative;
-  min-height: 100dvh;
-  overflow: hidden;
-  color: var(--login-title);
   background: linear-gradient(
     118deg,
     var(--login-page-a),
@@ -401,660 +135,60 @@ async function handleSubmit() {
 }
 
 :global(html[data-theme='dark'] .login-page) {
-  --login-page-a: #0a1420;
-  --login-page-b: #101c2b;
-  --login-page-c: #081a1d;
-  --login-base-a: #172638;
-  --login-base-b: #0d1722;
-  --login-base-c: #05080c;
-  --login-edge-mid: #00000034;
-  --login-edge-end: #000000a8;
-  --login-grid: #6f91ab0c;
-  --login-striation: #6f91ab0c;
-  --login-grain: #9fb8c910;
-  --login-grain-alt-a: #6f91ab12;
-  --login-grain-alt-b: #d6eaf50a;
-  --login-route-bundle: #b3d9f02a;
-  --login-route-stream: #8fcbea24;
-  --login-route-audit: #b3d9f01f;
-  --login-semantic: #9bcfea44;
-  --login-particle: #9ee7ff;
-  --login-particle-glow: #9ee7ffcc;
-  --login-watermark: #b3d9f05f;
-  --login-stack-text: #dcebface;
-  --login-stack-bg: #1422338a;
-  --login-stack-dot: #7cc7eaba;
+  --login-page-a: color-mix(in srgb, var(--cp-bg-page) 86%, var(--cp-bg-dark));
+  --login-page-b: color-mix(in srgb, var(--cp-bg-surface) 68%, var(--cp-bg-page));
+  --login-page-c: color-mix(in srgb, var(--cp-bg-dark) 76%, var(--cp-normal-bg));
+  --login-base-a: color-mix(in srgb, var(--cp-bg-surface) 82%, var(--cp-bg-muted));
+  --login-base-b: color-mix(in srgb, var(--cp-bg-page) 88%, var(--cp-bg-surface));
+  --login-base-c: color-mix(in srgb, var(--cp-bg-dark) 88%, var(--cp-bg-page));
+  --login-edge-mid: color-mix(in srgb, var(--cp-bg-dark) 32%, transparent);
+  --login-edge-end: color-mix(in srgb, var(--cp-bg-dark) 66%, transparent);
+  --login-grid: color-mix(in srgb, var(--cp-info-text) 5%, transparent);
+  --login-striation: color-mix(in srgb, var(--cp-info-text) 5%, transparent);
+  --login-grain: color-mix(in srgb, var(--cp-text-secondary) 9%, transparent);
+  --login-grain-alt-a: color-mix(in srgb, var(--cp-info-text) 7%, transparent);
+  --login-grain-alt-b: color-mix(in srgb, var(--cp-normal-text) 5%, transparent);
+  --login-route-bundle: color-mix(in srgb, var(--cp-info-text) 17%, transparent);
+  --login-route-stream: color-mix(in srgb, var(--cp-info-text) 14%, transparent);
+  --login-route-audit: color-mix(in srgb, var(--cp-text-secondary) 12%, transparent);
+  --login-semantic: color-mix(in srgb, var(--cp-info-text) 27%, transparent);
+  --login-particle: color-mix(in srgb, var(--cp-info-text) 72%, var(--cp-normal));
+  --login-particle-glow: color-mix(in srgb, var(--cp-info-text) 80%, transparent);
+  --login-watermark: color-mix(in srgb, var(--cp-info-text) 40%, transparent);
+  --login-stack-text: color-mix(in srgb, var(--cp-text-primary) 80%, transparent);
+  --login-stack-bg: color-mix(in srgb, var(--cp-bg-surface) 54%, transparent);
+  --login-stack-dot: color-mix(in srgb, var(--cp-info-text) 72%, transparent);
   --login-stack-opacity: 0.76;
   --login-stack-upstream-opacity: 0.76;
-  --login-cluster-bg: #14223386;
-  --login-cluster-pulse: #6ec4e9b0;
-  --login-cluster-text: #c6e4f2a8;
-  --login-form-bg-a: #243244e0;
-  --login-form-bg-b: #1a2837ea;
-  --login-form-bg-c: #121d2be8;
-  --login-form-shadow: #00000080;
-  --login-form-line: #b3d9f0aa;
-  --login-logo-bg: #101b26d9;
-  --login-logo-text: #b3d9f0;
-  --login-title: #f7fbff;
-  --login-brand-title: #ffffff;
-  --login-brand-caption: #888888;
-  --login-description: #a8b6c3;
-  --login-label: #d8e6f5;
-  --login-input-bg: #0c1621dd;
-  --login-input-bg-hover: #111d2bdd;
-  --login-input-focus: #132334e8;
-  --login-input-icon: #7dd3fc;
-  --login-placeholder: #6b7d90;
-  --login-error-bg: #ef44441a;
-  --login-error-icon: #fca5a5;
-  --login-error-text: #fecaca;
-  --login-button: #3f8ec6;
-  --login-button-hover: #4a9fd8;
-  --login-button-active: #317bab;
-  --login-button-shadow: #3f8ec64d;
-  --login-footer: #7f8ea3;
-  --login-toggle-bg: #101b26d9;
-  --login-toggle-sun: #888888;
-  --login-toggle-moon: #ffffff;
-  --login-toggle-knob: #4a9fd8;
-  --login-toggle-shadow: #4a9fd84d;
-  --login-disabled-bg: #1b2735;
-  --login-disabled-text: #6b7d90;
-}
-
-.login-bg {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.login-bg-base,
-.login-bg-base::after,
-.login-bg-grid,
-.login-bg-striations,
-.login-bg-grain,
-.login-topology {
-  position: absolute;
-  inset: 0;
-}
-
-.login-bg-base {
-  background:
-    radial-gradient(
-      ellipse 59% 48% at 55% 48%,
-      var(--login-base-a) 0%,
-      var(--login-base-b) 50%,
-      var(--login-base-c) 100%
-    ),
-    var(--login-base-c);
-}
-
-.login-bg-base::after {
-  content: '';
-  background: radial-gradient(
-    ellipse 52.5% 44% at 54% 47%,
-    transparent 0%,
-    var(--login-edge-mid) 72%,
-    var(--login-edge-end) 100%
-  );
-}
-
-.login-bg-grid {
-  background:
-    repeating-linear-gradient(90deg, var(--login-grid) 0 1px, transparent 1px 80px),
-    repeating-linear-gradient(180deg, var(--login-grid) 0 1px, transparent 1px 80px);
-}
-
-.login-bg-striations {
-  background:
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 126px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 214px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 338px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 462px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 586px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 714px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 846px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 982px / 100% 1px no-repeat;
-}
-
-.login-bg-grain {
-  opacity: 0.68;
-  background-image:
-    linear-gradient(var(--login-grain), var(--login-grain)) 139px 109px / 3px 2px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 288px 192px / 1px 1px
-      no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 437px 275px / 1px 1px
-      no-repeat,
-    linear-gradient(var(--login-grain), var(--login-grain)) 586px 358px / 2px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 735px 441px / 1px 2px
-      no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 884px 524px / 3px 1px
-      no-repeat,
-    linear-gradient(var(--login-grain), var(--login-grain)) 1033px 607px / 2px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 1182px 690px / 1px 1px
-      no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 1331px 773px / 1px 2px
-      no-repeat,
-    linear-gradient(var(--login-grain), var(--login-grain)) 1480px 856px / 2px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 1629px 939px / 3px 1px
-      no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 1778px 67px / 1px 1px
-      no-repeat;
-}
-
-.login-watermark {
-  position: absolute;
-  top: 9.63%;
-  left: 6.15%;
-  color: var(--login-watermark);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.login-protocol-stack {
-  position: absolute;
-  display: grid;
-  gap: 8px;
-  width: 156px;
-  color: var(--login-stack-text);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-}
-
-.login-protocol-stack--ingress {
-  top: 36.1111%;
-  left: 6.5625%;
-  --login-stack-item-opacity: var(--login-stack-opacity);
-}
-
-.login-protocol-stack--upstream {
-  top: 36.1111%;
-  right: 3.4375%;
-  --login-stack-item-opacity: var(--login-stack-upstream-opacity);
-}
-
-.login-protocol-stack span {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 8px;
-  border-radius: 4px;
-  background: var(--login-stack-bg);
-  padding: 7px 10px;
-  opacity: var(--login-stack-item-opacity);
-}
-
-.login-protocol-stack span::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  flex: 0 0 auto;
-  border-radius: 50%;
-  background: var(--login-stack-dot);
-}
-
-.login-topology {
-  width: 100%;
-  height: 100%;
-}
-
-.login-topology path,
-.login-topology ellipse,
-.login-topology circle {
-  vector-effect: non-scaling-stroke;
-}
-
-.login-route-lines path {
-  fill: transparent;
-  stroke-width: 1;
-  stroke-linecap: round;
-}
-
-.login-route-line--bundle {
-  stroke: var(--login-route-bundle);
-}
-
-.login-route-line--stream {
-  stroke: var(--login-route-stream);
-}
-
-.login-route-line--audit {
-  stroke: var(--login-route-audit);
-}
-
-.login-particle-tracks path {
-  fill: transparent;
-  stroke: none;
-}
-
-.login-particle {
-  opacity: 0;
-  filter: drop-shadow(0 0 8px var(--login-particle-glow));
-}
-
-.login-particle circle {
-  fill: var(--login-particle);
-}
-
-.login-packets--semantic circle {
-  fill: var(--login-semantic);
-}
-
-.login-route-cluster {
-  position: absolute;
-  display: grid;
-  gap: 6px;
-  color: var(--login-cluster-text);
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 1;
-}
-
-.login-route-cluster span {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 8px;
-  border-radius: 4px;
-  background: var(--login-cluster-bg);
-  padding: 4px 8px;
-}
-
-.login-route-cluster i {
-  display: inline-block;
-  width: 18px;
-  height: 2px;
-  border-radius: 2px;
-  background: var(--login-cluster-pulse);
-}
-
-.login-route-cluster--edge {
-  top: 28.2407%;
-  left: 23.4375%;
-}
-
-.login-route-cluster--retry {
-  top: 26.2963%;
-  left: 63.0208%;
-}
-
-.login-route-cluster--audit {
-  top: 69.4444%;
-  left: 23.6979%;
-}
-
-.login-route-cluster--model {
-  top: 68.7037%;
-  left: 66.6667%;
-}
-
-.login-stage {
-  box-sizing: border-box;
-  display: grid;
-  min-height: 100dvh;
-  padding: clamp(24px, 5vh, 64px) clamp(20px, 4vw, 64px);
-  align-items: center;
-  justify-items: center;
-}
-
-.login-form {
-  --cp-bg-surface: transparent;
-  --cp-bg-subtle: var(--login-toggle-bg);
-  --cp-bg-muted: var(--login-input-bg);
-  --cp-text-primary: var(--login-title);
-  --cp-text-secondary: var(--login-description);
-  --cp-text-muted: var(--login-placeholder);
-  --cp-info: var(--login-button);
-  --cp-info-hover: var(--login-button-hover);
-  --cp-info-pressed: var(--login-button-active);
-  --cp-info-on: #ffffff;
-  --cp-info-border: var(--login-input-icon);
-  --cp-danger-bg: var(--login-error-bg);
-  --cp-danger-border: transparent;
-  --cp-danger-text: var(--login-error-text);
-  --cp-danger: var(--login-error-icon);
-  --cp-disabled-bg: var(--login-disabled-bg);
-  --cp-disabled-text: var(--login-disabled-text);
-  --cp-disabled-icon: var(--login-disabled-text);
-  --cp-button-radius-base: 6px;
-  --cp-icon-button-radius: 6px;
-  --cp-shadow-control: none;
-  --cp-shadow-popover: none;
-  --cp-input-height-default: 43px;
-
-  position: relative;
-  display: grid;
-  width: min(420px, 100%);
-  min-height: 517px;
-  gap: 18px;
-  padding: 26px 30px 24px;
-  border-radius: 8px;
-  background:
-    linear-gradient(
-      118deg,
-      var(--login-form-bg-a),
-      var(--login-form-bg-b) 56%,
-      var(--login-form-bg-c)
-    ),
-    var(--login-form-bg-b);
-  box-shadow: 0 18px 38px -20px var(--login-form-shadow);
-  backdrop-filter: blur(18px) saturate(1.08);
-  -webkit-backdrop-filter: blur(18px) saturate(1.08);
-}
-
-.login-form-line {
-  position: absolute;
-  top: 0;
-  left: 22px;
-  width: calc(100% - 44px);
-  height: 2px;
-  background: linear-gradient(90deg, #ffffff00, var(--login-form-line), #ffffff00);
-  opacity: 0.42;
-  pointer-events: none;
-}
-
-:global(html[data-theme='dark'] .login-form-line) {
-  opacity: 0.3;
-}
-
-.login-topbar {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-}
-
-.login-brand {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 12px;
-}
-
-.login-logo {
-  display: inline-flex;
-  width: 38px;
-  height: 38px;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: var(--login-logo-bg);
-  color: var(--login-logo-text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-}
-
-.login-brand-text {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-}
-
-.login-brand-text strong {
-  color: var(--login-brand-title);
-  font-size: 17px;
-  font-weight: 600;
-  line-height: 1.12;
-}
-
-.login-brand-text span {
-  color: var(--login-brand-caption);
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 1.2;
-}
-
-.login-theme-toggle {
-  position: relative;
-  display: inline-grid;
-  width: 66px;
-  height: 32px;
-  flex: 0 0 auto;
-  grid-template-columns: 1fr 1fr;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: 20px;
-  background: var(--login-toggle-bg);
-  color: var(--login-toggle-moon);
-  cursor: pointer;
-  outline: none;
-  transition:
-    background 0.16s ease,
-    color 0.16s ease;
-}
-
-.login-theme-toggle:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--login-input-icon) 46%, transparent);
-}
-
-.login-theme-toggle > svg {
-  position: relative;
-  z-index: 1;
-}
-
-.login-theme-toggle > svg:first-child {
-  color: var(--login-toggle-sun);
-}
-
-.login-theme-toggle > svg:last-child {
-  color: var(--login-toggle-moon);
-}
-
-.login-theme-knob {
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: var(--login-toggle-knob);
-  box-shadow: 0 0 10px var(--login-toggle-shadow);
-  transition: transform 0.2s ease;
-}
-
-.login-theme-toggle.is-dark .login-theme-knob {
-  transform: translateX(34px);
-}
-
-.login-form-header {
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-}
-
-.login-form-header h1 {
-  margin: 0;
-  color: var(--login-title);
-  font-size: 34px;
-  font-weight: 600;
-  line-height: 1.02;
-}
-
-.login-form-header p {
-  margin: 0;
-  color: var(--login-description);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.45;
-}
-
-.login-error {
-  display: flex;
-  min-height: 38px;
-  align-items: center;
-  gap: 10px;
-  border-radius: 6px;
-  background: var(--login-error-bg);
-  padding: 0 12px;
-  color: var(--login-error-icon);
-}
-
-.login-error p {
-  min-width: 0;
-  margin: 0;
-  color: var(--login-error-text);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.35;
-}
-
-.login-fields {
-  display: grid;
-  gap: 12px;
-}
-
-.login-field-group {
-  display: grid;
-  min-width: 0;
-  gap: 8px;
-}
-
-.login-field-group > span {
-  color: var(--login-label);
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.1;
-}
-
-.login-password-toggle {
-  --cp-bg-subtle: color-mix(in srgb, var(--cp-input-context-bg-hover) 62%, transparent);
-  --cp-bg-muted: color-mix(in srgb, var(--cp-input-context-bg-hover) 88%, transparent);
-
-  color: var(--login-placeholder);
-  border-radius: 6px;
-}
-
-.login-password-toggle:hover {
-  color: var(--login-title);
-}
-
-.login-submit-slot {
-  min-width: 0;
-}
-
-.login-submit {
-  width: 100%;
-  height: 48px;
-  background: var(--login-button);
-  box-shadow: 0 14px 24px -18px var(--login-button-shadow);
-  transition:
-    background 0.16s ease,
-    box-shadow 0.16s ease,
-    transform 0.14s ease;
-}
-
-.login-submit:not(:disabled):hover {
-  background: var(--login-button-hover);
-  box-shadow: 0 16px 30px -17px var(--login-button-shadow);
-  transform: translateY(-1px);
-}
-
-.login-submit:not(:disabled):active {
-  background: var(--login-button-active);
-  box-shadow: 0 10px 18px -18px var(--login-button-shadow);
-  transform: translateY(0);
-}
-
-.login-submit:disabled {
-  background: var(--login-disabled-bg);
-  box-shadow: none;
-  transform: none;
-}
-
-.login-form-footer {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.login-form-footer span {
-  min-width: 0;
-  color: var(--login-footer);
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.login-form-footer span:last-child {
-  text-align: right;
-}
-
-@media (min-width: 980px) {
-  .login-stage {
-    justify-items: end;
-    padding-right: clamp(48px, 17.3vw, 332px);
-  }
-}
-
-@media (max-width: 720px) {
-  .login-watermark,
-  .login-protocol-stack,
-  .login-route-cluster {
-    opacity: 0.48;
-  }
-}
-
-@media (max-width: 560px) {
-  .login-stage {
-    padding: 18px;
-  }
-
-  .login-form {
-    min-height: auto;
-    gap: 16px;
-    padding: 22px;
-  }
-
-  .login-topbar {
-    gap: 14px;
-  }
-
-  .login-brand-text strong {
-    font-size: 15px;
-  }
-
-  .login-form-header h1 {
-    font-size: 30px;
-  }
-
-  .login-form-footer {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .login-form-footer span:last-child {
-    text-align: left;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .login-particle {
-    display: none;
-  }
-
-  .login-theme-knob,
-  .login-submit,
-  .login-theme-toggle {
-    transition: none;
-  }
+  --login-cluster-bg: color-mix(in srgb, var(--cp-bg-surface) 52%, transparent);
+  --login-cluster-pulse: color-mix(in srgb, var(--cp-info-text) 70%, transparent);
+  --login-cluster-text: color-mix(in srgb, var(--cp-text-primary) 66%, transparent);
+  --login-form-bg-a: color-mix(in srgb, var(--cp-bg-muted) 82%, transparent);
+  --login-form-bg-b: color-mix(in srgb, var(--cp-bg-surface) 86%, transparent);
+  --login-form-bg-c: color-mix(in srgb, var(--cp-bg-page) 90%, transparent);
+  --login-form-shadow: color-mix(in srgb, var(--cp-bg-dark) 70%, transparent);
+  --login-form-line: color-mix(in srgb, var(--cp-info-text) 66%, transparent);
+  --login-logo-bg: color-mix(in srgb, var(--cp-bg-surface) 84%, transparent);
+  --login-logo-text: var(--cp-info-text);
+  --login-title: var(--cp-text-strong);
+  --login-brand-title: var(--cp-white);
+  --login-brand-caption: var(--cp-text-tertiary);
+  --login-description: color-mix(in srgb, var(--cp-text-secondary) 82%, var(--cp-text-primary));
+  --login-label: color-mix(in srgb, var(--cp-text-primary) 86%, var(--cp-white));
+  --login-input-bg: color-mix(in srgb, var(--cp-bg-dark) 58%, transparent);
+  --login-input-bg-hover: color-mix(in srgb, var(--cp-bg-muted) 62%, transparent);
+  --login-input-focus: color-mix(in srgb, var(--cp-bg-muted) 72%, transparent);
+  --login-input-icon: var(--cp-info-text);
+  --login-placeholder: var(--cp-text-muted);
+  --login-button: color-mix(in srgb, var(--cp-info) 76%, var(--cp-normal));
+  --login-button-hover: color-mix(in srgb, var(--cp-info-hover) 78%, var(--cp-normal-hover));
+  --login-button-active: color-mix(in srgb, var(--cp-info-pressed) 78%, var(--cp-normal-pressed));
+  --login-button-shadow: color-mix(in srgb, var(--cp-info) 30%, transparent);
+  --login-footer: color-mix(in srgb, var(--cp-text-secondary) 80%, var(--cp-text-muted));
+  --login-toggle-bg: color-mix(in srgb, var(--cp-bg-surface) 84%, transparent);
+  --login-toggle-sun: var(--cp-text-tertiary);
+  --login-toggle-moon: var(--cp-white);
+  --login-toggle-knob: var(--login-button-hover);
+  --login-toggle-shadow: color-mix(in srgb, var(--cp-info) 30%, transparent);
 }
 </style>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index c6dd39b2e..3518274f3 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -3,11 +3,6 @@ import vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 
-function shouldIgnoreRolldownLog(log: { code?: string; id?: string; loc?: { file?: string } }) {
-  const source = `${String(log.id ?? '')} ${String(log.loc?.file ?? '')} ${JSON.stringify(log)}`
-  return log.code === 'INVALID_ANNOTATION' && source.includes('@vueuse/core')
-}
-
 export default defineConfig({
   base: '/',
   plugins: [vue(), tailwindcss()],
@@ -31,13 +26,6 @@ export default defineConfig({
     assetsDir: 'assets',
     chunkSizeWarningLimit: 600,
     rolldownOptions: {
-      onLog(level, log, handler) {
-        if (level === 'warn' && shouldIgnoreRolldownLog(log)) {
-          return
-        }
-
-        handler(level, log)
-      },
       output: {
         codeSplitting: {
           groups: [